Det enklaste sättet att snabba upp din WordPress-webbplats är att eliminera alla dess oönskade resurser. Det näst enklaste sättet att snabba upp den är att komprimera alla sina önskade resurser. Att aktivera GZIP-komprimering på din webbserver är ett av de enklaste och mest effektiva sätten för att få högre hastighet.

Alla moderna webbläsare inkluderar stöd för GZIP-komprimering som standard. Men för att skicka de komprimerade resurserna till dina användare utan strul, måste du konfigurera servern korrekt.

I det här inlägget får du lära du dig grunderna i datakomprimering på webben och vad GZIP-komprimering är. Du får även lära dig dess olika fördelar och hur du kan använda det för att snabba upp dina WordPress-webbplatser med olika serverinställningar.

Nyfiken? Vi kör igång!

Föredrar du att titta på videoversionen?

Grunderna i datakomprimering på webben

Datakomprimering på webben är processen för att minska storleken på data som överförs av webbplatser. Beroende på datatyp – text, bilder, stilmallar, skript, teckensnitt – finns det olika sätt att komprimera data.

Huvudkomponenterna på en webbsida
Huvudkomponenterna på en webbsida

Minifiering av HTML, CSS och JavaScript är exempelvis ett enkelt sätt att minska mängden data som skickas av webbläsare. Här komprimerar minifieraren texten genom att ta bort onödiga tecken som kommentarer och blanksteg från källkoden.

I exemplet nedan av ett enkelt HTML-dokument finns det tre innehållstyper: HTML-markering,  CSS-format och JavaScript-kod.

Varje innehållstyp har unik syntax och semantik. Sammantaget har detta HTML-dokument totalt 357 tecken.

<html>
<head>
    <style>
    /* kinsta-banner is used on the homepage only */
    .kinsta-banner { font-size: 150% }
    .kinsta-banner { width: 75% }
</style>
</head>
<body>
    
    <div>...</div>
    
    <script>
    kinstaScripts(); // random scripts used on the page
    </script>
</body>
</html>

Ovanstående kod är enkel att läsa och följa, idealiskt för utveckling. Det är dock onödigt för webbläsaren att läsa kommentarer och ha perfekt indragna taggar. En smart kompressor kan analysera det här dokumentet och ta bort alla onödiga bitar från det.

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>

Efter minifieringen reduceras HTML-dokumentet till endast 141 tecken. Det är en 60.50% besparing i antal tecken. Det blir inte lika läsvänligt, men detta spelar ingen roll för webbläsaren. Samma sida visas fortfarande för användaren.

Om du vill dra nytta av båda versionerna kan du behålla originaldokumentet som en ”utvecklingsversion”, men minifiera all kod innan du omvandlar den till live.

De flesta WordPress-prestandaplugins tar hand om detta automatiskt åt dig.

Filstorleks-komprimering av okomprimerad vs minifierad jQuery
Filstorleks-komprimering av okomprimerad vs minifierad jQuery

Den okomprimerade versionen av jQuery 3.5.1-biblioteket är exempelvis mer än 3 gånger större än den minifierade versionen av samma fil.

På samma sätt kan samma komprimeringstekniker som beskrivs ovan optimera andra innehållstyper som bilder, videor, teckensnitt och mer. Innehållsspecifika reduceringar som dessa är det första steget för att optimera storleken på din webbplats textbaserade tillgångar.

Dessa uppenbara fördelar är anledningen till att Kinsta satte in en kodminifieringsfunktion i MyKinsta-instrumentpanelen. Våra kunder kan välja automatisk kodminifiering för sina CSS- och JavaScript-filer, vilket snabbar upp deras webbplatser utan manuell ansträngning.

Men datakomprimering handlar inte bara om minifiering. Med hjälp av avancerade matematiska tekniker kan datakomprimeringsalgoritmer minska storleken på data ännu mer.

Ett av de mest populära exemplen på en sådan datakomprimeringsmetod är GZIP. Det möjliggör effektiv dataöverföring och har bidragit avsevärt till att göra internet till ett livskraftigt globalt kommunikationsmedium.

Vad är GZIP-komprimering?

GZIP, förkortning för GNU Zip, är den mest populära förlustfria datakomprimeringsmetoden på webben. Det låter dig minska storleken på webbplatsens HTML-sidor, stilmallar och skript.

Förutom att vara en datakomprimeringsalgoritm är GZIP även ett filtillägg(.gz) och en programvara som används för filkomprimering / dekomprimering.

