programmering

Hvordan komprimert HTML Works, og hvorfor du trenger det

Hvordan komprimert HTML Works, og hvorfor du trenger det / programmering

Hvis du kjører et nettsted, bør du allerede vite hvordan du bruker de riktige bildformatene og optimaliser bildene dine for nettet. 10 Gratis Online Batch Image Tools for å endre størrelse, konvertering og optimalisering av 10 gratis Online Batch Image-verktøy for å endre størrelse, konvertering og optimalisering. Du trenger batchredigeringsverktøy når du har mange bilder å behandle og svært lite tid. Vi introduserer deg til de beste batchresistansene, optimatorene eller konverterne som er tilgjengelige online. Les mer . Likevel, mens bildekomprimering er en kjent 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 du skal gjøre det.

Komprimering vs Minifisering

Når det gjelder optimalisering av HTML-filer, er det to hovedmetoder for det: kompresjon og forminskning. De høres ut på overflaten, men er egentlig to forskjellige teknikker, så ikke få dem forvirret.

forminskning

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

Eksempel på HTML-side:

  Ditt tittel her   
 
Dette er en header
 
Send meg mail på [email protected].
 
Dette er et nytt avsnitt!
 
Dette er et nytt avsnitt i fet og kursiv skrift.

Eksempel på HTML-side, minifisert:

Ditt tittel her
Dette er en header
Send meg mail på [email protected].
Dette er et nytt avsnitt!
Dette er et nytt avsnitt i fet og kursiv skrift.

Originalstørrelse: 354. Minifisert størrelse: 272. Besparelser: 82 (23.16%).

Mange webutviklere og nettstedseiere forbeholder bare minifunksjon for JS og CSS-filer, men denne utdaterte øvelsen er en feil. HTML-reduksjon er viktig også.

Tilbake på 2000-tallet var verktøy for reduksjon sjeldne. Du måtte manuelt redusere filer hver gang noe endret seg. Siden HTML-filer endres oftere enn JS- og CSS-filer, var det bare for kjedelig å redusere hver gang da. I dag er det et poengpunkt.

kompresjon

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

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

Den vanligste kompresjonsordningen er GZIP, som er et filformat som bruker en lossless komprimeringsalgoritme Hvordan fungerer filkomprimering? Hvordan fungerer filkomprimering? Filkomprimering er kjernen i hvordan den moderne web fungerer, man kan argumentere for, fordi det tillater oss å dele filer som ellers ville ta for lang tid å overføre. Men hvordan fungerer det? Les Mer kalt DEFLATE.

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

Tenk på en streng tekst som dette (eksempel tatt fra GZIP nettsted):

Blah blah blah blah blah.

Algoritmen gjenkjenner følgende gjentakelse:

B lah b lah b lah b lah b lah.

Den første forekomsten er vår referanse, så la den 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, slik at den øker 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 neste tre tegnene er de tre første tegnene i referansen, slik at den strekker seg med tre:

Blah b [5,18].

Nå tenk på en typisk HTML-fil og hvor mye repetisjon finnes innenfor. Nesten alle tagger, for eksempel , har en tilsvarende lukkekode, som . Videre gjentas mange koder i hele, for eksempel

,

, ,
  • , etc. Attributter gjentas også ofte, inkludert klasse, 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 inngangsnivå web hosting De beste webvertjenestene De beste webvertjenestene Ser etter den beste web hosting-tjenesten for dine behov? Enten det er for en liten blogg eller en stor bedriftens nettside, her er våre beste anbefalinger. Les mer .

    Hvorfor du bør komprimere og redusere

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

    Faster sidebelastninger

    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 sidelastningstider.

    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 serverer gjennomsnittlig 1000 besøkende hver dag, hvor hvert besøk er gjennomsnittlig ti sider. HTML-kalkuleringen 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-reduksjon nyttig på egenhånd, spesielt ettersom nettstedet ditt blir større, filer blir større og trafikken øker. Vær oppmerksom på at Googles SideSpeed-retningslinjer anbefaler å bekrefte HTML, så hvis du er skeptisk, la det overbevise deg ellers.

    Men hva som er bra med HTML optimalisering er at du ikke trenger å velge enten minifisering eller komprimering. Du kan gjøre begge deler! Faktisk, deg bør gjør begge deler.

    I gjennomsnitt kan du forvente at GZIP-komprimering skal krympe en HTML-fil med 70 til 90 prosent. Ved hjelp av eksemplet ovenfor med et konservativt kompresjonsestimat, ville de minifiserte HTML-filene gå fra 45 kB til 13,5 kB hver for en totalt krympning på 365 kB. Sammenlignet med uforminsket / ukomprimert, blir båndbredden din nå redusert med 365 MB per dag (11 GB per måned).

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

    Hvordan komprimere og redusere HTML

    Heldigvis er det heller ikke veldig vanskelig i disse dager, og du trenger ikke mye teknisk kunnskap for å sette opp dem.

    WordPress Plugins

    Hvis du kjører et WordPress-nettsted, er alt du trenger å gjøre installert en plugin, og du kan høste fordelene med både komprimering og minifisering.

    De fleste caching-plugins gjør mer enn bare cachesider. For eksempel har WP Fastest Cache og W3 Total Cache begge ett-klikk-innstillinger som lar deg slå på HTML-reduksjon og GZIP-komprimering, blant annet funksjoner som øker hastigheten på siden laster og reduserer båndbreddebruk.

    Hvis du bare Ønsker om reduksjon, anbefaler vi Minify HTML-plugin. Det er enkelt, støtter HTML / CSS / JS, og lar deg justere minifiseringsmetoden litt (for eksempel om du vil fjerne http: og https: fra nettadresser).

    Statisk HTML Minifiers

    Hvis HTML-filene dine er statiske, (det vil si ikke dynamisk generert av et CMS eller webramme), kan du opprettholde to sett med HTML-filer: a “kilde” sett, som er unminified for enkel redigering, og a “minified” sett, som du lager når du endrer en kildefil.

    For å redusere, bruk ett av disse verktøyene:

    • HTMLCompressor
    • HTML Minifier
    • HTML Minifier (forskjellig fra den ovenfor)

    Dette er en levedyktig teknikk hvis du har flyttet vekk fra CMSes som WordPress og nå bruker statiske nettstedgeneratorer. 7 Grunner til å ditch ditt CMS og vurdere en statisk nettstedgenerator. 7 grunner til å ditch ditt CMS og vurdere en statisk nettstedgenerator I mange år har publisering Et nettsted var vanskelig for mange brukere. CMS som WordPress endret det, men de kan fortsatt være forvirrende. Et annet alternativ er en statisk nettstedgenerator. Les mer .

    Aktiver GZIP-komprimering

    Fremgangsmåten 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 den ved hjelp av .htaccess.

    Koble til webserveren din ved hjelp av FTP, og opprett en fil som heter .htaccess i rotkatalogen. Rediger .htaccess-filen for å ha følgende innstillinger:

     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 ^ bilde /.* mod_gzip_item_exclude rspheader ^ Content-Encoding:. * gzip. *   SetOutputFilter DEFLATE

    Ikke sikker på om komprimering jobber på nettstedet ditt? Test det med dette verktøyet.

    Var denne artikkelen til hjelp? Nå som du komprimerer og minifiserer, bør nettsidene dine lastes raskere og bruke mindre båndbredde. Hvis du har spørsmål, kan du spørre dem nedenfor!

    Utforsk mer om: HTML, Webutvikling.