De makkelijkste manier om je WordPress website sneller te maken is door alle overbodige resources te verwijderen. De één na makkelijkste manier om je website sneller te maken is om alle resources die wél nodig zijn te comprimeren. Je kan dit het makkelijkst en meest efficiënt doen door GZIP compressie op je webserver in te schakelen.
Alle moderne browsers ondersteunen standaard GZIP compressie. Maar om je gecomprimeerde resources zonder problemen aan je bezoekers te laten zien, moet je de server wel goed instellen.
In dit artikel leer je de basis over datacompressie voor je site, wat GZIP compressie is, wat de voordelen zijn en hoe je het kan gebruiken om je WordPress websites sneller te maken bij verschillende serveropstellingen.
Zin in? Laten we gaan comprimeren dan!
Kijk je liever de videoversie?
De basis van datacompressie op het web
Datacompressie op het web is het verkleinen van data die verzonden wordt door websites. Afhankelijk van het type data, zoals tekst, afbeeldingen, stylesheets, script of lettertypen, zijn er verschillende manieren om die data te verkleinen.
Zo is het minificeren van HTML, CSS en JavaScript bijvoorbeeld een eenvoudige manier om de hoeveelheid data die browsers versturen, te verminderen. Bij dit proces wordt de tekst gecomprimeerd door de minifier door onnodige tekens te verwijderen, bijvoorbeeld de opmerkingen en witruimte in de broncode.
In het voorbeeld hieronder, van een eenvoudig HTML document, zie je drie typen content: HTML markup, CSS styles en JavaScript code.
Elk type heeft een eigen syntax en structuur. In totaal bevat dit HTML document 357 tekens.
<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>De code hierboven is eenvoudig te lezen en goed te volgen. Ideaal dus voor development en wanneer je moet samenwerken. Maar de browser heeft al die aanwijzingen en opmerkingen niet nodig, en ook geen perfect uitgelijnde tags. Een slimme compressor kan dit document analyseren en alle onnodige tekens eruit halen.
<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>Na het minificeren bevat dit HTML document zo nog maar 141 tekens. Dat is 60,5% minder tekens. Het is niet prettig te lezen, maar dat maakt voor de browser dan ook niks uit. De gebruiker ziet nog steeds precies dezelfde pagina.
Om de voordelen van beide versies te kunnen gebruiken, kan je het originele document bewaren als “development versie”, maar het document minimaliseren voor je live site.
De meeste WordPress plugins voor betere prestaties zullen dit automatisch voor je regelen.
Zo is verder bijvoorbeeld de ongecomprimeerde versie van de jQuery 3.5.1 bibliotheek meer dan 3 keer zo groot als de geminimaliseerde versie.
Op dezelfde manier kunnen dergelijke technieken gebruikt worden om andere contenttypen te optimaliseren, zoals afbeeldingen, video’s, lettertypen enzovoort. Dergelijke content-specifieke verkleinmethodes zijn de eerste stap in het optimaliseren van de bestandsgrootte van je tekstuele bronnen van je website.
Deze duidelijke voordelen zijn de reden waarom Kinsta een code-minificatiefeature in het MyKinsta dashboard heeft geïmplementeerd. Klanten kunnen kiezen voor automatische codeminificatie voor hun CSS- en JavaScript bestanden, waardoor hun sites sneller worden zonder handmatige inspanning.
Maar datacompressie gaat verder dan alleen minificatie. Door geavanceerde wiskundige technieken te gebruiken, kunnen compressie-algoritmen de bestandsgrootte van je data verder verkleinen.
Eén van de meest populaire methoden voor dergelijke compressie is GZIP. Het maakt efficiënte verzending van data mogelijk en heeft zelfs een aanzienlijke bijdrage geleverd aan het internet als een bruikbaar, wereldwijd communicatiemiddel.
Wat is GZIP compressie?
GZIP, dat staat voor GNU Zip, is de meest populaire lossless datacompressiemethode op het web. Het maakt het mogelijk om de grootte van de HTML pagina’s, stylesheets en scripts van je website te verminderen.
Naast dat het een datacompressie-algoritme is, is GZIP ook een bestandstype (.gz) en softwaredata dat wordt gebruikt voor het (de)comprimeren van bestanden.
GZIP is gebaseerd op het DEFLATE algoritme, wat weer een mix is van LZ77 encoding en Huffman codering algoritmes.
Een GZIP compressor pakt een stuk ruwe data en comprimeert het zonder verlies van data (wat lossless wordt genoemd). Deze ruwe data kan elk bestandstype zijn, maar GZIP werkt het beste bij bestanden op basis van tekst (bijvoorbeeld HTML, CSS, JS).
Het volgende deel gaat dieper in over hoe GZIP compressie precies werkt.
How GZIP Compresses Data
Om te beginnen voert de GZIP compressor het LZ77 compressiealgoritme uit op de ruwe data om overbodige data te verwijderen. Dit algoritme vindt herhaalde patronen in een vooraf gedefinieerd bewegend venster (en bekijkt dus steeds een klein deel van de ruwe data).
Vervolgens worden herhaalde strings vervangen door tuples om de grootte te beperken.
In het voorbeeld hierboven is het bewegende venster slechts 13 tekens groot (dus 13 bytes). Maar GZIP compressie kan maximaal een venster van 32KB (32,768 bytes) gebruiken. De grootte van dit venster speelt een belangrijke rol in hoe efficiënt de LZ77 compressie is.
Na het comprimeren van de ruwe data via het LZ77 algoritme, gebruikt de GZIP compressor het Huffman coding algoritme om het nog verder te comprimeren. Dit wordt gedaan door tekens die het vaakst voorkomen het minste aantal bits toe te wijzen, terwijl tekens die weinig voorkomen het grootste aantal bits krijgen.
Deze techniek lijkt wel wat op wat in Morse-code wordt gebruikt, waarbij de meest gebruikte letters (in de Engelse taal) de kortste frequentie krijgen.
Om het Huffman coderingsalgoritme goed te begrijpen, nemen we het woord BOOKKEEPER. Dit woord is 10 tekens lang, maar heeft slechts 6 unieke tekens. Het woord is een mooie mix van letters die één, twee of drie keer gebruikt worden.
Bijna alle websites gebruiken UTF-8 teken encoding om letters en symbolen weer te geven. Elk ASCII teken in UTF-8, waaronder het Engelse alfabet, gebruikt 1 byte (8 bits).
Een string van 10 tekens, zoals BOOKKEEPER gebruikt daardoor 10 bytes (=80 bits) aan geheugen. Je kan zien dat het eenmaal de letters B, P, R, gebruikt, 2 keer de letters O and K, en 3 keer de letter E.
Het Huffman coding algoritme gebruikt dit inzicht om de string lossless te comprimeren. Dit wordt gedaan door een binaire boom te genereren waarbij elke unieke letter een blad is.
Letters die het minst vaak voorkomen (dus B, P, R) zullen onderaan de boom zitten, terwijl letters die vaker voorkomen (dus E, O, K) idealiter bovenin de boom zitten.
Het bovenste knooppunt van de boom is de root, ofwel wortel, en de waarde ervan is gelijk aan het aantal tekens in de string.
Na het genereren van de Huffman boom, krijgen alle naar links splitsende aftakkingen het getal 0 en de rechtse aftakkingen het getal 1. Je kan vervolgende de Huffman code voor elk teken genereren door het pad van de wortel tot het blad te volgen, en alle 0 en 1 achter elkaar te zetten.
Je ziet dat hierdoor de letters die het vaakst voorkomen bovenaan zitten, en dus Huffman codes met het minste aantal bits hebben.
Noot: Het Huffman coding algoritme kan verschillende binaire codes maken door een andere strategie voor de volgorde te gebruiken voor tekens met gelijke frequenties. Maar de totale grootte van de gecodeerde string zal alsnog hetzelfde zijn.
Hierdoor heb je dus 68,75% minder geheugen nodig voor hetzelfde woord.
Het gebruiken van de Huffman boom met de 0/1 conventie levert binaire codes op die voldoen aan de prefix eigenschap. Het zorgt ervoor dat de Huffman code van een specifiek teken niet ook de prefix van de code van een ander teken is, wat het makkelijk maakt om de gecodeerde string te decoderen via de Huffman boom. Dit speelt een belangrijke rol bij de snelheid van GZIP decompressie.
Net als met het woord hierboven gebruikt de GZIP compressor het Huffman coding algoritme om de tuples te optimaliseren die gemaakt worden door het LZ77 algoritme. Het resultaat is sterk gecomprimeerde bestanden met de .gz extensie.
Als je geïnteresseerd bent in meer informatie over hoe GZIP precies werkt, kijk dan eens deze video voor een goed overzicht.
Hoe goed is GZIP compressie?
Over het algemeen biedt GZIP een compressieniveau van rond de 70% voor kleinere bestanden, maar dit kan oplopen tot 90% voor grotere, tekstgebaseerde bestanden.
In de tabel hierboven zie je dat het comprimeren met GZIP van geminimaliseerde bestanden de bestandsgrootte nog verder kan verkleinen.
Noot: Je kan elk bestandstype comprimeren met GZIP, maar assets die al gecomprimeerd zijn met andere methoden (zoals afbeeldingen en video’s), zullen weinig tot geen winst opleveren. Het kan zelfs voorkomen dat de grootte iets toeneemt.
De kracht van een compressie-algoritme is niet alleen af te lezen aan het compressieniveau, maar ook hoe snel en efficiënt de data gecomprimeerd en weer gedecomprimeerd wordt. En dat is precies waar GZIP echt het verschil maakt in de meeste use cases.
Doordat GZIP snel decomprimeert via een doorlopend algoritme, is het een goede keuze voor webprotocollen waarbij snelheid belangrijk is. Daarnaast gebruikt GZIP een minimum aan bronnen voor het (de)comprimeren van data, waardoor het dus ideaal is voor zowel de servers als clients.
De grafieken hierboven vergelijken de efficiëntie van de brotli, bzip2, gzip, en xz compressie-algoritmen. GZIP biedt een net wat lager compressieniveau, maar op zowel compressie- als decompressiesnelheid verslaan ze de concurrenten ruim.
Als je kijkt naar de grafiek over compressiesnelheid, kunnen we concluderen dat GZIP ideaal is voor real-time compressie bij HTTP servers en andere online datastromen. Gezien alle bijdragen aan de ontwikkelen van het internet, heeft het IETF GZIP geratificeerd als één van de drie standaardformats voor compressie in HTTP/1.1.
Noot: Een abstractie van GZIP’s compressie library die zlib heet wordt gebruikt in veel populaire besturingssystemen (Linux, macOS, iOS) en moderne spelcomputers (PlayStation 4, Wii U, Xbox One). Het wordt ook gebruikt in het lossless PNG bestandsformat voor afbeeldingen.
6 voordelen van GZIP compressie
We gaan verder met de belangrijkste voordelen van GZIP compressie.
Biedt een goed compressieniveau
Zoals eerder gezegd, biedt GZIP niet de allerbeste compressie die er te vinden is. Maar het zit er maar nét onder. Over het algemeen kunnen resources met veel tekst met zo’n 70-90% verkleind worden.
Supersnelle compressie en decompressie
Als het gaat om snelheid van het comprimeren en decomprimeren, is GZIP duidelijk de winnaar. Het is erg handig voor on-the-fly compressie in HTTP servers en andere datastromen.
Vereist weinig geheugen
GZIP gebruikt een minimum aan geheugen, waardoor het ideaal is voor servers en systemen met beperkte geheugencapaciteit. Daarom wordt het ook ondersteund door zelfs de allergoedkoopste webhostingproviders.
Breidt weinig uit, zelfs in de slechtste gevallen
Lossless datacompressiemethoden zoals GZIP hebben een strikt limiet, waarboven ze geen data meer kunnen comprimeren.
Dit wordt meestal bereikt wanneer een bestand al eerder is gecomprimeerd, of wanneer het heel klein is en het toevoegen van de GZIP dictionary meer ruimte inneemt dan er bespaard wordt. Dit is toe te schrijven aan iets dat entropy encoding heet. GZIP is hier nauwelijks vatbaar voor.
Gratis te gebruiken en open source
GZIP is ontwikkeld als gratis, open source vervanging van het gepatenteerde compress programma dat in vroeg Unix systemen gebruikt wordt. Het wordt daardoor niet beperkt door patenten en kan door iedereen gebruikt worden.
Universele ondersteuning
Volgens W3Techs wordt GZIP compressie gebruikt door 82% van de door hen gevolgde websites, waardoor GZIP het meest gebruikte compressie-algoritme online is.
GZIP wordt ondersteund door bijna alle servers en clients. Op welke server je je website dus ook host, je kan GZIP gebruiken om je website sneller te maken.
GZIP waarschuwing in snelheidstests
Naast minificatie is het inschakelen van GZIP één van de makkelijkste en meest effectieve manieren om je website sneller te maken.
Het is ook één van de makkelijkste manieren om WordPress te optimaliseren. Toch zijn er nog veel WordPress websites die het niet gebruiken.
Wanneer je een website bezoekt, controleert je browser meteen of de webserver GZIP gebruikt, door te zoeken naar de content-encoding: gzip responsheader. Bestaat die header, dan worden de gecomprimeerde bestanden opgehaald, uitgepakt, en worden de kleinere bestanden automatisch weergegeven.
Als de browser geen GZIP responsheader vindt, worden de ongecomprimeerde bestanden gedownload. In de meeste gevallen is dat een verschil van een paar seconden. Als je GZIP dus niet ingeschakeld hebt op je website, zul je een waarschuwing krijgen in de meeste snelheidstests voor websites.
GZIP waarschuwing in Google PageSpeed Insights / Lighthouse
Google PageSpeed Insights laat een waarschuwing zien wanneer je geen tekstcompressie gebruikt op je website.
Noot: Google PageSpeed Insights en Google Lighthouse waren vroeger twee aparte snelheidstests. Tot 2018 werkten ze los van elkaar, tot Google PageSpeed Insight upgradet met het gebruik van Lighthouse als analyse-engine. Daarom zijn vanaf dat moment PageSpeed Insights en Lighthouse hetzelfde.
In het voorbeeld hierboven zorgt het comprimeren van tekstgebaseerde resources voor een vermindering van de paginagrootte van 78% en maakt de laadtijd 2,1 seconde sneller.
Noot: PageSpeed Insights gebruikt de responsheaders die de browser terugkrijgt van de server. Hierdoor kan er soms een waarschuwing getoond worden terwijl je wel GZIP compressie gebruikt. Dit kan bijvoorbeeld voorkomen wanneer je een snelheidstest uitvoert op een computer die een tussenliggende proxyserver of beveiligingssoftware gebruikt. Dergelijke omstandigheden veranderen het downloadgedrag van gecomprimeerde bestanden van externe servers.
GZIP waarschuwing in GTmetrix
GTmetrix laat een waarschuwing zien als je website geen gecomprimeerde resources aanbiedt. Net als bij Google PageSpeed Insights laat het ook de potentiële optimalisaties zien.
Noot: GTmetrix is hun snelheidstest momenteel aan het upgraden door het algoritme te veranderen van het oude PageSpeed Insights en YSlow libraries naar de nieuwste Google Lighthouse metrics. Je kan er dus van uitgaan dat de GZIP compressiewaarschuwing sterk zal gaan lijken op die van Lighthouse.
GZIP Waarschuwing in Pingdom Tools
Pingdom Tools geeft een duidelijke waarschuwing dat je de onderdelen van je website moet comprimeren met GZIP.
In de omschrijving biedt Pingdom Tools nog wat extra statistieken over het belang van GZIP, ter extra motivatie. Prima!
GZIP Waarschuwing in WebPageTest
WebPageTest laat een waarschuwing zien in het tabblad Performance Review wanneer ze detecteren dat responses die gecomprimeerd zouden kunnen worden niet op de optimale manier worden aangeboden.
WebPageTest geeft er ook een score bij om te laten zien hoe ernstig de waarschuwing is. Zo wordt hierboven bijvoorbeeld een score van 23/100 gegeven, wat betekent dat je er een prioriteit van moet maken.
Hoe controleer je of GZIP compressie is ingeschakeld?
De Accept-Encoding: gzip, deflate HTTP header wordt ondersteund door nagenoeg alle moderne browsers. Vandaar dat de meeste webhosts GZIP compressie (of Brotli compressie) standaard inschakelen op al hun servers.
Wanneer webservers deze header krijgen van een browser, sturen ze een gecomprimeerde HTTP respons terug via de content-encoding: gzip header, aangezien de browser dus GZIP ondersteunt.
Maar als je een andere hostingprovider gebruikt, of gewoon wilt controleren of je website al GZIP gecomprimeerde content aanbiedt, kan je controleren of dit is ingeschakeld.
Hieronder zijn enkele eenvoudige manier om te controleren of GZIP compressie wordt gebruikt.
1. Online GZIP Compressie testtools
Het gebruiken van een online tool is de makkelijkste manier om te kijken of GZIP compressie is ingeschakeld op je website. Ik raad de gratis Check GZIP Compression of HTTP Compression Test tools aan. Typ gewoon je URL in en druk op Check of Test.
Beide online tools geven je een kort overzicht of GZIP al dan niet ingeschakeld is, en hoeveel data je je bespaart of kan besparen door op de test URL GZIP compressie te gebruiken.
De eerste tool laat andere relevante informatie zien als het servertype van je website, contenttype en compressietijd.
Opmerking: Op 5 november 2021 heeft Kinsta een upgrade uitgevoerd naar Brotli compressie via Cloudflare voor alle HTTPS verzoeken. Je kunt testen op Brotli compressie door te controleren op content-encoding: br in de responsheaders van een verzoek.
Let hierbij op dat GZIP optimalisatie niet ophoudt bij je webpagina, maar doorgaat bij de statische text-based assets zoals stylesheet, scripts en lettertypen. Gebruik je een CDN om deze assets af te leveren, dan moet je dus ervoor zorgen dat dit CDN ook GZIP compressie gebruikt.
De meeste moderne CDN’s zoals Cloudflare, Kinsta CDN, KeyCDN, en CloudFront ondersteunen GZIP compressie. Je kan de assets vanuit het CDN testen op GZIP compressie door direct naar die assets te linken.
In het bovenstaande rapport kun je zien dat Kinsta CDN gebruik maakt van KeyCDN engine, wat een traditioneel pull CDN is.
Opmerking: Kinsta is overgestapt op Cloudflare als CDN partner om de sites van onze klanten te versnellen en te beveiligen. Je kunt er hier meer over lezen.
Als je Kinsta gebruikt om je site te hosten, hoef je je geen zorgen te maken over GZIP compressie omdat wij standaard Brotli compressie inschakelen – een sneller alternatief voor GZIP compressie.
2. De “content-encoding: gzip” HTTP responsheader
De tweede manier om te controleren of een website GZIP compressie gebruikt is door de content-encoding: gzip HTTP response header te controleren.
Je kan hiervoor Chrome DevTools of Firefox Developer Tools openen en zoeken naar de responderheader onder Network.
Ik heb eerder al laten zien hoe dat er in Chrome DevTools uitziet. En zo ziet dat eruit in Firefox Developer Tools.
Je kan ook de optie “Use large request rows” inschakelen in Chrome DevTools om zowel de originele als gecomprimeerde grootte van de pagina te zien. Zoals je hieronder kan zien is de pagina van 118KB naar slechts 22,9KB gegaan door GZIP.
3. Snelheidstesten voor webpagina’s
De meeste snelheidstests voor webpagina’s zullen je waarschuwen als je geen GZIP compressie voor je webpagina’s gebruikt. Veel lezers van dit artikel komen hier waarschijnlijk door precies die GZIP waarschuwingen, waarvan ik er al een aantal heb besproken.
GZIP waarschuwingen in verschillende snelheidstestsGebruik tools zoals PageSPeed Insights, GTmetrix, Pingdom Tools, en WebPageTest om te controleren of GZIP compressie is ingeschakeld voor je WordPress website.
Hoe schakel je GZIP compressie in?
Heb je GZIP compressie nog niet ingeschakeld op je webserver, dan zijn er allerlei manieren om dit te doen. De handigste manier hangt af van je webserver.
Belangrijk: Zoals altijd, maak je eerst een back-up van je site en instellingsbestanden van je server voordat je ze bewerkt.
1. Inschakelen van GZIP via een WordPress plugin
De makkelijkste manier om GZIP compressie in te schakelen voor je WordPress site is door een optimalisatie of caching plugin te gebruiken.
Wordt je WordPress site bijvoorbeeld gehost op een Apache webserver, dan bevat W3 Total Cache een optie om GZIP compressie in te schakelen onder de Browser Cache instellingen.
Op dezelfde manier maakt WP Rocket het mogelijk automatisch GZIP compressieregels toe te voegen. Deze plugins activeren GZIP compressie door de Apache module mod_deflate toe te voegen aan het .htaccess bestand.
WordPress plugins vereisen toestemming om de bestanden op je webserver aan te passen. Als ze niet de juiste toestemmingen hebben, zal het niet lukken of je krijgt een foutmelding.
In dergelijke gevallen moet je contact opnemen met je hostingprovider of de instellingen van je webserver handmatig aanpassen met de stukjes code hieronder.
Noot: Kinsta heeft haar platform al volledig geoptimaliseerd voor hoge prestaties, betrouwbaarheid en veiligheid. Dit betekent dat GZIP compressie standaard ingeschakeld is bij alle hostingpakketten.
Aangezien sommige externe cachingplugins conflicten kunnen veroorzaken met de interne optimalisatie, staat Kinsta de meeste cachin plugins niet toe op haar servers. Voor meer informatie vind je hier de volledige lijst met geblokkeerde plugins.
2. Inschakelen GZIP op Apache Web Server
Volgens Netcraft bedienen Apache servers meer actieve sites dan welke andere webservers ook. Het is ook een van de twee webservers die WordPress zelf aanbeveelt.
Om GZIP compressie te activeren op Apache servers, moet je de modules mod_filter en mod_deflate gebruiken en ze goed instellen. Deze modules zullen ervoor zorgen dat Apache de output van server comprimeert voordat ze naar clients verzonden worden.
Afhankelijk van je toegangsrechten heb je twee manieren om de instellingen van je Apache server aan te passen:
- Als je bij de hoofdinstellingen kan (in het bestand dat meestal httpd.conf heet), kun je dit het beste gebruiken, aangezien het instellen van Apache via .htaccess bestanden Apache langzamer kan maken.
- Heb je hier geen toegang tot, zoals bij de meeste WordPress shared hostingproviders, dan zul je Apache moeten instellen via het .htaccess
De eerste optie is dus alleen voor sysadmins, aangezien hostingproviders je moeten toestaan om de hoofdinstellingen aan te passen. De uitleg hoe je dit precies doet gaat wat te ver voor dit artikel. We verwijzen je daarvoor naar het voorbeeld Apache Server Configs dat gedeeld is door het HTML5 Boilerplate project en de algemene Apache documentatie.
De tweede optie is het meest geschikt voor de meeste WordPress sitebeheerders, aangezien veel shared hostingproviders je wel toestaan om de .htaccess bestanden te bewerken.
Om te beginnen gebruik je SFTP of de online bestandsmanager van je host om het .htaccess bestand te vinden in de root directory van je WordPress site. Vervolgens voeg je onderstaand stukje code in.
Belangrijk: Let erop dat de module mod_filter actief is op je server. De meeste webhosts hebben dit standaard ingeschakeld, maar zo niet, dan werkt de AddOutputFilterByType directive niet en krijg je een HTTP 500 fout. Je kan de errorlogs van je server checken op problemen na het toevoegen van de code.
<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>Voeg de bovenstaande code pas toe na de reeds bestaande directives van je .htaccess bestand. Sla het bestand op en kijk of GZIP compressie nu werkt op je server.
Je webserver zou nu gecomprimeerde bestanden voor alle bovenstaande bestandstypen moeten aanbieden. Je kan dit controleren via de eerder beschreven methoden.
Wil je zeker weten dat proxy’s en beveiligingssoftware aan de kant van je bezoekers geen problemen met GZIP compressie opleveren, dan kan je bovenstaande code vervangen met het volgende stuk.
<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>Je kan meer leren over alle regels die we hier gebruiken door naar de coderepository te gaan en de daar gelinkt resources te bekijken.
3. Inschakelen GZIP op Nginx Web Server
Volgens Netcraft is Nginx de meest gebruikte webserver door web-facing computers. Als de huidige trend doorzet, zal het binnenkort zelfs Apache inhalen als meest gebruikte webserver. Ook Kinsta gebruikt Nginx voor de hostingoplossingen voor maximale prestaties.
Je kan GZIP compressie inschakelen op je webserver door de directives te gebruiken zoals die in de ngx_http_gzip_module staan.
Om te beginnen, voeg je onderstaande directives toe aan je nginx.conf bestand. Dit bestand vind je over het algemeen in de map /etc/nginx/nginx.conf van je server.
# 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;Gebruikt je website grote JS en CSS bestanden dan kan je de buffer vergroten die voor compressie gebruikt wordt door de volgende directive toe te voegen aan je nginx.conf bestand:
# 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;Vergeet niet Nginx opnieuw te laden na het opslaan van je nginx.conf bestand.
sudo service nginx reloadAls laatste moet je natuurlijk testen of GZIP compressie nu ingeschakeld is op je server. Je kan de Nginx documentatie naslaan op een volledige lijst met alle ngx_http_gzip_module directives.
4. Inschakelen GZIP op IIS Web Server
Internet Information Services (IIS) van Microsoft is momenteel de derde server qua populariteit. IIS wordt vooral gebruikt in zakelijke omgevingen die op Windows draaien, vooral voor bedrijfsspecifieke intranet- en extranet-servers.
Het wordt zelden gebruikt om WordPress sites te hosten vanwege allerlei compatibiliteitsproblemen.
Mocht je toch in een uitzonderingspositie zitten waarbij je GZIP compressie moet inschakelen op IIS, dan kan je het beste beginnen met de documentatie van Microsoft. Wellicht is dan ook deze Stack Overflow discussie een handig beginpunt.
Alternatieven voor GZIP compressie
Datacompressie staat nooit stil. Doordat de gemiddelde grootte van pagina’s steeds blijft toenemen, probeert webtechnologie zoveel mogelijk bij te blijven om het verzenden van data zo efficiënt mogelijk te houden.
Een nieuw compressie-algoritme is de laatste jaren steeds populairder aan het worden: Brotli. De originele focus van Brotli lag bij het comprimeren van WOFF2 weblettertypen, maar ondersteunt tegenwoordig alle data.
Brotli comprimeert data beter dan GZIP, maar vereist momenteel wel meer tijd en resources om dit uit te voeren. De tijd nodig voor decompressie is vergelijkbaar met GZIP, zij het ietsjes langzamer.
De meeste browsers ondersteunen Brotli, maar om het te gebruiken op een WordPress website ligt wat ingewikkelder. Je moet je site hosten bij een hostingprovider die Brotli zelf ondersteunt of je toestaat om de Brotli library te ondersteunen. De meeste managed WordPress hostingproviders ondersteunen het nog niet meteen, maar als een CDN als Cloudflare of KeyCDN gebruikt kan je het eenvoudig inschakelen.
Samenvatting
Een goed geoptimaliseerd internet kent alleen maar winnaars. Gebruikers houden van snelle websites, beheerders houden van lagere kosten voor hosting, en webhosts houden van optimalisatie op hun servers. Compressietechnieken zoals GZIP zijn een effectieve manier om je laadtijden flink in te korten voor je bezoekers.
WordPress sitebeheerders kunnen hun website direct sneller maken door GZIP compressie in te schakelen. Kinsta heeft het standaard ingeschakeld op alle servers, maar voor anderen biedt dit artikelen diverse manieren om GZIP compressie op verschillende soorten webservers in te schakelen.
Snelheid is essentieel voor elke website. Comprimeren dus!
Salman Ravoof is een autodidactische webdeveloper, schrijver, creator en een groot bewonderaar van Free and Open Source Software (FOSS). Naast techniek is hij enthousiast over wetenschap, filosofie, fotografie, kunst, katten en eten. Lees meer over hem op zijn website en kom in contact met Salman op X.
Laat een reactie achter