Programmering

Hur komprimerade HTML-arbeten och varför du behöver det

Hur komprimerade HTML-arbeten och varför du behöver det / Programmering

Om du kör en webbplats borde du redan veta hur du använder rätt bildformat och optimera dina bilder för webben 10 Gratis Online Batch Image Tools för att ändra storlek, konvertering och optimering av 10 gratis online-batchbildsverktyg för att ändra storlek, konvertering och optimering Du behöver batchredigeringsverktyg när du har massor av foton att bearbeta och mycket liten tid. Vi presenterar dig för de bästa batchresenärerna, optimatorerna eller omvandlarna som finns tillgängliga online. Läs mer . Men medan bildkomprimering är en välkänd praxis tenderar HTML-komprimering att förbises, vilket är synd eftersom fördelarna är värda.

I den här artikeln går vi över de två huvudmetoderna för att krympa HTML-filer, varför HTML-filer ska krympas och hur man går till det.

Kompression vs Minifiering

Vad beträffar optimering av HTML-filer finns det två huvudsakliga metoder för det: kompression och minification. De låter liknande på ytan, men är faktiskt två olika tekniker, så få dem inte förvirrade.

minification

Du kan tänka på minifiering som borttagning av onödiga tecken och linjer i källkoden. Tänk på indryckning, kommentarer, tomma rader osv. Ingen av dessa krävs i HTML - de finns för att göra filen lättare att läsa. Att trimma dessa detaljer kan raka ner filstorleken utan att påverka något.

Exempel på HTML-sida:

  Din titel här   
 
Detta är en rubrik
 
Skicka mig mail på [email protected].
 
Detta är en ny paragraf!
 
Detta är en ny stycke med fetstil och kursiv.

Sample HTML-sida, minifierad:

Din titel här
Detta är en rubrik
Skicka mig mail på [email protected].
Detta är en ny paragraf!
Detta är en ny stycke med fetstil och kursiv.

Originalstorlek: 354. Minimal storlek: 272. Besparingar: 82 (23.16%).

Många webbutvecklare och webbplatsägare reserverar endast minifiering för JS- och CSS-filer, men denna föråldrade övning är ett misstag. HTML-minifiering är också viktigt.

Tillbaka på 2000-talet var minifunktionsverktygen sällsynta. Du måste manuellt minska filer varje gång något ändras. Eftersom HTML-filer byter oftare än JS- och CSS-filer, var det helt enkelt tråkigt att minska varje gång då. Nuförtiden är det en bra punkt.

Kompression

När användare besöker din webbplats gör de det med hjälp av HTTP-protokollet. Webbläsaren skickar en begäran till din webbserver för en viss sida, din webbserver hittar sidan och skickar sedan innehållet på den sidan till besökarens webbläsare.

Men eftersom HTTP-protokollet stöder komprimering kan din webbserver komprimera sidan innan den skickas till besökaren (förutsatt att komprimering är aktiverad i din servers inställningar) och sedan kan besökarens webbläsare dekomprimera sidan tillbaka till dess ursprungliga tillstånd.

Det vanligaste komprimeringsschemat är GZIP, vilket är ett filformat som använder en förlustfri komprimeringsalgoritm Hur fungerar filkomprimering? Hur fungerar filkomprimering? Filkomprimering är kärnan i hur den moderna webben fungerar, man kan argumentera för, eftersom det tillåter oss att dela filer som annars skulle ta för lång tid att överföra. Men hur fungerar det? Läs mer kallat DEFLATE.

Algoritmen söker efter upprepade händelser av text i HTML-filen och ersätter sedan de upprepade händelserna med referenser till en tidigare händelse. Varje referens är helt enkelt två siffror: hur långt tillbaka är referensen och hur många tecken vi refererar till.

Tänk på en sträng text så här (exempel taget från GZIP-webbplatsen):

Blah blah blah blah blah.

Algoritmen känner igen följande repetition:

B lah b lah b lah b lah b lah.

Den första händelsen är vår referens, så lämna den:

Blah b lah b lah b lah b lah.

Den andra händelsen refererar till den första förekomsten, vilken är fem tecken bakom och fem tecken långa:

Blah b [5,5] lah b lah b lah.

Men i detta fall erkänner algoritmen att nästa händelse är samma sekvens av tecken, så det sträcker referenslängden med ytterligare fem:

Blah b [5,10] lah b lah.

Och igen:

Blah b [5,15] lah.

Och algoritmen är smart nog att inse att de tre följande tecknen är de tre första tecknen i referensen, så den sträcker sig med tre:

Blah b [5,18].

Tänk nu på en typisk HTML-fil och hur mycket repetition finns inom. Nästan alla taggar, t.ex. , har en motsvarande stängningskod, som . Dessutom upprepas många taggar hela tiden, såsom

,

