Hur komprimerad HTML fungerar och varför du kan behöva det

Hur komprimerad HTML fungerar och varför du kan behöva det

Om du driver en webbplats borde du redan veta hur använd rätt bildformat och optimera dina bilder för webben. Även om bildkomprimering är en välkänd metod tenderar HTML-komprimering att bli förbisedd, vilket är synd eftersom fördelarna är värda.





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



Komprimering kontra förminskning

När det gäller att optimera HTML -filer finns det två huvudmetoder för det: kompression och minifiering . De låter liknande på ytan, men är faktiskt två olika tekniker, så bli inte förvirrad.





Minifiering

Du kan tänka på minifiering som borttagning av onödiga tecken och rader i källkoden. Tänk på inryckningar, kommentarer, tomma rader, etc. Inget av detta krävs i HTML - de finns för att göra filen lättare att läsa. Om du beskär dessa detaljer kan du raka ner filstorleken utan att påverka någonting.

Exempel på HTML -sida:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

Originalstorlek: 354. Minifierad storlek: 272. Besparingar: 82 (23,16%).

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



På 2000 -talet var minifieringsverktyg sällsynta. Du var tvungen att manuellt minska filer varje gång något ändrades. Eftersom HTML -filer ändras oftare än JS- och CSS -filer, var det helt enkelt för tråkigt att minimera varje gång då. Numera är det en poängpunkt.

Kompression

När användare besöker din webbplats gör de det med HTTP -protokollet. Webbläsaren skickar en begäran till din webbserver för en specifik sida, din webbserver hittar sidan och skickar sedan innehållet på sidan tillbaka 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 serverns inställningar) och sedan kan besökarens webbläsare dekomprimera sidan till sitt ursprungliga tillstånd.

Det vanligaste komprimeringsschemat är GZIP , som är ett filformat som använder en förlustfri komprimeringsalgoritm kallas DEFLATE.

Algoritmen letar efter upprepade förekomster av text i HTML -filen och ersätter sedan de upprepade förekomsterna med referenser till en tidigare förekomst. Varje referens är helt enkelt två nummer: hur långt tillbaka är referensen och hur många tecken refererar vi.

Tänk på en textsträng så här (exempel hämtat från GZIP -webbplatsen):

Blah blah blah blah blah.

Algoritmen känner igen följande upprepning:

B{lah b}{lah b}{lah b}{lah b}lah.

Den första förekomsten är vår referens, så låt det vara:

Blah b{lah b}{lah b}{lah b}lah.

Den andra förekomsten hänvisar tillbaka till den första förekomsten, som är fem tecken bakom och fem tecken lång:

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

Men i det här fallet erkänner algoritmen att nästa förekomst är samma teckenföljd, så den förlänger referenslängden med ytterligare fem:

Blah b[5,10]{lah b}lah.

Och igen:

Blah b[5,15]lah.

Och algoritmen är tillräckligt smart för att inse att de tre nästa 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 upprepning som finns inom. Nästan varje tagg, t.ex.

, har en motsvarande sluttagg, som

. Dessutom upprepas många taggar hela tiden, t.ex.

,

,

,

  • , etc. Attribut upprepas också ofta, inklusive

    class

    ,

    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 så mycket bekymmer nuförtiden är det nästan alltid bättre att aktivera GZIP än att gå utan, även om du har webbhotell på instegsnivå.

    Varför du ska komprimera och förminska

    Det finns två huvudfördelar, som båda är avgörande i dagens mobiltunga webblandskap.

    Snabbare sidmängder

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

    Mindre bandbredd används

    Låt oss säga att du har 10 filer, var och en 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 tjänar i genomsnitt 1 000 besökare varje dag, där varje besök i genomsnitt är tio sidor. HTML -minifieringen ensam minskar din bandbreddsanvändning med 50 MB per dag (1,5 GB per månad).

    Komprimering + förminskning

    Som du kan se är HTML -minifiering användbart i sig, särskilt när din webbplats blir större, filer blir större och trafiken ökar. Anteckna det Googles riktlinjer för PageSpeed rekommendera att förminska HTML, så om du är skeptisk, låt det övertyga dig om något annat.

    vilken pc -del ska jag uppgradera

    Men det som är bra med HTML -optimering är att du inte behöver välja vare sig 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 att GZIP -komprimering minskar en HTML -fil med 70 till 90 procent. Med hjälp av exemplet ovan med en konservativ uppskattning av komprimering skulle de minifierade HTML -filerna gå från 45 KB till 13,5 KB vardera, för en total krympning på 365 KB. Jämfört med ominifierad/okomprimerad, minskar din webbplats bandbredd nu med 365 MB per dag (11 GB per månad).

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

    Hur man komprimerar och förminskar HTML

    Lyckligtvis är inga av dem mycket svåra nuförtiden, och du behöver inte mycket teknisk kunskap för att konfigurera dem.

    WordPress -plugins

    Om du kör en WordPress -webbplats är allt du behöver göra att installera ett plugin och du kan dra nytta av både komprimering och minifiering.

    De flesta caching -plugins gör mer än att bara cacha sidor. Till exempel, WP snabbaste cache och W3 Total cache båda har inställningar med ett klick som gör att du kan aktivera HTML-minifiering och GZIP-komprimering, bland andra funktioner som ytterligare påskyndar sidläsningar och minskar bandbreddsanvändningen.

    Om du endast vill minifiera, 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).

    Statiska HTML -förminskare

    Om dina HTML -filer är statiska (dvs. inte dynamiskt genererade av ett CMS eller webbramverk), kan du behålla två uppsättningar HTML -filer: en 'käll' -uppsättning, som inte är minimerad för enkel redigering, och en 'förminskad' uppsättning, som du skapar när du ändrar en källfil.

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

    Detta är en livskraftig teknik om du har flyttat bort från CMS som WordPress och nu använder statiska webbplatsgeneratorer.

    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 kommer vi att täcka 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 Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(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 ^image/.*
    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 .

    För den ultimata effektiviteten bör du också lära dig om hur du kontrollerar, rengör och optimerar din CSS .

    Dela med sig Dela med sig Tweet E-post Ska du uppgradera till Windows 11 direkt?

    Windows 11 kommer snart, men ska du uppdatera så snart som möjligt eller vänta några veckor? Låt oss ta reda på.

    Läs Nästa     Relaterade ämnen
    • Programmering
    • HTML
    • Webbutveckling
    Om författaren Joel Lee(1524 artiklar publicerade)

    Joel Lee är chefredaktör för MakeUseOf sedan 2018. Han har en B.S. i datavetenskap och över nio års professionell skriv- och redigeringserfarenhet.

    Mer från Joel Lee

    Prenumerera på vårt nyhetsbrev

    Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

    Klicka här för att prenumerera