Hvordan komprimeret HTML fungerer, og hvorfor du kan få brug for det

Hvordan komprimeret HTML fungerer, og hvorfor du kan få brug for det

Hvis du driver et websted, burde du allerede vide, hvordan du gør det bruge de rigtige billedformater og optimere dine billeder til internettet. Selvom billedkomprimering er en velkendt praksis, har HTML-komprimering en tendens til at blive overset, hvilket er ærgerligt, fordi fordelene er værd.





I denne artikel vil vi gå over de to hovedmetoder til krympning af HTML -filer, hvorfor HTML -filer skal krymper og hvordan man gør.



Komprimering mod forringelse

Hvad angår optimering af HTML -filer, er der to hovedmetoder til det: kompression og minificering . De lyder ens på overfladen, men er faktisk to forskellige teknikker, så lad dem ikke blive forvirret.





Minifikation

Du kan tænke på minificering som fjernelse af unødvendige tegn og linjer i kildekoden. Tænk på indrykning, kommentarer, tomme linjer osv. Ingen af ​​disse kræves i HTML - de findes for at gøre filen lettere at læse. Beskæring af disse detaljer kan barbere filstørrelsen ned uden at påvirke noget.

Eksempel på HTML -side:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

Originalstørrelse: 354. Formindsket størrelse: 272. Besparelse: 82 (23,16%).

Mange webudviklere og webstedsejere forbeholder sig kun begrænsninger til JS- og CSS -filer, men denne forældede praksis er en fejl. HTML -formindskelse er også vigtig.



Tilbage i 2000'erne var minificeringsværktøjer sjældne. Du var nødt til at formindske filer manuelt hver gang noget ændrede sig. Da HTML -filer ændres oftere end JS- og CSS -filer, var det simpelthen for kedeligt at formindske hver gang dengang. I dag er det et punktum.

Kompression

Når brugere besøger dit websted, gør de det ved hjælp af HTTP -protokollen. Browseren sender en anmodning til din webserver om en bestemt side, din webserver finder siden og sender derefter sidens indhold tilbage til den besøgendes browser.



Men fordi HTTP -protokollen understøtter komprimering, kan din webserver komprimere siden, før den sendes til den besøgende (forudsat at komprimering er aktiveret i din servers indstillinger), og derefter kan den besøgendes browser dekomprimere siden tilbage til dens oprindelige tilstand.

Det mest almindelige komprimeringsskema er GZIP , som er et filformat, der bruger en komprimeringsalgoritme uden tab kaldes DEFLATE.

Algoritmen leder efter gentagne forekomster af tekst i HTML -filen og erstatter derefter de gentagne forekomster med referencer til en tidligere forekomst. Hver reference er simpelthen to tal: hvor langt tilbage er referencen, og hvor mange tegn refererer vi til.

Overvej en tekststreng som denne (eksempel taget fra GZIP -webstedet):

Blah blah blah blah blah.

Algoritmen genkender følgende gentagelse:

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

Den første forekomst er vores reference, så lad det være:

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

Den anden forekomst refererer tilbage til den første forekomst, som er fem tegn bagved og fem tegn lang:

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

Men i dette tilfælde genkender algoritmen, at den næste forekomst er den samme sekvens af tegn, så den forlænger referencelængden med yderligere fem:

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

Og igen:

Blah b[5,15]lah.

Og algoritmen er smart nok til at indse, at de næste tre tegn er de tre første tegn i referencen, så den strækker sig med tre:

Blah b[5,18].

Tænk nu over en typisk HTML -fil, og hvor meget gentagelse der findes inden for. Næsten hvert mærke, som f.eks

, har et tilsvarende lukkemærke, som

. Desuden gentages mange tags hele vejen igennem, som f.eks

,

,

