Gzip-compressie in WordPress zonder plug-in (instructie)

Gijs Hovens, 31 december 2018

Je hebt gelijk. Het gebruiken van Gzip om je website assets zoals HTML, CSS en JavaScript te comprimeren is een goed idee. Gzip verkleint deze bestanden. Kleinere bestanden zijn sneller te downloaden, waarmee de snelheid van jouw WordPress-website wordt verhoogd. We zullen uitgebreider ingaan op wat Gzip is, hoe je controleert of je website er gebruik van maakt en hoe je ervoor zorgt dat je Gzip-compressie in WordPress inschakelt zonder plug-in als je website dit nog niet gebruikt.

Wat is Gzip-compressie voor WordPress?

Ten eerste: Gzip-compressie is niet specifiek voor WordPress-websites. Gzip is een methode om bestanden te comprimeren voordat een server ze naar een client (bezoeker) verstuurt. Kleinere bestanden betekent snellere downloads. Gzip-compressie kan bestandsgrootte tot wel negentig procent verminderen!

De webserver bewaart geen Gzip-versies van bestanden (zoals je misschien met .zip-bestanden op je computer doet) maar comprimeert deze wanneer een client een bestand aanvraagt. Dit neemt zo weinig tijd in beslag dat de voordelen van het snellere downloaden dit nadeel overstijgen.

Gzip wordt door alle grote browsers ondersteund.

Controleer of Gzip is ingeschakeld

Je controleert op drie manieren of Gzip is ingeschakeld: met Google PageSpeed Insights, een online controle en het controleren van je headers.

Optie A: PageSpeed Insights

De meeste mensen komen voor het eerst met Gzip in aanraking via een test met Google PageSpeed Insights. Als je Gzip hebt ingeschakeld zal Google een vinkje zetten bij de volgende melding:

“Schakel tekstcompressie in

Tekstgebaseerde bronnen moeten worden geleverd met compressie (gzip, deflate of brotli) om het totale aantal netwerkbytes te minimaliseren.”

Als deze regel onder aanbevelingen staat vind je ook een lijst van assets en mogelijke besparingen in bestandsgroottes door deze te comprimeren.

Optie B: Gebruik een online Gzip-controle

Het is nog makkelijker om de website CheckGzipCompression te gebruiken. Vul gewoon je domeinnaam in! We bevelen het niet aan om een WordPress-plugin te gebruiken om je Gzip-status te controleren, dat is de moeilijkste manier en het installeren van nutteloze plug-ins is nooit een goed idee.

Optie C: Controleer je headers voor Gzip-compressie

Een moeilijke maar meer grondige manier is de developer tools van je browser gebruiken om de headers te controleren. Zoek de regel die ‘content-encoding’ heet in de Response-header. Als Gzip staat ingeschakeld, dan zal daar ‘Gzip’ staan (duh).

Headers controleren op Gzip

Deze methode stelt je ook in staat om makkelijker elementen te inspecteren die met een CDN worden gehost of assets van externe bronnen (zoals tracking scripts, advertenties, etc.) worden gehost. Als je naar het netwerktabblad gaat en de groottekolom bekijkt, zul je de gecomprimeerde bestandsgrootte in het zwart vinden en de originele grootte in het grijs.

Gzip inschakelen

Ten eerste moeten alle goede webhostbedrijven Gzip standaard hebben geïnstalleerd. Overweeg serieus om van host te wisselen als dit niet zo is. De snelheid zal waarschijnlijk ook onder andere serverinstellingen te lijden hebben.

Alle vormen van Gzip inschakelen hebben premissies nodig om enkele specifieke bestanden aan te passen. De WordPress-plugins WPRocket en W3TotalCache kunnen Gzip voor je inschakelen door deze bestanden onder de motorkap aan te passen. Het hangt van je serverinstellingen af of ze hiertoe in staat zijn.

In het kort heb je twee opties om Gzip in te schakelen:

Optie A: Vind een host die Gzip standaard heeft ingeschakeld

Omdat wij om snelheid geven hebben wij Gzip ingeschakeld voor alle websites die bij Savvii gehost worden.

Optie B: Wijzig je serverinstellingen

We geven instructies voor Apache en NGINX. Bij Savvii gebruiken we NGINX. Als je host bij Savvii, is Gzip standaard ingeschakeld en controleer je gewoon je besparingen.

Apache

Zorg dat je in staat bent om het .htaccess-bestand te bewerken. Plak de volgende regels in je .htaccess-bestand NA alle andere regels in je bestand. Controleer ook of je de module ‘mod_filter’ laadt, anders zal de compressie niet werken en een 500 server error geven. Zoals je ziet specificeren deze regels de bestandstypes waar Gzip wordt toegepast en zorgen ze ervoor dat je compatibiliteit behoudt met enkele zeer oude browsers.

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

NGINX

Voor NGINX is het nog minder werk. Plak gewoon de volgende regels in je NGINX-configuratiebestand:

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;

Net zoals bij Apache specificeer je de bestandstypes waarop Gzip wordt toegepast en zorg je dat je Gzip niet gebruikt voor echt antieke browserversies.

Controleer je besparingen op bestandsgrootte

Na het veranderen van host of het aanpassen van je webserverinstellingen om Gzip te gebruiken controleer je jouw besparingen. Dit gaat het makkelijkste met de website CheckGzipCompression. Deze website geeft je statistieken over de vermindering in totale bestandsgrootte.

Voor Savvii.com bereikten we een reducering van 77% in bestandsgrootte door Gzip te gebruiken.

Besparingen met Gzip

Als je meer tips om de snelheid van WordPress te verhogen zoekt, lees dan alstublieft onze andere artikelen over laadtijd. Je kunt ook onze experts vragen een blik te werpen op je website.

Reageer