Den nemmeste måde at fremskynde dit WordPress-websted på er at fjerne alle dets uønskede ressourcer. Den anden nemmeste måde at fremskynde det på er at komprimere alle de ønskede ressourcer. Aktivering af GZIP-komprimering på din webserver er en af ​​de enkleste og mest effektive måder at opnå det på.

Alle moderne browsere inkluderer understøttelse af GZIP-komprimering som standard. Men for at betjene de komprimerede ressourcer til dine brugere uden problemer, skal du konfigurere din server korrekt.

I dette indlæg lærer du det grundlæggende om datakomprimering på nettet, hvad GZIP-komprimering er, dets forskellige fordele, og hvordan du kan bruge det til at fremskynde dine WordPress-websteder på forskellige serveropsætninger.

Begejstret? Lad os dekomprimere!

Foretrækker du at se videoversionen?

Det grundlæggende om datakomprimering på nettet

Datakomprimering på nettet er processen med at reducere størrelsen af data, der overføres af websteder. Afhængigt af datatypen – tekst, billeder, stylesheets, scripts, skrifttyper – er der forskellige måder at komprimere data på.

Hovedkomponenterne på en webside
Hovedkomponenterne på en webside

For eksempel er minificering af HTML, CSS og JavaScript en enkel måde at reducere mængden af data sendt af browsere. Her komprimerer minifier teksten ved at fjerne unødvendige tegn såsom kommentarer og mellemrum fra kildekoden.

I eksemplet nedenfor på et simpelt HTML-dokument er der tre indholdstyper: HTML-markup, CSS-styles og JavaScript-kode.

Hver indholdstype har unik syntaks og semantik. Alt i alt har dette HTML-dokument 357 tegn i alt.

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

Ovenstående kode er nem at læse og følge. Det er ideelt til udvikling. Det er dog unødvendigt for browseren at læse kommentarer og have perfekt indrykkede tags. En smart kompressor kan analysere dette dokument og fjerne alle de unødvendige bits fra det.

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

Efter minifikation reduceres HTML-dokumentet til kun 141 tegn. Det er en besparelse på 60,50% i antallet af tegn. Det er ikke så let for øjnene, men det betyder ikke noget for browseren. Det vil stadig vise den samme side til brugeren.

For at drage fordel af begge versioner kan du vedligeholde det originale dokument som en “udviklingsversion”, men formindske al koden, før du skubber den live.

De fleste WordPress performance plugins tager sig af dette automatisk for dig.

Filstørrelse Komprimering af ukomprimeret vs minificeret jQuery
Filstørrelse Komprimering af ukomprimeret vs minificeret jQuery

Som et eksempel er den ukomprimerede version af jQuery 3.5.1 biblioteket mere end 3 gange større end den minificerede version af den samme fil.

Ligeledes kan de samme komprimeringsteknikker beskrevet ovenfor optimere andre indholdstyper som billeder, videoer, skrifttyper og mere. Indholdsspecifikke reduktioner som disse, er det første skridt i at optimere størrelsen på dit websteds tekstbaserede aktiver.

Disse åbenlyse fordele er grunden til, at Kinsta rullede en kodeminificerings funktion ind i MyKinsta-dashboardet. Kunder kan vælge at tilvælge automatisk kodeminifikation for deres CSS- og JavaScript-filer, hvilket gør deres websteder hurtigere uden manuel indsats.

Men der er mere til datakomprimering end blot minifikation. Ved at bruge avancerede matematiske teknikker, kan datakomprimeringsalgoritmer yderligere reducere størrelsen af ​​data.

Et af de mest populære eksempler på en sådan datakomprimeringsmetode er GZIP. Det muliggør effektiv datatransmission og har bidraget væsentligt til at gøre internettet til et levedygtigt globalt kommunikationsmedium.

Hvad er GZIP-komprimering?

GZIP, forkortelse for GNU Zip, er den mest populære lossless datakomprimeringsmetode på nettet. Det giver dig mulighed for at reducere størrelsen på dit websteds HTML-sider, stylesheets og scripts.