Den är baserad på DEFLATE-algoritmen, som är blandning av LZ77-kodning och Huffman-kodningsalgoritmer.

GZIP-komprimering baseras på DEFLATE-algoritmen
GZIP-komprimering baseras på DEFLATE-algoritmen

En GZIP-kompressor tar en uppsättning rådata och komprimerar den förlustfritt. Rådata kan komma från vilken filtyp som helst, men GZIP fungerar bäst med textbaserade tillgångar (t.ex.HTML, CSS, JS).

Nästa avsnitt beskriver med djupgående hur GZIP-komprimering fungerar.

Så här komprimerar GZIP data

En grov illustration av hur GZIP-komprimering fungerar
En grov illustration av hur GZIP-komprimering fungerar

Till att börja med kör GZIP-kompressorn LZ77-komprimeringsalgoritmen på rådata för att ta bort redundanser. Den här algoritmen fungerar genom att hitta upprepade mönster i ett fördefinierat skjutfönster (en liten del av rådata).

Den ersätter sedan alla upprepade strängar med tuplar för att komprimera rådata.

En illustration av LZ77-kodningsalgoritmen
En illustration av LZ77-kodningsalgoritmen

I exemplet ovan är skjutfönstrets storlek endast 13 tecken långt (13 byte). GZIP-komprimering kan dock använda en maximal skjutfönsterstorlek på 32 KB (32 768 byte). Storleken på skjutfönstret spelar en nyckelroll i LZ77-komprimeringsprestanda.

Efter att ha komprimerat rådata med LZ77-algoritmen använder GZIP-kompressorn Huffman-kodningsalgoritmen för att komprimera den ytterligare. Den gör detta genom att tilldela tecken som förekommer oftare det minsta antalet bitar, samtidigt som sällsynta tecken tilldelas det högsta antalet bitar.

Denna teknik liknar den som används i morsekod, där bokstäver som förekommer oftare på engelska får de kortaste sekvenserna.

För att förstå hur Huffman-kodningsalgoritmen fungerar, kan du fundera över ordet BOOKKEEPER. Den är 10 tecken långt, men har endast 6 unika tecken. Detta ord har en bra blandning av singel, dubbel och trippel bokstäver.

Nästan alla webbplatser använder UTF-8 teckenkodning för att representera bokstäver och symboler. Varje ASCII-tecken i UTF-8, som även inkluderar det engelska alfabetet, använder 1 byte (8 bitar).

Ordet
Ordet ”BOOKKEEPER” har många upprepande bokstäver

En sträng med 10 tecken som BOOKKEEPER kräver 10 byte (80 bitar) minne. Du kan se att den innehåller 1 förekomst av bokstäverna B, P, R, 2 förekomster av bokstäverna O och K och 3 förekomster av bokstaven  E.

Huffmans kodningsalgoritm använder denna kunskap för att förlustfritt komprimera strängen. Den gör detta genom att generera ett binärt träd med varje unik bokstav som blad.

Bokstäver som visas sällan (t.ex. B, P, R) kommer att hamna längst ner i trädet, medan de som visas ofta (t.ex.  E, O, K) kommer att hamna högst upp.

Den översta noden i trädet är roten, och dess värde är lika med det totala antalet tecken i strängen.

Huffman-träd för ordet
Huffman-träd för ordet ”BOOKKEEPER”

Efter att ha genererat Huffman-trädet ges alla vänster-förgrenande och högerförgrenande pilar 0 respektive 1 nummer. Du kan sedan generera Huffman-koden för vilket tecken som helst genom att spåra rot-till-blad-sökvägen och sammanfoga alla 0:or och 1:or.

Huffman-koder är unika binära koder för varje tecken
Huffman-koder är unika binära koder för varje tecken

Du kan se att bokstäver som förekommer ofta har Huffman-koder med de minsta bitstorlekarna.

Obs: Huffmans kodningsalgoritm kan generera alternativa binära koder genom att använda en annan struktureringsstrategi för tecken med samma frekvenser. Den totala storleken på den kodade strängen förblir dock densamma.

Ett ord på 80 bitar kodat som en sträng med 25 bitar
Ett ord på 80 bitar kodat som en sträng med 25 bitar

Det är en 68.75% minskning av det minne som krävs för att lagra det ursprungliga ordet.