,

  • osv. Attributter gentages også ofte, herunder

    class

    ,

    href

    , og

    src

    . Det er let at se, hvorfor GZIP -komprimering er så effektiv med HTML.

    Den eneste ulempe er, at webserveren har brug for lidt mere CPU for at udføre komprimeringen, hver gang der anmodes om en side. Men da CPU ikke er meget bekymret i dag, er det næsten altid bedre at aktivere GZIP end at undvære, selvom du har entry-level webhosting.

    Hvorfor skal du komprimere og formindske

    Der er to hovedfordele, som begge er afgørende i nutidens mobiltunge weblandskab.

    Hurtigere indlæsning af sider

    I gennemsnit kan en HTML minifier reducere størrelsen på en fil med omkring 3 procent med grundlæggende indstillinger. Med valgfri avancerede indstillinger kan en HTML -fil reduceres med yderligere 3 til 7 procent for en potentiel reduktion på op til 10 procent. Dette oversættes direkte til hurtigere indlæsningstider for sider.

    Mindre båndbredde brugt

    Lad os sige, at du har 10 filer, hver minimeret fra 50 KB til 45 KB for en samlet krympning på 50 KB. Og lad os sige, at dit websted i gennemsnit betjener 1.000 besøgende hver dag, hvor hvert besøg i gennemsnit er ti sider. HTML -formindskelsen alene reducerer dit båndbreddeforbrug med 50 MB pr. Dag (1,5 GB pr. Måned).

    Kompression + Minifikation

    Som du kan se, er HTML -minifikation nyttig i sig selv, især da dit websted vokser sig større, filer bliver større, og trafikken stiger. Noter det Googles retningslinjer for PageSpeed anbefaler at formindske HTML, så hvis du er skeptisk, lad det overbevise dig om andet.

    hvor meget data bruger streaming

    Men det gode ved HTML -optimering er, at du ikke behøver at vælge hverken minificering eller komprimering. Du kan gøre begge dele! Faktisk dig bør gør begge dele.

    I gennemsnit kan du forvente, at GZIP -komprimering reducerer en HTML -fil med 70 til 90 procent. Ved at bruge eksemplet ovenfor med et konservativt kompressionsestimat ville de minimerede HTML -filer gå fra 45 KB til 13,5 KB hver for en samlet krympning på 365 KB. Sammenlignet med ikke -minimeret/ukomprimeret reduceres dit websteds båndbredde nu med 365 MB pr. Dag (11 GB pr. Måned).

    Og oven på besparelserne på båndbredden indlæses hver side dramatisk hurtigere, fordi slutbrugerens browser kun behøver at downloade 13,5 KB mod 50 KB pr. Side.

    Sådan komprimeres og formindskes HTML

    Heldigvis er ingen af ​​dem meget vanskelige i disse dage, og du behøver ikke meget teknisk knowhow for at konfigurere dem.

    WordPress plugins

    Hvis du kører et WordPress -websted, er alt du skal gøre at installere et plugin, og du kan høste fordelene ved både komprimering og minificering.

    De fleste cache -plugins gør mere end blot cache sider. For eksempel, WP hurtigste cache og W3 Total cache begge har et-klik-indstillinger, der giver dig mulighed for at slå HTML-minifikation og GZIP-komprimering til, blandt andre funktioner, der yderligere fremskynder indlæsning af sider og reducerer brug af båndbredde.

    hvis du kun ønsker minificering, anbefaler vi Formindsk HTML plugin. Det er enkelt, understøtter HTML/CSS/JS og giver dig mulighed for at finjustere minificeringsmetoden lidt (f.eks. Om du vil fjerne

    http:

    og

    https:

    fra webadresser).

    Statiske HTML -minifigører

    Hvis dine HTML -filer er statiske (dvs. ikke dynamisk genereret af et CMS eller webramme), kan du vedligeholde to sæt HTML -filer: et 'kilde' sæt, som ikke er minimeret til nem redigering og et 'minimeret' sæt, som du opretter, når du foretager en ændring af en kildefil.

    Brug et af disse værktøjer til at formindske:

    Dette er en levedygtig teknik, hvis du er flyttet væk fra CMS'er som WordPress og nu bruger statiske webstedsgeneratorer.

    Aktiver GZIP -komprimering

    Trinnene for at aktivere GZIP -komprimering kan variere afhængigt af hvilken webserversoftware du bruger. Da Apache er den mest populære mulighed, dækker vi, hvordan du aktiverer det ved hjælp af .htaccess.

    Opret forbindelse til din webserver ved hjælp af FTP, og opret derefter en fil kaldet

    .htaccess

    i rodmappen. Rediger .htaccess -filen for at have følgende indstillinger:


    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

    Ikke sikker på, om komprimering virker på dit websted? Test det med dette værktøj .

    For den ultimative effektivitet bør du også lære om, hvordan du tjekker, renser og optimerer din CSS .

    Del Del Tweet E -mail Skal du opgradere til Windows 11 med det samme?

    Windows 11 kommer snart, men skal du opdatere så hurtigt som muligt eller vente et par uger? Lad os finde ud af det.

    Læs Næste     Relaterede emner
    • Programmering
    • HTML
    • Web-udvikling
    Om forfatteren Joel lee(1524 artikler udgivet)

    Joel Lee er chefredaktør for MakeUseOf siden 2018. Han har en B.S. i datalogi og over ni års professionel skrive- og redigeringserfaring.

    Mere fra Joel Lee

    Abonner på vores nyhedsbrev

    Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

    Klik her for at abonnere