Udover at være en datakomprimeringsalgoritme, er GZIP også en filtypenavn (.gz) og en software, der bruges til filkomprimering/dekomprimering.

Den er baseret på DEFLATE-algoritmen, som er en blanding af LZ77 encoding og Huffman coding algoritmer.

GZIP-komprimering er baseret på DEFLATE-algoritmen
GZIP-komprimering er baseret på DEFLATE-algoritmen

En GZIP-kompressor tager et sæt rådata og komprimerer dem uden tab. De rå data kan være fra enhver filtype, men GZIP fungerer bedst med tekstbaserede aktiver (f.eks. HTML, CSS, JS).

Det næste afsnit dækker i dybden, hvordan GZIP-komprimering fungerer.

Hvordan GZIP komprimerer data

En grov illustration af, hvordan GZIP-komprimering fungerer
En grov illustration af, hvordan GZIP-komprimering fungerer

Til at begynde med kører GZIP-kompressoren LZ77-komprimeringsalgoritmen på rådataene for at fjerne redundanser. Denne algoritme virker ved at finde gentagne mønstre i et foruddefineret glidende vindue (en lille del af rådataene).

Det erstatter derefter alle de gentagne strenge med tupler for at komprimere de rå data.

En illustration af LZ77-kodningsalgoritmen
En illustration af LZ77-kodningsalgoritmen

I ovenstående eksempel er den glidende vinduesstørrelse kun 13 tegn lang (13 bytes). GZIP-komprimering kan dog bruge en maksimal glidende vinduesstørrelse på 32 KB (32.768 bytes). Størrelsen på det glidende vindue spiller en nøglerolle i LZ77-kompressionsydelsen.

Efter at have komprimeret de rå data med LZ77-algoritmen, bruger GZIP-kompressoren derefter Huffman coding algorithm til at komprimere dem yderligere. Det gør det ved at tildele tegn, der forekommer hyppigere, det mindste antal bit, mens det tildeler sjældne tegn det højeste antal bit.

Denne teknik er som den, der bruges i morsekode, hvor bogstaver, der forekommer hyppigere i det engelske sprog, får de korteste sekvenser.

For at forstå, hvordan Huffman-kodningsalgoritmen fungerer, skal du overveje ordet BOOKKEEPER. Den er på 10 tegn, men den har kun 6 unikke karakterer. Dette ord har en god blanding af enkelt-, dobbelt- og tredobbelte bogstaver.

Næsten alle websteder bruger UTF-8 tegnkodning til at repræsentere bogstaver og symboler. Hvert ASCII-tegn i UTF-8, som også inkluderer det engelske alfabet, bruger 1 byte (8 bit).

Ordet "BOOKKEEPER" har mange gentagende bogstaver
Ordet “BOOKKEEPER” har mange gentagende bogstaver

En 10-tegns streng som BOOKKEEPER vil kræve 10 bytes (80 bits) hukommelse. Du kan se, at den indeholder 1 forekomst af bogstaverne B, P, R, 2 forekomster af bogstaverne O og K og 3 forekomster af bogstavet E.

Huffman-kodningsalgoritmen bruger denne viden til tabsfrit at komprimere strengen. Det gør det ved at generere et binært træ med hvert unikt bogstav som et blad.

Bogstaver med den laveste frekvens (f.eks. B, P, R) vil befinde sig i bunden af træet, mens de, der optræder ofte (f.eks. E, O, K), ideelt set vil befinde sig i toppen.

Den øverste node i træet er root, og dens værdi er lig med det samlede antal tegn i strengen.

Huffman Tree for ordet "BOOKKEEPER"
Huffman Tree for ordet “BOOKKEEPER”

Efter generering af Huffman-træet får alle venstre- og højre-forgrenede pile henholdsvis 0 og 1 numre. Du kan derefter generere Huffman-koden for enhver karakter ved at spore rod-til-blad-stien og forbinde alle 0’erne og 1’erne.