Att använda Huffman-trädet med 0/1-konventionen genererar binära koder som uppfyller prefixegenskapen. Det säkerställer att Huffman-koden för ett visst tecken inte är ett prefix för något annat teckens kod, vilket gör det enkelt att avkoda den kodade strängen med Huffman-trädet. Detta spelar en primär roll i GZIP-dekompressionshastigheten.

Precis som med ordet ovan använder GZIP-kompressorn Huffman-kodningsalgoritmen för att ytterligare optimera tuples som genereras av LZ77-algoritmen. Detta resulterar i mycket komprimerade filer med .gz-förlängning.

Om du är intresserad av att lära dig mer om hur GZIP fungerar, kan du se den här videon för en snabb översikt.

Hur bra är GZIP-komprimering?

Vanligtvis uppnår GZIP ett komprimeringsförhållande på cirka 70% för små filer, men det kan nå upp till 90% för större textbaserade tillgångar.

GZIP-komprimeringsförhållanden för några populära CSS- och JS-bibliotek
GZIP-komprimeringsförhållanden för några populära CSS- och JS-bibliotek

I tabellen ovan kan du se att komprimering av minifierade filer med GZIP kan minska deras storlek ytterligare.

Obs: Du kan komprimera vilken filtyp som helst med GZIP, men för tillgångar som redan är komprimerade med andra metoder (t.ex. bilder, videor) kommer det inte att innebära några minskningar. Ibland kan det till och med öka filstorleken.

Styrkan hos en komprimeringsalgoritm beror inte bara på dess komprimeringsförhållande, utan även på hur snabbt och effektivt den kan komprimera och dekomprimera data. Det är där GZIP utmärker sig för de flesta användningsområden.

Eftersom GZIP dekomprimerar snabbt med hjälp av en strömningsalgoritm passar det perfekt för webbprotokoll där hastighet är av avgörande betydelse. GZIP använder dessutom minimala resurser för att både komprimera och dekomprimera data, vilket gör det idealiskt för både servrar och kunder.

Komprimeringsprestanda för brotli vs bzip2 vs GZIP vs xz (Källa: OpenCPU)
Komprimeringsprestanda för brotli vs bzip2 vs GZIP vs xz (Källa: OpenCPU)

Diagrammen ovan jämför komprimeringsprestandan för brotli, bzip2, gzip och xz komprimeringsalgoritmer. GZIP förlorar med liten marginal i komprimeringsförhållandetestet, men för komprimerings- och dekompressionshastigheter tar det hem vinsten.

När vi tittar på komprimeringshastighetsdiagrammet kan vi dra slutsatsen att GZIP är idealiskt för realtidskomprimering i HTTP-servrar och andra dataströmmar på webben. Med tanke på alla dess positiva resultat när det gäller att främja webben klassade IETF GZIP som ett av de tre standardformaten för komprimering i HTTP/1.1.

Obs: En abstraktion av GZIP:s komprimeringsbibliotek zlib används i många populära operativsystem (Linux, macOS, iOS) och moderna spelkonsoler (PlayStation 4, Wii U, Xbox One). Det används även i det förlustfria PNG-filformatet för att komprimera bilder.

6 Fördelar med GZIP-komprimering

Låt oss ta en närmare titt på de viktigaste fördelarna med GZIP-komprimering.

Ger ett anständigt komprimeringsförhållande

Som vi nämnt tidigare har GZIP inte det bästa komprimeringsförhållandet jämfört med sin konkurrens. Men det ligger inte så långt efter. Det kan vanligtvis hjälpa dig att minska storleken på textbaserade resurser med 70-90%.

Supersnabb komprimering och dekompression

För datakomprimerings- och dekompressionshastigheter är GZIP den tydliga vinnaren. Det passar fint för komprimering i farten i HTTP-servrar och andra dataströmmar.

Kräver väldigt lite minne

GZIP lämnar ett minimalt minnesavtryck, vilket gör det lämpligt för servrar och system med begränsad minneskapacitet. Därför stöds det även av de billigaste hosting-leverantörerna.

Expanderar inte mycket ens i värsta fall

Förlustfria datakomprimeringsalgoritmer som GZIP har en strikt gräns, utöver vilken de inte kan komprimera data.

Vanligtvis händer detta när resursen redan komprimeras väl, eller om den är liten och priset för att lägga till GZIP-ordlistan är högre än komprimeringsbesparingarna. Vi kan tillskriva detta fenomen till ett koncept som kallas entropikodning. GZIP är mycket resistent mot denna effekt.

