Hvordan komprimert HTML fungerer og hvorfor du trenger det

Hvordan komprimert HTML fungerer og hvorfor du trenger det

Hvis du driver et nettsted, bør du allerede vite hvordan du gjør det bruk riktige bildeformater og optimalisere bildene dine for nettet. Selv om bildekomprimering er en velkjent praksis, har HTML-komprimering en tendens til å bli oversett, noe som er synd fordi fordelene er verdt.





I denne artikkelen vil vi gå over de to hovedmetodene for å krympe HTML -filer, hvorfor HTML -filer skal krympes og hvordan vi skal gå frem.



Komprimering kontra Minifisering

Når det gjelder optimalisering av HTML -filer, er det to hovedmetoder for det: komprimering og minifisering . De høres like ut på overflaten, men er faktisk to forskjellige teknikker, så ikke bli forvirret.





Minifisering

Du kan tenke på minifisering som fjerning av unødvendige tegn og linjer i kildekoden. Tenk på innrykk, kommentarer, tomme linjer osv. Ingen av disse kreves i HTML - de finnes for å gjøre filen lettere å lese. Beskjæring av disse detaljene kan barbere ned filstørrelsen uten å påvirke noe.

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. Minifisert størrelse: 272. Besparelse: 82 (23,16%).

Mange webutviklere og nettstedseiere forbeholder seg minifisering bare for JS- og CSS -filer, men denne utdaterte praksisen er en feil. HTML -minifisering er også viktig.



På 2000 -tallet var minifiseringsverktøy sjeldne. Du måtte minifisere filer manuelt hver gang noe endret seg. Siden HTML -filer endres oftere enn JS- og CSS -filer, var det rett og slett for kjedelig å minifisere hver gang den gang. I dag er det et poeng.

Komprimering

Når brukere besøker nettstedet ditt, gjør de det ved å bruke HTTP -protokollen. Nettleseren sender en forespørsel til webserveren din for en bestemt side, webserveren finner siden, og sender deretter innholdet på siden tilbake til den besøkendes nettleser.



Men fordi HTTP -protokollen støtter komprimering, kan webserveren komprimere siden før den sendes til besøkende (forutsatt at komprimering er aktivert i serverens innstillinger), og deretter kan besøkendes nettleser dekomprimere siden tilbake til sin opprinnelige tilstand.

Det vanligste komprimeringsopplegget er GZIP , som er et filformat som bruker en tapsfri komprimeringsalgoritme kalt DEFLATE.

Algoritmen ser etter gjentatte forekomster av tekst i HTML -filen, og erstatter deretter gjentagelsene med referanser til en tidligere forekomst. Hver referanse er ganske enkelt to tall: hvor langt tilbake er referansen og hvor mange tegn vi refererer til.

Vurder en tekststreng som denne (eksempel hentet fra GZIP -nettstedet):

Blah blah blah blah blah.

Algoritmen gjenkjenner følgende repetisjon:

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

Den første forekomsten er vår referanse, så la det være:

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

Den andre forekomsten refererer tilbake til den første forekomsten, som er fem tegn bak og fem tegn lang:

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

Men i dette tilfellet gjenkjenner algoritmen at neste forekomst er den samme sekvensen av tegn, så den utvider referanselengden med ytterligere fem:

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

Og igjen:

Blah b[5,15]lah.

Og algoritmen er smart nok til å innse at de tre neste tegnene er de tre første tegnene i referansen, så den strekker seg med tre:

Blah b[5,18].

Tenk nå på en typisk HTML -fil og hvor mye gjentakelse som finnes. Nesten hver tag, for eksempel

, har en tilsvarende avsluttende tag, som

. Videre gjentas mange koder gjennomgående, for eksempel

,

,