Huffman-koder er unikke binære koder for hver karakter
Huffman-koder er unikke binære koder for hver karakter

Du kan bemærke, at bogstaver med den højeste frekvens har Huffman-koder med de mindste bitstørrelser.

Bemærk: Huffman-kodningsalgoritmen kan generere alternative binære koder ved at bruge en anden rækkefølgestrategi for tegn med de samme frekvenser. Den samlede størrelse af den kodede streng forbliver dog den samme.

Et 80 bit ord kodet som en 25 bit streng
Et 80 bit ord kodet som en 25 bit streng

Det er en reduktion på 68,75% i hukommelsen, der kræves for at gemme det originale ord.

Brug af Huffman-træet med 0/1-konventionen genererer binære koder, der opfylder præfiksegenskaben. Det sikrer, at Huffman-koden for et bestemt tegn ikke er et præfiks for nogen anden karakters kode, hvilket gør det nemt at afkode den kodede streng ved hjælp af Huffman-træet. Dette spiller en primær rolle i hastigheden af GZIP-dekompression.

Ligesom med ordet ovenfor, bruger GZIP-kompressoren Huffman-kodningsalgoritmen til yderligere at optimere tuplerne genereret af LZ77-algoritmen. Dette resulterer i meget komprimerede filer med filtypenavnet .gz.

Hvis du er interesseret i at lære mere om, hvordan GZIP fungerer, kan du se denne video for et hurtigt overblik.

Hvor god er GZIP-komprimering?

Typisk opnår GZIP et komprimeringsforhold på omkring 70 % for små filer, men det kan nå op til 90% for større tekstbaserede aktiver.

GZIP-komprimeringsforhold for nogle populære CSS- og JS-biblioteker
GZIP-komprimeringsforhold for nogle populære CSS- og JS-biblioteker

I ovenstående tabel kan du se, at komprimering af minificerede filer med GZIP kan reducere deres størrelse yderligere.

Bemærk: Du kan komprimere enhver filtype med GZIP, men for aktiver, der allerede er komprimeret med andre metoder (f.eks. billeder, videoer), vil det ikke udgøre nogen besparelse. Nogle gange kan det endda øge filstørrelsen.

Styrken af en komprimeringsalgoritme afhænger ikke kun af dens komprimeringsforhold, men også hvor hurtigt og effektivt den kan komprimere og dekomprimere data. Det er her, GZIP udmærker sig til de fleste use cases.

Da GZIP dekomprimerer hurtigt ved hjælp af en streamingalgoritme, passer det godt til webprotokoller, hvor hastighed er af afgørende betydning. Plus, GZIP bruger minimale ressourcer til både at komprimere og dekomprimere data, hvilket gør det ideelt til både servere og klienter.

Kompressionsydelse af brotli vs bzip2 vs GZIP vs xz
Kompressionsydelse af brotli vs bzip2 vs GZIP vs xz (Kilde: OpenCPU)

Ovenstående diagrammer sammenligner kompressionsydelsen af ​​brotli, bzip2, gzip og xz kompressionsalgoritmer. GZIP taber i kompressionsforholdstesten med en lille margin, men for kompressions- og dekompressionshastigheder slår det konkurrenterne direkte.

Ser vi på grafen for kompressionshastighed, kan vi konkludere, at GZIP er ideel til realtidskomprimering i HTTP-servere og andre datastrømme på nettet. I betragtning af alle dets positive sider ved at fremme nettet, IETF ratified GZIP som et af de tre standardformater til komprimering i HTTP/1.1.

Bemærk: En abstraktion af GZIPs kompressionsbibliotek kaldet zlib bruges i mange populære operativsystemer (Linux, macOS, iOS) og moderne spillekonsoller (PlayStation 4, Wii U, Xbox One). Det bruges også i det lossless PNG-filformat til at komprimere billeder.

6 Fordele ved GZIP-komprimering

Lad os se nærmere på de vigtigste fordele ved GZIP-komprimering.

Leverer et anstændigt kompressionsforhold