Kostnadsfritt att använda och öppen källkod

GZIP skapades främst som en kostnadsfri ersättning med öppen källkod för det patenterade kompressprogrammet som används i tidiga Unix-system. Det är således inte belastat med något patent och kan användas fritt av vem som helst.

Har universell support

Enligt W3Techs används GZIP-komprimering av 82% av alla webbplatser som de spårar, vilket gör det till den mest använda komprimeringsalgoritmen på webben.

GZIP stöds av nästan alla servrar och klienter. Oavsett vilken server som du hostar din webbplats på kan du snabba upp den genom att aktivera GZIP.

GZIP-varningar i verktyg för hastighetstestning av webbplatser

Utöver minifiering är aktivering av GZIP en av de enklaste och mest effektiva hastighetsoptimeringarna som du kan implementera på din webbplats.

Det är även ett av de enklaste sätten att optimera WordPress. Trots detta använder många WordPress-webbplatser fortfarande inte detta.

När du besöker en webbplats kontrollerar webbläsaren om webbservern har GZIP aktiverat genom att söka efter svarshuvudet content-encoding: gzip. Om sidhuvudet existerar hämtas de komprimerade filerna, dekomprimeras och sedan betjänas de mindre filerna automatiskt.

Svarshuvudet
Svarshuvudet ”content-encoding: gzip” i Chrome DevTools

Om webbläsaren inte upptäcker GZIP-svarshuvudet hämtas de okomprimerade filerna. I många fall kan skillnaden i sidinläsningshastigheter vara flera sekunder. Så om du inte har GZIP aktiverat, kommer du att få varningar i testverktyg för webbplatshastighet.

GZIP-varning i Google PageSpeed Insights / Lighthouse

Google PageSpeed Insights varnar när du inte har någon textkomprimering aktiverad på din webbplats.

Obs: Google PageSpeed Insights och Google Lighthouse var två separata testverktyg för webbplatsprestanda. De arbetade oberoende av varandra fram till 2018, då Google uppgraderade PageSpeed Insights så att det använder Lighthouse som analysmotor. Så nuförtiden är PageSpeed Insights och Lighthouse samma sak.

Varning om
Varning om ”Aktivering av textkomprimering” i Google PageSpeed Insights

På exempelwebbplatsen ovan kan komprimering av textbaserade resurser minska sidvikten med över 78 % och påskynda sidinläsningstiden med 2,1 sekunder.

Obs: PageSpeed Insights förlitar sig på de svarshuvuden som servern returnerar till webbläsaren. Ibland kan det komma en falsk varning även när du har GZIP-komprimering aktiverad. Det kan bero på att hastighetstestet körs på en dator som använder en mellanliggande proxyserver eller en säkerhetsprogramvara. De kan störa nedladdningen av komprimerade filer från externa servrar.

GZIP-varning i GTmetrix

GTmetrix visar en varning om din webbplats inte betjänar komprimerade textbaserade resurser. Precis som Google PageSpeed Insights visar det dig även de potentiella besparingar som du kan uppnå.

Varning för
Varning för ”Aktivering av komprimering” i GTmetrix

Obs: GTmetrix uppgraderar sin hastighetstestalgoritm för att ersätta de gamla PageSpeed Insights- och YSlow-biblioteken med de senaste Google Lighthouse-mätvärdena. Du kan förvänta dig att dess GZIP-komprimeringsvarning liknar den som visas av Lighthouse.

GZIP-varning i pingdom Tools

Pingdom Tools ger en rak och enkel varning för att komprimera dina webbplatskomponenter med GZIP.

Varning om
Varning om ”Komprimering av komponenter med GZIP” i Pingdom Tools

I beskrivningsavsnittet ger Pingdom Tools även lite statistik om vikten av GZIP. Finemang!

GZIP-varning i WebPageTest

WebPageTest visar en varning i fliken Prestandagranskning om det upptäcker att eventuella komprimerbara svar inte visas på det mest optimerade sättet.

Varning om
Varning om ”Användande av GZIP-komprimering” i WebPageTest

WebPageTest ger dig även en bedömd poäng för att visa hur allvarlig en varning är. Den ger exempelvis den ovanstående varningen betyget 23 av 100, vilket innebär att du bör fixa det som en prioritet.

Så här kontrollerar du om GZIP-komprimering är aktiverat?