, ,
  • , etc. Egenskaper upprepas också ofta, inklusive klass, href, och src. Det är lätt att se varför GZIP-komprimering är så effektiv med HTML.

    Den enda nackdelen är att webbservern behöver lite mer CPU för att utföra komprimeringen varje gång en sida begärs. Men eftersom CPU inte är mycket oro för nuförtiden är det nästan alltid bättre att aktivera GZIP än att gå utan, även om du har webbnätverk på inträdesnivå De bästa webbhotellstjänsterna De bästa webbhotellstjänsterna Letar du efter den bästa webbhotellstjänsten för dina behov? Oavsett om det är en liten blogg eller en större företagswebbplats, så är våra bästa rekommendationer. Läs mer .

    Varför du borde komprimera och minska

    Det finns två huvudsakliga fördelar, som båda är avgörande för dagens mobila tunga webblandskap.

    Snabbare sidladdningar

    I genomsnitt kan en HTML-minifier minska storleken på en fil med cirka 3 procent med grundläggande inställningar. Med valfria avancerade inställningar kan en HTML-fil sänkas med ytterligare 3 till 7 procent, för en potentiell minskning på upp till 10 procent. Detta översätter direkt till snabbare sidladdningstider.

    Mindre bandbredd som används

    Låt oss säga att du har 10 filer, varje minifierad från 50 kB till 45 kB för en total krympning på 50 kB. Och låt oss säga att din webbplats serverar i genomsnitt 1000 besökare varje dag, där varje besök är i genomsnitt tio sidor. HTML-kalkyleringen minskar ensam användningen av bandbredd med 50 MB per dag (1,5 GB per månad).

    Komprimering + Minifiering

    Som du kan se är HTML-minifiering användbar på egen hand, särskilt när din webbplats blir större, filer blir större och trafiken ökar. Observera att Googles guider PageSpeed ​​rekommenderar att du redigerar HTML, så om du är skeptisk, låt det övertyga dig annars.

    Men vad som är bra med HTML-optimering är att du inte behöver välja antingen minifiering eller komprimering. Du kan göra båda! Faktum är att du skall gör båda.

    I genomsnitt kan du förvänta dig GZIP-komprimering för att krympa en HTML-fil med 70 till 90 procent. Med hjälp av exemplet ovan med en konservativ komprimeringsberäkning går de minifrerade HTML-filerna från 45 kB till 13,5 kB vardera, för en totalt krympning av 365 kB. Jämfört med unminified / uncompressed, reduceras din webbbredd nu med 365 MB per dag (11 GB per månad).

    Och förutom bäddbreddsbesparingarna laddas varje sida dramatiskt snabbare eftersom slutanvändarens webbläsare bara behöver ladda ner 13,5 KB mot 50 KB per sida.

    Så här komprimerar och minskar HTML

    Lyckligtvis är det inte heller mycket svårt idag, och du behöver inte mycket teknisk kunskap för att ställa upp dem.

    WordPress-plugins

    Om du kör en WordPress-webbplats är allt du behöver göra att installera ett plugin och du kan skörda fördelarna med både komprimering och minifiering.

    De flesta cachepluggar gör mer än bara cachesidor. Till exempel har WP Fastest Cache och W3 Total Cache båda klickinställningar som gör att du kan aktivera HTML-minifiering och GZIP-komprimering, bland andra funktioner som ytterligare snabbar sidladdningar och minskar bandbreddsanvändningen.

    Om du endast vill ha minifiering rekommenderar vi Minifiera HTML-plugin. Det är enkelt, stöder HTML / CSS / JS, och låter dig justera minifieringsmetoden lite (t.ex. om du vill ta bort http: och https: från webbadresser).

    Static HTML Minifiers

    Om dina HTML-filer är statiska (dvs inte dynamiskt genererade av ett CMS- eller webbramverk), kan du behålla två uppsättningar HTML-filer: a “källa” set, vilket är unminified för enkel redigering, och a “minified” set som du skapar när du ändrar en källfil.

    För att minska, använd ett av dessa verktyg:

    • HTMLCompressor
    • HTML Minifier
    • HTML Minifier (annorlunda än den ovan)

    Detta är en livskraftig teknik om du har flyttat från CMS som WordPress och nu använder statiska webbplatsgeneratorer. 7 Anledningar att ditch ditt CMS och överväga en statisk webbplatsgenerator. 7 skäl att ditch ditt CMS och överväga en statisk webbplatsgenerator Under många år publicerades en webbplats var svår för många användare. CMS som WordPress ändrade det, men de kan fortfarande vara förvirrande. Ett annat alternativ är en statisk webbplatsgenerator. Läs mer .

    Aktivera GZIP-komprimering

    Stegen för att aktivera GZIP-komprimering kan variera beroende på vilken webbserverprogramvara du använder. Eftersom Apache är det mest populära alternativet täcker vi hur du aktiverar det med .htaccess.

    Anslut till din webbserver med FTP, och skapa sedan en fil som heter .htaccess i rotkatalogen. Redigera .htaccess-filen för att ha följande inställningar:

     mod_gzip_on Ja mod_gzip_dechunk Ja mod_gzip_item_include fil. (html? | txt | css | js | php | pl) $ mod_gzip_item_include handler ^ cgi-script $ mod_gzip_item_include mime ^ text /.* mod_gzip_item_include mime ^ application / x-javascript. * mod_gzip_item_exclude mime ^ bild /.* mod_gzip_item_exclude rspheader ^ Content-Encoding:. * gzip. *   SetOutputFilter DEFLATE

    Är du osäker på om komprimering fungerar på din webbplats? Testa det med det här verktyget.

    var den här artikeln hjälpsam? Nu när du komprimerar och minifierar bör dina webbsidor ladda snabbare och använda mindre bandbredd. Om du har några frågor, tveka att fråga dem nedan!

    Utforska mer om: HTML, webbutveckling.