Som diskuteret før har GZIP ikke det bedste kompressionsforhold sammenlignet med konkurrenterne. Men det er heller ikke så langt fra dem. Typisk kan det hjælpe dig med at reducere størrelsen af ​​tekstbaserede ressourcer med 70-90%.

Superhurtig kompression og dekompression

For datakomprimerings- og dekompressionshastigheder er GZIP den klare vinder. Det er yderst ønskeligt for on-the-fly komprimering i HTTP-servere og andre datastrømme.

Kræver meget lidt hukommelse

GZIP efterlader et minimalt hukommelsesfodaftryk, hvilket gør det velegnet til servere og systemer med begrænset hukommelseskapacitet. Derfor vil du finde det understøttet af selv de billigste webhostingudbydere.

Udvider sig ikke meget selv i værste tilfælde

Lossless datakomprimeringsalgoritmer som GZIP har en streng grænse, ud over hvilken de ikke kan komprimere data.

Dette sker typisk, når ressourcen allerede er godt komprimeret, eller hvis den er lille, og omkostningerne ved at tilføje GZIP-ordbogen er højere end komprimeringsbesparelserne. Vi kan tilskrive dette fænomen et koncept kaldet entropi-kodning. GZIP er meget modstandsdygtig overfor denne effekt.

Gratis at bruge og Open Source

GZIP blev primært skabt som en gratis, open source-erstatning for det patenterede komprimeringsprogram, der blev brugt i tidlige Unix-systemer. Det er således ikke behæftet med nogen patenter og kan frit bruges af alle.

Nyder universel støtte

Ifølge W3Techs bruges GZIP-komprimering af 82% af alle de websteder, de sporer, hvilket gør det til den mest udbredte komprimeringsalgoritme på tværs af nettet.

GZIP understøttes af næsten alle servere og klienter. Uanset hvilken server du hoster dit websted på, kan du fremskynde det ved at aktivere GZIP på det.

GZIP-advarsler i webhastighedstest-værktøjer

Udover minifikation er aktivering af GZIP en af ​​de enkleste og mest effektive hastighedsoptimeringer, som du kan implementere på din hjemmeside.

Det er også en af ​​de nemmeste måder at optimere WordPress på. På trods af dette bruger mange WordPress-websteder det stadig ikke.

Når du besøger et websted, tjekker din browser, om webserveren har GZIP aktiveret ved at tjekke for content-encoding: gzip response header. Hvis headeren findes, henter den de komprimerede filer, dekomprimerer dem og serverer derefter de mindre filer til dig automatisk.

Response header "content-encoding: gzip" i Chrome DevTools
Response header “content-encoding: gzip” i Chrome DevTools

Hvis browseren ikke registrerer GZIP-response headeren, downloader den de ukomprimerede filer. I de fleste tilfælde kan forskellen i sideindlæsningshastigheder være flere sekunder. Derfor, hvis du ikke har GZIP aktiveret, vil du se advarsler i værktøjer til test af webstedshastighed.

GZIP-advarsel i Google PageSpeed Insights / Lighthouse

Google PageSpeed Insights kaster en advarsel op, når du ikke har nogen tekstkomprimering aktiveret på dit websted.

Bemærk: Google PageSpeed Insights og Google Lighthouse var to separate værktøjer til test af webstedets ydeevne. De arbejdede uafhængigt af hinanden indtil 2018, hvor Google opgraderede PageSpeed Insights til at bruge Lighthouse som sin analysemaskine. Derfor er PageSpeed Insights og Lighthouse samlet og det samme nu.

"Aktiver tekstkomprimering" advarsel i Google PageSpeed Insights
“Aktiver tekstkomprimering” advarsel i Google PageSpeed Insights

På eksempelsiden ovenfor kan komprimering af tekstbaserede ressourcer reducere sidevægten med over 78% og fremskynde sidens indlæsningstid med 2,1 sekunder.

