Annons

Om du driver en webbplats bör du redan veta hur du gör det använd rätt bildformat och optimera dina bilder för webben 10 gratis online-bildverktyg för att ändra storlek, konvertera och optimeraDu behöver redigeringsverktyg för batch när du har massor av bilder att bearbeta och väldigt lite tid. Vi presenterar de bästa batchresizers, optimizers eller omvandlare som finns tillgängliga online. Läs mer . Även om bildkomprimering är en välkänd praxis tenderar HTML-komprimering att förbises, vilket är synd eftersom fördelarna är värda.

I den här artikeln kommer vi att gå igenom de två huvudsakliga metoderna för att krympa HTML-filer, varför HTML-filer ska krympas och hur man kan göra det.

Komprimering vs. minification

När det gäller att optimera HTML-filer finns det två huvudmetoder för det: kompression och minification. De låter lika på ytan, men är faktiskt två distinkta tekniker, så gör dem inte förvirrade.

minification

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

Exempel på HTML-sida:

Detta är en rubrik
Skicka mig mail kl [email protected].
Detta är ett nytt stycke!
Detta är ett nytt stycke med fet stil och kursiv.

Exempel på HTML-sida, minifierad:

Detta är en rubrik
Skicka mig mail kl [email protected].
Detta är ett nytt stycke!
Detta är ett nytt stycke med fet stil och kursiv.

Originalstorlek: 354. Förminskad 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.

Redan på 2000-talet var minifieringsverktyg sällsynta. Du var tvungen att manuellt minifiera filer varje gång något ändras. Eftersom HTML-filer ändras oftare än JS- och CSS-filer var det helt enkelt för tråkigt att minifiera varje gång då. Nuförtiden är det en viktig punkt.

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å den sidan tillbaka till besökarens webbläsare.

Men eftersom HTTP-protokollet stöder komprimering kan din webbserver komprimera sidan innan du skickar den till besökaren (antar komprimering är aktiverad i serverns inställningar) och sedan kan besökarens webbläsare dekomprimera sidan tillbaka till sitt ursprungliga tillstånd.

Det vanligaste komprimeringsschemat är GZIP, som är ett filformat som använder a förlustfri komprimeringsalgoritm Hur fungerar filkomprimering?Hur fungerar filkomprimering? Lär dig grunderna i filkomprimering och skillnaden mellan förlorad kontra förlustfri komprimering. Läs mer kallas DEFLATE.

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

Tänk på en textsträng som den här (exempel taget från GZIP-webbplatsen):

Blah bla bla bla bla.

Algoritmen känner igen följande upprepning:

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

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

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

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

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

Men i detta fall inser 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 smart nog för att inse att de nästa tre tecknen är de första tre 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 repetition som finns inom. Nästan varje tagg, t.ex., har en motsvarande stängningstagg. Dessutom upprepas många taggar hela tiden, t.ex., , ,, etc. Attribut upprepas också ofta, inklusive klass, 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 köra komprimeringen varje gång en sida begärs. Men eftersom CPU inte är mycket oroande för närvarande är det nästan alltid bättre att aktivera GZIP än att gå utan, även om du har webbhotell på startnivå De bästa webbhotelltjänsterna: Delad, VPS och dedikeradLetar du efter den bästa webbhotelltjänsten för dina behov? Här är våra bästa rekommendationer för din blogg eller webbplats. Läs mer .

Varför du ska komprimera och förminska

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

Snabbare sidbelastningar

I genomsnitt kan en HTML-minifierare minska storleken på en fil med cirka 3 procent med grundinställningar. Med avancerade inställningar som tillval kan en HTML-fil minskas med ytterligare 3 till 7 procent, för en potentiell reduktion på upp till 10 procent. Detta översätter direkt till snabbare sidbelastningstider.

Mindre bandbredd används

Låt oss säga att du har 10 filer, var och en förminskad 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 är i genomsnitt tio sidor. Enbart HTML-minifieringen minskar din bandbreddanvändning med 50 MB per dag (1,5 GB per månad).

Komprimering + Minifiering

Som du ser är HTML-minifiering användbar på egen hand, särskilt när din webbplats blir större, filer blir större och trafiken ökar. Anteckna det Googles riktlinjer för PageSpeed rekommenderar att minifiera HTML, så om du är skeptisk, låt det övertyga dig annars.

Men det som är bra med HTML-optimering är att du inte behöver välja antingen minifiering eller komprimering. Du kan göra båda! I själva verket du skall gör båda.

I genomsnitt kan du förvänta dig att GZIP-komprimering kommer att krympa en HTML-fil med 70 till 90 procent. Med hjälp av exemplet ovan med en konservativ komprimeringsuppskattning skulle de förminskade HTML-filerna gå från 45 kB till 13,5 kB vardera, för en total krympning på 365 kB. Jämfört med obehörig / okomprimerad reduceras nu din bandbredd med 365 MB per dag (11 GB per månad).

Och på toppen av bandbreddbesparingarna laddas varje sida dramatiskt snabbare eftersom slutanvändarens webbläsare bara behöver ladda ner 13,5 KB mot 50 KB per sida.

Hur komprimera och förminska HTML

Lyckligtvis är varken väldigt svåra i dag, och du behöver inte mycket tekniskt kunnande för att konfigurera dem.

WordPress Plugins

Om du driver en WordPress-webbplats är allt du behöver göra att installera en plugin och du kan skörda fördelarna med både komprimering och minifiering.

De flesta cache-plugins gör mer än bara cachesidor. 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 sidbelastningar och minskar bandbreddanvändningen.

Om du endast vill ha minifiering, rekommenderar vi Förminska HTML plugin. Det är enkelt, stöder HTML / CSS / JS och låter dig finjustera minifieringsmetoden lite (t.ex. om du vill ta bort http: och https: från webbadresser).

Statiska HTML Minifiers

Om dina HTML-filer är statiska (dvs. inte genereras dynamiskt av ett CMS- eller webbramverk), kan du behålla två uppsättningar HTML-filer: en "käll" -uppsättning, som är obehindrad för enkel redigering, och en "minifierad" uppsättning, som du skapar när du gör en ändring av en källfil.

För att minifiera använder du ett av dessa verktyg:

• HTMLCompressor
• HTML Minifier
• HTML Minifier (skiljer sig från den ovan)

Detta är en livskraftig teknik om du har flyttat bort från CMS som WordPress och nu använder statiska webbplatsgeneratorer 7 anledningar till att dike ditt CMS och överväga en statisk webbplatsgeneratorUnder många år var det svårt för många användare att publicera en webbplats. CMS som WordPress ändrade det, men de kan fortfarande vara förvirrande. Ett annat alternativ är en statisk webbplatsgenerator. Läs mer .

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 täcker vi 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 Ja mod_gzip_dechunk Ja mod_gzip_item_include-fil. (html? | txt | css | js | php | pl) $ mod_gzip_item_include hanterare ^ 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 inte sä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 hur du kontrollerar, rengör och optimerar din CSS 11 Användbara verktyg för att kontrollera, rensa och optimera CSS-filerVill du förbättra din CSS-kod? Dessa CSS-kontrollörer och optimeringar hjälper till att förbättra CSS-kod, syntax och minifiera dina webbsidor. Läs mer .