HTTP-huvudet Accept-Encoding: gzip, deflate stöds av i stort sett alla moderna webbläsare. Därför aktiverar de flesta webb-hostar GZIP-komprimering (eller Brotli-komprimering) som standard på alla sina servrar.

När webbservrar ser det här huvudet som skickas av en webbläsare känner de igen webbläsarens stöd för GZIP och svarar med ett komprimerat HTTP-svar med hjälp av huvudet Content-encoding: gzip.

Men om du använder en annan host, eller om du bara vill bekräfta om din webbplats serverar GZIP-komprimerat innehåll korrekt, ska du alltid kontrollera om det är aktiverat.

Nedan är några enkla sätt att söka efter GZIP-komprimering.

1. Verktyg för GZIP-komprimering online

Att använda ett onlineverktyg är det enklaste sättet att kontrollera om GZIP-komprimering är aktiverat på din webbplats. Jag rekommenderar att du använder de kostnadsfria verktygen Check GZIP Compression eller HTTP Compression Test. Ange bara din webbplats URL och tryck på knappen Kontrollera eller Testa.

Båda dessa onlineverktyg visar dig en kort rapport om huruvida GZIP är aktiverat eller inte, och hur mycket dataöverföring du har sparat (eller kan spara) genom att betjäna testadressen med GZIP-komprimering aktiverad.

Det första verktyget visar dig även annan relevant information, exempelvis webbplatsens servertyp, innehållstyp och komprimeringstid.

Testa Kinstas hemsida med check GZIP-komprimeringsverktyget
Testa Kinstas hemsida med check GZIP-komprimeringsverktyget

Obs: Från och med den 5 november år 2021 så har Kinsta uppgraderat till Brotli-komprimering via Cloudflare för alla HTTPS-förfrågningar. Du kan testa om du har Brotli-komprimering genom att kontrollera content-encoding: br i en förfrågans svars-sidhuvuden.

Testa Kinsta.com med HTTP-komprimeringstestverktyg
Testa Kinsta.com med HTTP-komprimeringstestverktyg

Du bör vara medveten om att GZIP-optimering inte bara jobbar på din webbsida, utan innehåller även dess statiska textbaserade tillgångar som formatmallar, skript och teckensnitt. Om du använder ett CDN för att betjäna dessa tillgångar måste du se till att CDN också betjänar dem med aktiverad GZIP-komprimering.

De flesta moderna CDN som Cloudflare, Kinsta CDN, KeyCDN och CloudFront stöder GZIP-komprimering. Du kan testa tillgångar som betjänas av CDN för GZIP-komprimering genom att länka direkt till tillgångarna.

GZIP-komprimeringstest för tillgångar som hostas av ett CDN
GZIP-komprimeringstest för tillgångar som hostas av ett CDN

I ovanstående rapport kan du se att Kinsta CDN använder KeyCDN-motorn, som är ett traditionellt pull-CDN.

Obs: Kinsta har bytt till Cloudflare som CDN-partner för att snabba upp och säkra våra kunders webbplatser. Du kan läsa mer om detta här.

Om du använder Kinsta som host för din webbplats så behöver du inte oroa dig för att du har GZIP-komprimering eftersom vi aktiverar Brotli-komprimering – ett snabbare alternativ till GZIP-komprimering – som standard.

2. HTTP-svarshuvudet ”content-encoding: gzip”

Det andra sättet att verifiera om en webbplats levererar komprimerat GZIP-innehåll är genom att verifiera HTTP-svarshuvudet content-encoding: gzip.

Du kan öppna Chrome DevTools eller Firefox Developer Tools och leta efter det här svarshuvudet under sektionen Nätverk.

Jag har redan visat hur det ser ut i Chrome DevTools. Så här ser det ut i Firefox Developer Tools.

Huvudet
Huvudet ”content-encoding: gzip” i Firefox Developer Tools

Du kan även aktivera alternativet ”Använd stora rader för begäranden” i inställnings-panelen för Chrome DevTools för att se både sidans ursprungliga och komprimerade storlek. Som du kan se nedan minskade den ursprungliga sidans storlek från 118 KB till endast 22,9 KB efter att ha komprimerats med GZIP.

Visa de komprimerade vs okomprimerade sidstorlekarna i Chrome Devtools
Visa de komprimerade vs okomprimerade sidstorlekarna i Chrome Devtools

3. Verktyg för hastighetstestning av webbsidor