Bemærk: PageSpeed Insights er afhængig af de response headers, der returneres til din browser af serveren. Nogle gange kan det vise en falsk advarsel, selv når du har GZIP-komprimering aktiveret. Det kan være på grund af at køre hastighedstesten på en maskine, der bruger en mellemliggende proxyserver eller en sikkerhedssoftware. De kan forstyrre download af komprimerede filer fra eksterne servere.

GZIP-advarsel i GTmetrix

GTmetrix viser en advarsel, hvis dit websted ikke leverer komprimerede tekstbaserede ressourcer. Ligesom Google PageSpeed Insights vil den også vise dig de potentielle besparelser, du kan opnå.

"Aktiver komprimering" advarsel i GTmetrix
“Aktiver komprimering” advarsel i GTmetrix

Bemærk: GTmetrix opgraderer sin hastighedstestalgoritme for at erstatte de gamle PageSpeed Insights- og YSlow-biblioteker med de nyeste Google Lighthouse metrics. Du kan forvente, at dens GZIP-kompressionsadvarsel ligner den, der er vist af Lighthouse.

GZIP-advarsel i Pingdom-værktøjer

Pingdom Tools sender en ligetil advarsel om at komprimere dine webstedskomponenter med GZIP.

"Komprimer komponenter med GZIP" advarsel i Pingdom Tools
“Komprimer komponenter med GZIP” advarsel i Pingdom Tools

I beskrivelsessektionen giver Pingdom Tools dig også et par statistikker om vigtigheden af GZIP. Fede bønner!

GZIP-advarsel i WebPageTest

WebPageTest viser en advarsel på fanen Performance Review, hvis den registrerer, at eventuelle komprimerbare svar ikke bliver leveret på den mest optimerede måde.

“Brug GZIP-komprimering" advarsel i WebPageTest
“Brug GZIP-komprimering” advarsel i WebPageTest

WebPageTest vil også give en karakter for at vise, hvor alvorlig en advarsel er. For eksempel vurderer den ovenstående advarsel til 23 ud af 100, hvilket betyder, at du bør rette den som en prioritet.

Hvordan kontrollerer man, om GZIP-komprimering er aktiveret?

Accept-Encoding: gzip, deflate HTTP-headeren understøttes effektivt af alle moderne browsere. Derfor aktiverer de fleste webhosts GZIP-komprimering (eller Brotli-komprimering) som standard på alle deres servere.

Når webservere ser denne header sendt af en browser, genkender de browserens understøttelse af GZIP og reagerer med et komprimeret HTTP-svar ved hjælp af content-encoding: gzip header.

Men hvis du bruger en anden hostingudbyder, eller hvis du bare vil bekræfte, om dit websted leverer GZIP-komprimeret indhold korrekt, skal du altid kontrollere, om det er aktiveret.

Nedenfor er et par enkle måder at kontrollere for GZIP-komprimering.

1. Online GZIP-komprimeringstestværktøjer

Brug af et onlineværktøj er den nemmeste måde at kontrollere, om GZIP-komprimering er aktiveret på dit websted. Jeg anbefaler at bruge de gratis værktøjer til Check GZIP Compression eller HTTP Compression Test Test. Indtast blot dit websteds URL og tryk på knappen Tjek eller Test.

Begge disse onlineværktøjer viser dig en kort rapport om, hvorvidt GZIP er aktiveret eller ej, og mængden af ​​dataoverførsel, du har gemt (eller muligvis gemmer) ved at servere test-URL’en med GZIP-komprimering aktiveret.

Det første værktøj vil også vise dig andre relevante oplysninger, såsom din hjemmesides servertype, indholdstype og komprimeringstid.

Test af Kinstas hjemmeside med Check GZIP Compression tool
Test af Kinstas hjemmeside med Check GZIP Compression tool

Bemærk: Fra den 5. november 2021 har Kinsta opgraderet til Brotli-komprimering via Cloudflare for alle HTTPS-anmodninger. Du kan teste for Brotli-komprimering ved at tjekke for content-encoding: br i en anmodnings response headers.

Test af Kinsta.com med HTTP Compression Test tool
Test af Kinsta.com med HTTP Compression Test tool

