Om snelle laadtijden op jouw WordPress website te kunnen bereiken, is het belangrijk om de grootte van de pagina’s te verkleinen. Dit kan het verschil betekenen tussen een website die in minder dan één seconde laadt en een website die heel erg langzaam laadt. Als je GZIP compressie inschakelt, kun je het formaat van de webpagina verkleinen waardoor de hoeveelheid tijd, die nodig is om de bronbestanden te kunnen downloaden, aanzienlijk kan worden beperkt. Ook wordt het dataverbruik voor de cliënt beperkt en de tijd voor de eerste weergave van jouw pagina’s zal worden verbeterd. Alle moderne browsers ondersteunen dit en gebruiken automatisch GZIP compressie voor alle HTTP-verzoeken. Vandaag zullen we je laten zien hoe je op jouw webserver GZIP compressie kunt controleren en kunt activeren.

Wat is GZIP compressie?

GZIP is een bestandsformat en een softwareapplicatie die wordt gebruikt voor compressie en de-compressie van bestanden. GZIP compressie staat ingeschakeld aan de kant van de server en zorgt voor verdere verkleining van je HTML-documenten, stylesheets en JavaScript-bestanden. Afbeeldingen kunnen niet worden verkleind omdat deze al op een andere manier zijn gecomprimeerd. Soms kan iets als gevolg van compressie wel 70% kleiner worden. Het is, als het gaat om WordPress, waarschijnlijk één van de gemakkelijkste optimalisaties die je zou kunnen aanbrengen.

Compressie is het coderen van informatie waardoor er minder bits nodig zijn. — Ilya Grigorik, Google

Wanneer een webbrowser een website bezoekt, controleert het of de webserver GZIP heeft ingeschakeld door te kijken of de responseheader “content-encoding: gzip” bestaat. Als de header wordt gedetecteerd, dan verstuurt de server gecomprimeerde en kleinere bestanden.. Als dat niet het geval is, zullen er ongecomprimeerde bestanden verschijnen. Als je GZIP niet hebt ingeschakeld, zie je hoogstwaarschijnlijk waarschuwingen en foutmeldingen in tools die de snelheid testen zoals bijvoorbeeld Google PageSpeed Insights en Gtmetrix.

GZIP waarschuwing in Google PageSpeed Insights

Zoals je kunt zien, geeft Google aan dat het comprimeren van bronnen met GZIP of de Deflate-compressiemethode het aantal bytes dat via het netwerk wordt verzonden kan verminderen.

GZIP waarschuwing in Google PageSpeed Insights

GZIP waarschuwing in Google PageSpeed Insights

GZIP-waarschuwing in GTmetrix

GTmetrix beveelt ook aan om GZIP compressie in te schakelen om zo de overdrachtsgrootte van statische bronbestanden te kunnen verminderen.

GZIP waarschuwing in GTmetrix

GZIP waarschuwing in GTmetrix

Hoe kun je controleren of GZIP-compressie staat ingeschakeld?

GZIP wordt tegenwoordig veel gebruikt en staat op alle Kinsta-servers standaard ingeschakeld. Je hoeft je geen zorgen te maken over de ondersteuning van GZIP door browsers, omdat ze bijna allemaal dit al meer dan 17 jaar ondersteunen. Hieronder vind je een lijst met browsers die met de HTTP-responseheader “Content-Encoding: gzip” compatibel zijn:

  • Internet Explorer 5.5 en hoger (juli 2000)
  • Opera 5 en hoger (juni 2000)
  • Firefox 0.9.5 en hoger (oktober 2001)
  • Chrome (spoedig na de lancering in 2008)
  • Safari (spoedig na de lancering in 2003)

Als je echter op een andere WordPress-host werkt, moet je altijd controleren of GZIP staat ingeschakeld omdat serverbeheerders deze optimalisatie vaak over het hoofd zien. Er zijn een paar snelle manieren om te controleren of GZIP compressie staat ingeschakeld:

1. Check GZIP Compression Tool