De flesta verktyg för hastighetstestning av webbsidor varnar dig om du inte använder komprimering som GZIP för att betjäna dina webbsidor. Många läsare anländer troligtvis till den här artikeln på grund av exakt dessa GZIP-varningar, varav många jag redan har diskuterat djupgående ovan.

GZIP-varningar i olika verktyg för hastighetstestning av webbsidor
GZIP-varningar i olika verktyg för hastighetstestning av webbsidor

Du kan använda verktyg som PageSPeed Insights, GTmetrix, Pingdom Tools och WebPageTest för att kontrollera om du har GZIP-komprimering aktiverad på din WordPress-webbplats.

Aktivera GZIP-komprimering

Om du inte har aktiverat GZIP-komprimering på webbservern finns det många sätt att aktivera detta på. Den exakta metoden beror på vilken webbserver du använder som host för din webbplats.

Viktigt: Ta alltid en säkerhetskopia av din webbplats och dina serverkonfigurationsfiler innan du redigerar dem.

1. Aktivera GZIP med ett WordPress-plugin

Det enklaste sättet att aktivera GZIP-komprimering på din WordPress-webbplats är genom att använda ett cache- eller prestandaoptimeringsprogram.

Om du exempelvis hostar din WordPress-webbplats på Apache-webbservern innehåller W3 Total Cache ett alternativ för att aktivera GZIP-komprimering under inställningspanelen för webbläsarcache.

På samma sätt tillåter WP Rocket att du lägger till GZIP-komprimeringsregler automatiskt. Dessa plugins möjliggör GZIP-komprimering genom att lägga till Apaches mod_deflate-modul i .htaccess-filen.

Aktivera GZIP-komprimering i W3 Total Cache
Aktivera GZIP-komprimering i W3 Total Cache

WordPress-plugins kräver behörigheter för att ändra filer på din webbserver. Om de inte har rätt behörigheter misslyckas de eller visar dig ett fel.

I sådana fall måste du kontakta din hosting-leverantör eller ändra webbserverns konfigurationsfiler manuellt med hjälp av kodfragmenten nedan.

Obs: Kinsta har optimerat sin plattform för hög prestanda, tillförlitlighet och säkerhet. Detta inkluderar även aktivering av GZIP-komprimering som standard i samtliga hosting-planer.

Eftersom cache-plugins från tredje part kan orsaka konflikt med Kinstas interna prestandaoptimeringar förbjuder Kinsta de flesta av dem på sina servrar. För mer information kan du se den fullständiga listan över Kinstas förbjudna plugins.

2. Aktivera GZIP på Apache Web Server

Enligt Netcraft betjänar Apache fler aktiva webbplatser än någon annan webbserver som används idag. Det är även en av de två rekommenderade webbservrarna från WordPress.

För att aktivera GZIP-komprimering på Apache-servrar måste du använda dess mod_filter– och mod_deflate-moduler och konfigurera dem med rätt direktiv. De dirigerar Apache att komprimera serverutmatningen innan den skickas till klienter via nätverket.

Du har två alternativ för att redigera Apaches serverkonfigurationer baserat på din åtkomstnivå:

  1. Om du kan komma åt konfigurationsfilen för huvudservern (vanligtvis kallad httpd.conf) rekommenderas det att du använder den för att konfigurera Apache eftersom .htaccess-filer kan sakta ner Apache.
  2. Om du inte kan komma åt konfigurationsfilen för huvudservern, vilket vanligtvis är fallet hos de flesta delade hosting-leverantörer på WordPress, måste du konfigurera Apache med .htacccess-filen.

Det första alternativet är strikt för sysadmins, eftersom hosting-leverantörer sällan tillåter dig att redigera konfigurationsfilen för huvudservern. Att förklara det tillvägagångssättet ligger utanför den här artikelns omfattning. Du kan referera till  Apache Server Configs som delas av HTML5 Boilerplate-projektet och Apache-dokumentationen för att komma igång.

Det andra alternativet är idealiskt för de flesta WordPress-webbplatsägare eftersom många delade hosting-leverantörer låter dig redigera .htaccess-filer.

För att komma igång använder du SFTP  eller hostens onlinefilhanterare för att hitta  .htaccess-filen i din WordPress-webbplats rotkatalog. Lägg sedan till kodavsnittet nedan.