Du skal bemærke, at GZIP-optimering ikke kun stopper på din webside, men den inkluderer også dens statiske tekstbaserede aktiver som stylesheets, scripts og skrifttyper. Hvis du bruger et CDN til at betjene disse aktiver, skal du sikre dig, at CDN også betjener dem med GZIP-komprimering aktiveret.

De fleste moderne CDN’er såsom Cloudflare, Kinsta CDN, KeyCDN og CloudFront understøtter GZIP-komprimering. Du kan teste aktiver serveret af CDN for GZIP-komprimering ved at linke direkte til aktiverne.

GZIP-komprimeringstest for aktiver, der hostes af et CDN
GZIP-komprimeringstest for aktiver, der hostes af et CDN

I ovenstående rapport kan du se, at Kinsta CDN bruger KeyCDN engine, som er en traditionel pull CDN.

Bemærk: Kinsta har skiftet til Cloudflare som sin CDN-partner for at fremskynde og sikre vores kunders websteder. Du kan læse mere om det her.

Hvis du bruger Kinsta til at hoste dit websted, behøver du ikke bekymre dig om noget om GZIP-komprimering, da vi aktiverer Brotli-komprimering – et hurtigere alternativ til GZIP-komprimering – som standard.

2. “content-encoding: gzip” HTTP Response Header

Den anden måde at verificere, om et websted leverer GZIP-komprimeret indhold, er ved at verificere content-encoding: gzip HTTP response header.

Du kan åbne Chrome DevTools eller Firefox Developer Tools og se efter denne response ehader under afsnittet Netværk.

Jeg har allerede vist, hvordan det ser ud i Chrome DevTools tidligere. Sådan ser det ud i Firefox Developer Tools.

"Content-encoding: gzip"-headeren i Firefox Developer Tools
“Content-encoding: gzip”-headeren i Firefox Developer Tools

Du kan også aktivere indstillingen “Use large request rows” i indstillingspanelet for Chrome DevTools for at se både den originale og komprimerede størrelse af siden. Som du kan se nedenfor, er den originale sides størrelse reduceret fra 118 KB til kun 22,9 KB efter at have komprimeret den med GZIP.

Se de komprimerede vs ukomprimerede sidestørrelser i Chrome Devtools
Se de komprimerede vs ukomprimerede sidestørrelser i Chrome Devtools

3. Værktøjer til test af websidehastighed

De fleste værktøjer til test af webstedshastighed vil advare dig om ikke at bruge komprimering som GZIP til at betjene dine websider. Mange læsere, der ankommer til denne artikel, kommer sandsynligvis på grund af netop disse GZIP-advarsler, hvoraf mange jeg allerede har diskuteret i dybden ovenfor.

GZIP-advarsler i forskellige website speed test tools
GZIP-advarsler i forskellige website speed test tools

Du kan bruge værktøjer som PageSPeed Insights, GTmetrix, Pingdom Tools og WebPageTest til at kontrollere, om du har GZIP-komprimering aktiveret på dit WordPress-websted.

Hvordan aktiverer man GZIP-komprimering?

Hvis du ikke har GZIP-komprimering aktiveret på din webserver, er der mange måder at aktivere det på. Den nøjagtige metode afhænger af, hvilken webserver du bruger til at hoste dit websted.

Vigtigt: Tag som altid en backup af dit websted og din serverkonfigurationsfiler, før du redigerer dem.

1. Aktiver GZIP med et WordPress-plugin

Den nemmeste måde at aktivere GZIP-komprimering på dit WordPress-websted er ved at bruge et caching- eller plugin til optimering af ydeevne.

For eksempel, hvis du hoster dit WordPress-websted på Apache web server, inkluderer W3 Total Cache i en mulighed for at aktivere GZIP-komprimering under indstillingspanelet for browsercache.

Ligeledes lader WP Rocket dig tilføje GZIP-komprimeringsregler automatisk. Disse plugins muliggør GZIP-komprimering ved at tilføje Apaches mod_deflate modul til .htaccess-filen.

