Annonse

Hvis du driver et nettsted, bør du allerede vite hvordan du gjør det bruk riktige bildeformater og optimaliser bildene dine for nettet 10 gratis online batch-verktøy for å endre størrelse, konvertere og optimalisereDu trenger redigeringsverktøy for batch når du har mange bilder å behandle og veldig lite tid. Vi introduserer deg for de beste batchresizers, optimizers eller converters som er tilgjengelige online. Les mer . Selv om bildekomprimering er en kjent praksis, har HTML-komprimering en tendens til å bli oversett, noe som er synd fordi fordelene er verdt.

I denne artikkelen skal vi gå gjennom de to viktigste metodene for å krympe HTML-filer, hvorfor HTML-filer skal krympes og hvordan du kan gjøre det.

Komprimering vs. forminskning

Så langt det er å optimalisere HTML-filer, er det to hovedmetoder for det: kompresjon og forminskning. De høres like ut på overflaten, men er faktisk to distinkte teknikker, så ikke bli forvirret.

forminskning

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 er nødvendige i HTML - de eksisterer for å gjøre filen enklere å lese. Å trimme disse detaljene kan barbere filstørrelsen uten å påvirke noe.

Eksempel på HTML-side:

Dette er en topptekst
Send meg mail kl [email protected].
Dette er et nytt avsnitt!
Dette er et nytt avsnitt med fet skrift og kursiv.

Eksempel på HTML-side, minifisert:

Dette er en topptekst
Send meg mail kl [email protected].
Dette er et nytt avsnitt!
Dette er et nytt avsnitt med fet skrift og kursiv.

Original størrelse: 354. Minifisert størrelse: 272. Besparelser: 82 (23,16%).

Mange webutviklere og eiere av nettstedet reserverer kun minifisering for JS- og CSS-filer, men denne utdaterte praksisen er en feil. HTML-minifisering er også viktig.

Tilbake på 2000-tallet var minifiseringsverktøy sjeldne. Du måtte manifisere 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 viktig poeng.

kompresjon

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

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

Det vanligste kompresjonsskjemaet er GZIP, som er et filformat som bruker a tapsfri komprimeringsalgoritme Hvordan fungerer komprimering?Hvordan fungerer komprimering av filer? Lær det grunnleggende om filkomprimering og forskjellen mellom tapet kontra tapsfri komprimering. Les mer kalt DEFLATE.

Algoritmen ser etter gjentatte forekomster av tekst i HTML-filen, og erstatter deretter gjentagelsesforekomstene 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 streng tekst som dette (eksempel hentet fra GZIP-nettsted):

Bla bla bla bla.

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 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 med 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 repetisjon som finnes innen. Nesten alle tagger, som, har en tilsvarende lukkemerke, som. Videre blir mange tagger gjentatt gjennom, 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 noe bekymringsfullt i dag, er det nesten alltid bedre å aktivere GZIP enn å gå uten, selv om du har webhotell på inngangsnivå De beste webhotellene: Delt, VPS og dedikertSer du etter den beste webhotellstjenesten for dine behov? Her er de beste anbefalingene for bloggen eller nettstedet ditt. Les mer .

Hvorfor du skal komprimere og forminske

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

Raskere sidebelastning

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 oversettes direkte til raskere sideinnlastningstid.

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 i gjennomsnitt serverer 1 000 besøkende hver dag, der hvert besøk er gjennomsnittlig ti sider. HTML-minifiseringen 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-minifisering nyttig på egen hånd, spesielt ettersom nettstedet ditt blir større, filene 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 ellers.

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 deg bør gjør begge deler.

I gjennomsnitt kan du forvente at GZIP-komprimering vil krympe 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 uautorisert / ukomprimert, reduseres nå båndbredden på nettstedet med 365 MB per dag (11 GB per måned).

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

Slik komprimerer og Minifiserer HTML

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

WordPress-plugins

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

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

Hvis du kun ønsker minification, anbefaler vi Komprimer HTML plugg inn. Det er enkelt, støtter HTML / CSS / JS, og lar deg finjustere minifiseringsmetoden litt (f.eks. Om du vil fjerne http: og https: fra nettadresser).

Statiske HTML Minifiers

Hvis HTML-filene dine er statiske (dvs. ikke dynamisk generert av et CMS- eller nettrammeverk), kan du vedlikeholde to sett med HTML-filer: et "kildesett", som er umyndiggjort for enkel redigering, og et "minifisert" sett, som du oppretter når du endrer en kildefil.

For å minifisere bruker du ett av disse verktøyene:

• HTMLCompressor
• HTML Minifier
• HTML Minifier (annerledes enn den ovenfor)

Dette er en levedyktig teknikk hvis du har flyttet bort fra CMS-er som WordPress og nå bruker statiske generatorer 7 grunner til å grøfte CMS og vurdere en statisk nettstedgeneratorI mange år var det vanskelig å publisere et nettsted for mange brukere. CMS-er som WordPress endret det, men de kan fortsatt være forvirrende. Et annet alternativ er en statisk stedsgenerator. Les mer .

Aktiver GZIP-komprimering

Trinnene for å aktivere GZIP-komprimering kan variere avhengig av hvilken webserverprogramvare du bruker. Siden Apache er det mest populære alternativet, beskriver vi hvordan du aktiverer det ved å bruke .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 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 ^ 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å gjøre det lære om hvordan du sjekker, rengjør og optimaliserer CSS 11 Nyttige verktøy for å sjekke, rense og optimalisere CSS-filerVil du forbedre CSS-koden din? Disse CSS-sjekkene og optimaliseringsprogrammerne vil bidra til å forbedre CSS-koden, syntaks og minimere websidene dine. Les mer .