Viktigt: Kontrollera att mod_filter-modulen är aktiv på servern. De flesta hosting-leverantörer har detta aktiverat som standard, men om så inte är fallet fungerar inte AddOutputFilterByType-direktivet och du kan möta ett HTTP 500-fel. Du kan kontrollera serverns felloggar om du möter problem efter att du har lagt till kodavsnittet nedan.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml  

  # Remove browser bugs (only needed for ancient browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Lägg till koden ovan först efter de befintliga direktiven i .httaccess-filen. Spara filen och kontrollera sedan om den aktiverar GZIP-komprimering på servern.

Exempel på Apache .htaccess-fil efter aktivering av GZIP-komprimering
Exempel på Apache .htaccess-fil efter aktivering av GZIP-komprimering

Webbservern bör nu visa komprimerade filer för alla filtillägg som anges ovan. Du kan bekräfta detta med någon av de metoder som nämnts tidigare.

Om du vill se till att proxyservrar och säkerhetsprogram på klientsidan inte stör GZIP-komprimeringen kan du ersätta kodavsnittet ovan med det nedan.

<IfModule mod_deflate.c>
  # force compression for clients that mangle 'Accept-Encoding' request headers
  <IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
    RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
  </IfModule>
  </IfModule>

  # compress all output with one of the following file extensions
  <IfModule mod_filter.c>
    AddOutputFilterByType DEFLATE "application/atom+xml" \
                                  "application/javascript" \
                                  "application/json" \
                                  "application/ld+json" \
                                  "application/manifest+json" \
                                  "application/rdf+xml" \
                                  "application/rss+xml" \
                                  "application/schema+json" \
                                  "application/geo+json" \
                                  "application/vnd.ms-fontobject" \
                                  "application/wasm" \
                                  "application/x-font-ttf" \
                                  "application/x-javascript" \
                                  "application/x-web-app-manifest+json" \
                                  "application/xhtml+xml" \
                                  "application/xml" \
                                  "font/eot" \
                                  "font/opentype" \
                                  "font/otf" \
                                  "font/ttf" \
                                  "image/bmp" \
                                  "image/svg+xml" \
                                  "image/vnd.microsoft.icon" \
                                  "text/cache-manifest" \
                                  "text/calendar" \
                                  "text/css" \
                                  "text/html" \
                                  "text/javascript" \
                                  "text/plain" \
                                  "text/markdown" \
                                  "text/vcard" \
                                  "text/vnd.rim.location.xloc" \
                                  "text/vtt" \
                                  "text/x-component" \
                                  "text/x-cross-domain-policy" \
                                  "text/xml"
  </IfModule>

  # define and map media types to their appropriate encoding type    
  # Using SVG format (Scalable Vector Graphics) is highly recommended to    
  # load logos, icons, text, and simple images. You can compress .SVG files
  # further using GZIP to create .SVGZ files. However, most browsers don’t
  # know that they need to decompress them first if they’re not served
  # without an appropriate ‘content-encoding’ HTTP response header. Thus,
  # these images wouldn’t show up in the browser. Hence, this module.

  <IfModule mod_mime.c>
    AddType image/svg+xml svg svgz
    AddEncoding gzip svgz
  </IfModule>

</IfModule>

Du kan lära dig mer om alla direktiv som används här genom att gå till dess kodlagringsplats och följa alla resurser som finns länkade där.

3. Aktivera GZIP på Nginx Web Server

Enligt Netcraft är Nginx den mest använda webbservern av webbvända datorer. Om den nuvarande trenden fortsätter kommer den snart att gå om Apache och bli den mest använda webbservern av aktiva webbplatser. Även Kinsta använder Nginx för att driva sina prestandaoptimerade hosting-lösningar.

Du kan aktivera GZIP-komprimering på din Nginx-webbserver med hjälp av de direktiv som definieras i ngx_http_gzip_module.

Till att börja med lägger du till direktiven nedan i filen nginx.conf.  Du kan vanligtvis hitta den här filen på serverplatsen /etc/nginx/nginx.conf.

# enables GZIP compression
gzip on; 

# compression level (1-9)
# 6 is a good compromise between CPU usage and file size
gzip_comp_level 6;

# minimum file size limit in bytes to avoid negative compression outcomes
gzip_min_length 256;

# compress data for clients connecting via proxies
gzip_proxied any;

# directs proxies to cache both the regular and GZIP versions of an asset
gzip_vary on;

# disables GZIP compression for ancient browsers that don't support it
gzip_disable "msie6";