Aktiverer GZIP-komprimering i W3 Total Cache
Aktiverer GZIP-komprimering i W3 Total Cache

WordPress-plugins kræver tilladelser til at ændre filer på din webserver. Hvis de ikke har de rigtige tilladelser, vil de fejle eller vise dig en fejl.

I sådanne tilfælde skal du kontakte din hostingudbyder eller ændre din webservers konfigurationsfiler manuelt ved hjælp af kodestykkerne nedenfor.

Bemærk: Kinsta har optimeret sin platform til høj ydeevne, pålidelighed og sikkerhed. Dette inkluderer også at aktivere GZIP-komprimering som standard for alle dets hostingplaner.

Da tredjeparts cache-plugins kan forårsage konflikt med Kinstas interne ydelsesoptimeringer, tillader Kinsta ikke de fleste af dem på sine servere. For mere information kan du se den komplette liste over Kinstas forbudte plugins.

2. Aktiver GZIP på Apache Web Server

Ifølge Netcraft serverer Apache flere aktive sider end nogen anden webserver, der bruges i dag. Det er også en af ​​de to anbefalede webservere.

For at aktivere GZIP-komprimering på Apache-servere skal du bruge dets mod_filter og mod_deflate-moduler og konfigurere dem korrekt med de rigtige direktiver. De vil lede Apache til at komprimere serveroutput, før de sender det til klienter over netværket.

Du har to muligheder for at redigere Apaches serverkonfigurationer baseret på det adgangsniveau, du har:

  1. Hvis du kan få adgang til hovedserverens konfigurationsfil (normalt kaldet httpd.conf), anbefales det at bruge den til at konfigurere Apache, da .htaccess-filer kan bremse Apache.
  2. Hvis du ikke kan få adgang til hovedserverens konfigurationsfil, hvilket normalt er tilfældet med de fleste WordPress shared hosting-udbydere, så skal du konfigurere Apache ved hjælp af .htaccess-filen.

Den første mulighed er udelukkende for sysadmins, da hostingudbydere sjældent tillader dig at redigere hovedserverens konfigurationsfil. At forklare, hvordan man gør det på denne måde, er uden for denne artikels anvendelsesområde. Du kan henvise til eksemplerne på Apache Server Configs, der deles af HTML5 Boilerplate-projektet og Apache-dokumentationen for at komme i gang.

Den anden mulighed er ideel for de fleste WordPress-webstedsejere, da mange delte hostingudbydere giver dig mulighed for at redigere .htaccess-filer.

For at komme i gang skal du bruge SFTP eller din hosts online filhåndtering til at finde .htaccess-filen i dit WordPress-websteds rodmappe. Tilføj derefter nedenstående kodestykke til det.

Vigtigt: Sørg for, at mod_filter-modulet er aktivt på din server. De fleste webhosts har det aktiveret som standard, men hvis det ikke er det, vil AddOutputFilterByType direktivet ikke fungere og kan give en HTTP 500-fejl. Du kan tjekke din servers fejllogfiler, hvis du har problemer efter at have tilføjet kodestykket nedenfor.

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

Tilføj kun koden ovenfor efter de eksisterende direktiver i din .htaccess-fil. Gem filen, og kontroller derefter, om den aktiverer GZIP-komprimering på din server.

Eksempel på Apache .htaccess-fil efter aktivering af GZIP-komprimering
Eksempel på Apache .htaccess-fil efter aktivering af GZIP-komprimering

Din webserver skal nu vise komprimerede filer for alle filtypenavne, der er anført ovenfor. Du kan bekræfte dette ved at bruge en af de førnævnte metoder.

Hvis du vil sikre dig, at proxyer og sikkerhedssoftware på klientsiden ikke forstyrrer GZIP-komprimering, kan du erstatte ovenstående kodestykke med nedenstående.

<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ære mere om alle de direktiver, der bruges her, ved at gå til dets kodelager og følge alle de ressourcer, der er forbundet der.

3. Aktiver GZIP på Nginx Web Server