De eerste en de snelste manier om te controleren of GZIP-compressie op jouw site staat ingeschakeld, is door simpelweg naar de gratis Check GZIP Compression tool te gaan. Voer simpelweg jouw website in en klik op zoeken. Je krijgt nu de hoeveelheid data te zien dat is bespaard door het gebruiken van GZIP. Of er verschijnt een foutmelding om je te laten weten dat GZIP niet staat ingeschakeld. Zoals je kunt zien in onze test hieronder, hebben we wel 66,9% bespaard.

check gzip compression tool

Check GZIP compression tool

Vergeet niet dat GZIP ook van toepassing is op jouw statische content. Dit betekent dat als je items via CDN aanbiedt, je ervoor moet zorgen dat ook zij GZIP-compressie hebben ingeschakeld. Alle moderne aanbieders van CDN zoals Kinsta CDN, Cloudflare, KeyCDN en CloudFront ondersteunen GZIP-compressie. Je kunt dit ook eenvoudig testen door via de tool een van je CSS- of JavaScript-bestanden op je CDN te laten draaien.

Check GZIP Compression tool met CDN

Check GZIP Compression tool met CDN

2. De GZIP content-encoding responseheader

De tweede manier is om te verifiëren of de HTTP responseheader “Content-Encoding: gzip” op je site actief is. Hier zal de browser naar zoeken wanneer het een aanvraag naar de server verzendt. Je kunt Chrome Devtools openen door SHIFT + CTRL + I in te drukken op de website en onder de netwerksectie naar je eerste responseheader kijken.

HTTP responseheader ‘Content-Encoding: gzip’

HTTP responseheader ‘Content-Encoding: gzip’

Je kunt ook op de optie “View large requests” klikken en deze zal je dan de originele en de gecomprimeerde grootte van de pagina laten zien. Zoals je hieronder kunt zien was de originele pagina 51,6 KB en de gecomprimeerde versie van GZIP is 17,7 KB.

Bekijk in Chrome Devtools de gecomprimeerde pagina's

Bekijk in Chrome Devtools de gecomprimeerde pagina’s

Hoe kun je GZIP-compressie inschakelen?

Als GZIP-compressie niet staat ingeschakeld, zijn er een aantal manieren waarop je het op je webserver kunt inschakelen.

Met een WordPress plug-in GZIP inschakelen

De eerste en één van de gemakkelijkste manieren is door een WordPress cachingplug-in te gebruiken, die het activeren van GZIP ondersteunt. WP Rocket voegt bijvoorbeeld met behulp van de mod_deflate-module automatisch GZIP-compressie regels aan je .htaccess-bestand toe. W3 Total Cache heeft onder zijn instellingen (in de ‘performance’ sectie) ook een manier om dit voor jou in te schakelen. Omdat dit plug-ins zijn, zijn ze wel afhankelijk van de rechten die je hebt om bestanden op jouw webserver aan te passen. Als jouw caching-plug-in geen toestemming heeft, moet je dit aan je host vragen of een codefragment hieronder gebruiken.

GZIP op Apache inschakelen

De tweede manier om GZIP-compressie in te schakelen, is door je .htaccess-bestand te bewerken. De meeste hostingbedrijven die shared hosting aanbieden, gebruiken Apache, waarin je eenvoudig aan je .htaccess-bestand de onderstaande code kunt toevoegen. Je vindt jouw .htaccess-bestand via FTP in de root van je WordPress-site.

Belangrijk: zorg dat mod_filter op je server is geladen, anders werkt de AddOutputFilterByType instructie niet en kan er een 500-foutmelding optreden. We raden je aan als je problemen ondervindt met de onderstaande code om jouw foutenlogboek te controleren.

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

Zorg ervoor dat je deze onder de huidige content van je .htaccess-bestand toevoegt. Bekijk het voorbeeld hieronder:

Voorbeeld van de GZIP Apache .htaccess code

Voorbeeld van de GZIP Apache .htaccess code

Schakel GZIP in op NGINX

Als je website op NGINX draait, voeg je gewoon het volgende aan je nginx.conf-bestand toe.

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

Schakel GZIP in op IIS

Als je IIS gebruikt, zijn er twee verschillende soorten compressie: statische en dynamische. We raden je aan om de handleiding van Microsoft over het inschakelen van compressie voor meer informatie.

17
Delen