# compress outputs labeled with the following file extensions or MIME-types
# text/html MIME-type is enabled by default and need not be included
gzip_types
application/atom+xml
application/geo+json
application/javascript
application/x-javascript
application/json
application/ld+json
application/manifest+json
application/rdf+xml
application/rss+xml
application/vnd.ms-fontobject
application/wasm
application/x-web-app-manifest+json
application/xhtml+xml
application/xml
font/eot
font/otf
font/ttf
image/bmp
image/svg+xml
text/cache-manifest
text/calendar
text/css
text/javascript
text/markdown
text/plain
text/xml
text/vcard
text/vnd.rim.location.xloc
text/vtt
text/x-component
text/x-cross-domain-policy;

Om webbplatsen betjänar stora JS- och CSS-filer kan du öka buffertstorleken som används för komprimering genom att lägga till följande direktiv i filen nginx.conf:

# sets the 'number' and 'size' of buffers for GZIP compression
# default buffer size is 4K or 8K depending on the platform
gzip_buffers 16 8k;

Glöm inte att ladda om Nginx efter att du har sparat filen nginx.conf.

sudo service nginx reload

Slutligen bör du testa om servern har GZIP-komprimering aktiverad. Du kan läsa Nginx-dokumentation för en uppdaterad lista över alla ngx_http_gzip_module-direktiv.

4. Aktivera GZIP på IIS webbserver

Microsofts Internet Information Services (IIS) är den tredje mest populära webbservern som används idag. IIS distribueras främst i företagsmiljöer som körs i Windows, särskilt för att konfigurera företagsspecifika intranät- och extranätservrar.

Det används sällan för att hosta WordPress-webbplatser på grund av olika kompatibilitetsproblem.

Men om du befinner dig i en av de sällsynta situationer där du behöver aktivera GZIP-komprimering på IIS kan du hänvisa till Microsofts dokumentation för att komma igång. Du kan nog även finna den här Stack Overflow-tråden användbar.

Alternativ till GZIP-komprimering

Världen av datakomprimering på webben utvecklas alltid. Med en genomsnittlig sidviktstorlek som ständigt ökar försöker webbtekniken komma ikapp för att göra webböverföring av data mer effektiv.

Ökning av sidviktens storlek över tid (Källa: HTTPArchive)
Ökning av sidviktens storlek över tid (Källa: HTTPArchive)

En ny komprimeringsalgoritm har fått stor popularitet under de senaste åren: Brotli. Komprimering av WOFF2-webbteckensnitt var ursprungligen Brotlis huvudfokus, men det har sedan dess expanderats till att stödja komprimering för alla typer av data.

Brotli komprimerar data bättre än GZIP, men kräver betydligt mer tid och resurser för att komprimera data. Dess dekompressionstid är dock jämförbar med GZIP: s, även om det fortfarande är lite långsammare.

Brotli-stöd i olika webbläsare
Brotli-stöd i olika webbläsare

De flesta webbläsare stöder Brotli idag, men det är fortfarande rätt så komplicerat att använda det på WordPress-webbplatser. Du måste hosta din webbplats hos en hosting-leverantör som stöder Brotli eller låter dig installera Brotli-biblioteket. De flesta hanterade WordPress-hostar stöder det inte i nuläget, men om du använder ett CDN som Cloudflare eller KeyCDN kan du enkelt aktivera det.

Sammanfattning

En väloptimerad webb är allas önskemål. Användare älskar snabba webbplatser, webbplatsägare älskar de reducerade hosting-avgifterna och hosting-leverantörer älskar optimeringen som uppnås på servrarna. Komprimeringstekniker som GZIP är ett av de bästa sätten för att påskynda sidladdningstiderna för besökarna.

WordPress webbplatsägare kan snabba upp sina webbplatser direkt genom att aktivera GZIP-komprimering. Kinsta aktiverar detta som standard på alla sina servrar, men för andra går den här artikeln igenom flera sätt att aktivera GZIP-komprimering på olika webbservrar.

Hastighet är avgörande för alla webbplatser. Komprimera bara!

Salman Ravoof

Salman Ravoof är en självlärd webbutvecklare, författare, skapare och en stor beundrare av fri och öppen källkod (FOSS). Förutom teknik är han intresserad av vetenskap, filosofi, fotografi, konst, katter och mat. Lär dig mer om honom på hans hemsida och kontakta Salman på X.