Ifølge Netcraft er Nginx den mest brugte webserver af web-vendte computere. Hvis den nuværende tendens fortsætter, vil den snart overhale Apache for at blive den mest brugte webserver af aktive websteder. Selv Kinsta bruger Nginx til at drive sine præstationsoptimerede hostingløsninger til WordPress.

Du kan aktivere GZIP-komprimering på din Nginx-webserver ved at bruge de direktiver, der er defineret i ngx_http_gzip_modulet.

For at starte skal du tilføje instruktionerne nedenfor til din nginx.conf-fil. Typisk kan du finde denne fil på din servers /etc/nginx/nginx.conf placering.

# 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;

Hvis dit websted serverer store JS- og CSS-filer, kan du øge bufferstørrelsen, der bruges til komprimering, ved at tilføje følgende direktiv til din nginx.conf-fil:

# 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;

Glem ikke at genindlæse Nginx efter at have gemt din nginx.conf-fil.

sudo service nginx reload

Til sidst bør du teste for at se, om din server har GZIP-komprimering aktiveret. Du kan henvise til Nginx-dokumentationen for en opdateret liste over alle ngx_http_gzip_module-direktiverne.

4. Aktiver GZIP på IIS Web Server

Microsofts Internet Information Services (IIS) er den tredjemest populære webserver i brug i dag. IIS er hovedsageligt implementeret i virksomhedsmiljøer, der kører på Windows, især til opsætning af virksomhedsspecifikke intranet- og ekstranetservere.

Det bruges sjældent til at være host for WordPress-websteder på grund af forskellige kompatibilitetsproblemer.

Men hvis du befinder dig i en af ​​de sjældne situationer, hvor du skal aktivere GZIP-komprimering på IIS, kan du henvise til Microsofts dokumentation for at komme i gang. Du kan også finde denne Stack Overflow-tråd nyttig.

Alternativer til GZIP-komprimering

Verden af ​​datakomprimering på nettet er altid i fremgang. Med den gennemsnitlige sidevægtsstørrelse stigende konstant, forsøger webteknologi også at indhente den for at gøre overførsel af data over nettet mere effektiv.

Stigning i sidevægtstørrelse over tid
Stigning i sidevægtstørrelse over tid (Kilde: HTTPArchive)

En ny komprimeringsalgoritme har vundet udbredt popularitet i løbet af de sidste par år: Brotli. Komprimering af WOFF2-webskrifttyper var Brotlis hovedfokus oprindeligt, men det er siden udvidet til at understøtte komprimering for enhver type data.

Brotli komprimerer data bedre end GZIP, men det kræver betydeligt mere tid og ressourcer at komprimere dataene. Dens dekompressionstid er dog sammenlignelig med den for GZIP, selvom den stadig er en smule langsommere.

Brotli-understøttelse på tværs af forskellige browsere
Brotli-understøttelse på tværs af forskellige browsere

De fleste browsere understøtter Brotli i dag, men at bruge det på WordPress-websteder er stadig noget kompliceret. Du skal hoste dit websted hos en hostingudbyder, der understøtter Brotli eller giver dig mulighed for at installere Brotli-biblioteket. De fleste administrerede WordPress-hosts understøtter det ikke direkte endnu, men hvis du bruger et CDN såsom Cloudflare eller KeyCDN, kan du nemt aktivere det.

Opsummering

Et veloptimeret web er fantastisk for alle. Brugere elsker smartere websteder, webstedsejere elsker de reducerede hostingafgifter, og webhosts elsker optimeringen opnået på deres servere. Kompressionsteknikker som GZIP er en af ​​de bedste måder at fremskynde sideindlæsningstider for dine besøgende.

WordPress-webstedsejere kan fremskynde deres websteder øjeblikkeligt ved at aktivere GZIP-komprimering. Kinsta aktiverer det som standard på alle dets servere, men for andre dækker denne artikel flere måder at aktivere GZIP-komprimering på forskellige webservere.

Hastighed er afgørende for enhver hjemmeside. Bare komprimer!

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.