,

  • , etc. Attributter gjentas også ofte, inkludert

    class

    ,

    href

    , og

    src

    . Det er lett å se hvorfor GZIP -komprimering er så effektiv med HTML.

    Den eneste ulempen er at webserveren trenger litt mer CPU for å utføre komprimeringen hver gang en side blir bedt om. Men siden CPU ikke er mye bekymring i dag, er det nesten alltid bedre å aktivere GZIP enn å gå uten, selv om du har webhotell på inngangsnivå.

    Hvorfor du bør komprimere og minimere

    Det er to hovedfordeler, som begge er avgjørende i dagens mobiltunge weblandskap.

    Raskere sidelast

    I gjennomsnitt kan en HTML -minifier redusere størrelsen på en fil med rundt 3 prosent med grunnleggende innstillinger. Med valgfrie avanserte innstillinger kan en HTML -fil reduseres med ytterligere 3 til 7 prosent, for en potensiell reduksjon på opptil 10 prosent. Dette oversetter direkte til raskere sideinnlastingstider.

    Mindre båndbredde brukt

    La oss si at du har 10 filer, hver minifisert fra 50 KB til 45 KB for en total krymping på 50 KB. Og la oss si at nettstedet ditt betjener gjennomsnittlig 1000 besøkende hver dag, hvor hvert besøk i gjennomsnitt er ti sider. HTML -minifikasjonen alene reduserer bruken av båndbredde med 50 MB per dag (1,5 GB per måned).

    Komprimering + Minifisering

    Som du kan se, er HTML -minifikasjon nyttig alene, spesielt ettersom nettstedet ditt blir større, filer blir større og trafikken øker. Noter det Googles retningslinjer for PageSpeed anbefaler å minifisere HTML, så hvis du er skeptisk, la det overbevise deg om noe annet.

    forvandle et bilde til et annet online

    Men det som er flott med HTML -optimalisering er at du ikke trenger å velge verken minifisering eller komprimering. Du kan gjøre begge deler! Faktisk, du bør gjør begge deler.

    I gjennomsnitt kan du forvente at GZIP -komprimering krymper en HTML -fil med 70 til 90 prosent. Ved å bruke eksemplet ovenfor med et konservativt komprimeringsestimat, ville de minifiserte HTML -filene gå fra 45 KB til 13,5 KB hver, for en total krymping på 365 KB. Sammenlignet med ikke -minimert/ukomprimert, reduseres nå båndbredden på nettstedet med 365 MB per dag (11 GB per måned).

    Og på toppen av båndbreddebesparelsene, lastes hver side dramatisk raskere fordi sluttbrukerens nettleser bare trenger å laste ned 13,5 KB mot 50 KB per side.

    Hvordan komprimere og minimere HTML

    Heldigvis er ingen av dem veldig vanskelige i disse dager, og du trenger ikke mye teknisk kunnskap for å sette dem opp.

    WordPress -plugins

    Hvis du driver et WordPress -nettsted, er alt du trenger å gjøre å installere ett plugin, og du kan dra fordelene av både komprimering og minifisering.

    De fleste hurtigbuffer -plugins gjør mer enn bare å cache sider. For eksempel, WP raskeste cache og W3 Total buffer begge har ett-klikk-innstillinger som lar deg slå på HTML-minifisering og GZIP-komprimering, blant andre funksjoner som ytterligere fremskynder sidelastning og reduserer båndbreddebruk.

    Hvis du kun ønsker minifisering, anbefaler vi Minimer HTML plugg inn. Det er enkelt, støtter HTML/CSS/JS, og lar deg finjustere minifiseringsmetoden litt (f.eks. Om du skal fjerne

    http:

    og

    https:

    fra nettadresser).

    Statisk HTML Minifiers

    Hvis HTML -filene dine er statiske (dvs. ikke dynamisk generert av et CMS eller webrammeverk), kan du beholde to sett med HTML -filer: et 'kilde' -sett, som ikke er minimert for enkel redigering, og et 'minifisert' sett, som du oppretter når du endrer en kildefil.

    Bruk et av disse verktøyene for å minifisere:

    Dette er en levedyktig teknikk hvis du har flyttet bort fra CMSer som WordPress og nå bruker statiske nettstedgeneratorer.

    Aktiver GZIP -komprimering

    Trinnene for å aktivere GZIP -komprimering kan variere avhengig av hvilken webserverprogramvare du bruker. Siden Apache er det mest populære alternativet, dekker vi hvordan du aktiverer det ved hjelp av .htaccess.

    Koble til webserveren din ved hjelp av FTP, og lag deretter en fil som heter

    .htaccess

    i rotkatalogen. Rediger .htaccess -filen for å ha følgende innstillinger:


    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

    Er du usikker på om komprimering fungerer på nettstedet ditt? Test det med dette verktøyet .

    For den ultimate effektiviteten bør du også lære om hvordan du sjekker, rengjør og optimaliserer CSS .

    Dele Dele kvitring E -post Bør du oppgradere til Windows 11 umiddelbart?

    Windows 11 kommer snart, men bør du oppdatere så snart som mulig eller vente noen uker? La oss finne det ut.

    Les neste     Relaterte temaer
    • Programmering
    • HTML
    • Webutvikling
    Om forfatteren Joel lee(1524 artikler publisert)

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

    Mer fra Joel Lee

    Abonner på vårt nyhetsbrev

    Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

    Klikk her for å abonnere