Gzip- of Brotli-compressie inschakelen in WordPress

Wanneer een browser een pagina van uw WordPress-site opvraagt, stuurt de server HTML, CSS, JavaScript en andere op tekst gebaseerde bestanden terug. Zonder compressie worden deze bestanden in hun volledige grootte verzonden. Door compressie in te schakelen kunnen deze bestandsgroottes met 70-90% worden verkleind, wat zich direct vertaalt in snellere paginalaadtijden en lagere bandbreedtekosten.

Hoe compressie achter de schermen werkt

Compressie berust op een onderhandeling tussen de browser en de server. Wanneer de browser een verzoek verstuurt, voegt hij een Accept-Encoding-koptekst toe waarin de compressiealgoritmen staan die hij ondersteunt, doorgaans gzip, deflate, br. De server controleert deze koptekst, comprimeert de respons met het beste beschikbare algoritme en stuurt deze terug met een Content-Encoding-koptekst die aangeeft welke methode is gebruikt. De browser decomprimeert vervolgens de inhoud voordat hij deze rendert. Dit hele proces is transparant voor de eindgebruiker.

Er zijn twee belangrijke compressiealgoritmen die u tegenkomt:

• Gzip: De industriestandaard al meer dan twee decennia. Ondersteund door elke browser en webserver. Compressieratio's van 70-80% zijn typisch voor op tekst gebaseerde bestanden.
• Brotli: Ontwikkeld door Google en uitgebracht in 2015. Biedt 15-25% betere compressieratio's dan Gzip bij vergelijkbaar CPU-gebruik. Ondersteund door alle moderne browsers. Werkt alleen via HTTPS-verbindingen.

Welke bestandstypen moeten worden gecomprimeerd

Compressie werkt het best op op tekst gebaseerde, repetitieve inhoud. U moet het inschakelen voor de volgende MIME-typen:

• Tekstbestanden: text/html, text/css, text/javascript, text/xml, text/plain
• Applicatiebestanden: application/javascript, application/json, application/xml, application/rss+xml, application/atom+xml
• Lettertypen en SVG's: image/svg+xml, font/ttf, font/otf (WOFF- en WOFF2-lettertypen zijn al gecomprimeerd)

Comprimeer geen binaire bestanden zoals JPEG, PNG, WebP, GIF, MP4 of PDF. Deze formaten gebruiken al hun eigen compressiealgoritmen, en hercomprimeren verspilt CPU zonder de bestandsgrootte te verkleinen.

Verwachte besparingen op grootte

Om u een concreet beeld te geven van wat compressie bereikt, hier enkele praktijkvoorbeelden:

• Een typische WordPress HTML-pagina (80 KB): Comprimeert tot ongeveer 15-20 KB met Gzip, of 12-16 KB met Brotli.
• jQuery-bibliotheek (90 KB geminified): Comprimeert tot ongeveer 30 KB met Gzip, of 25 KB met Brotli.
• Bootstrap CSS (160 KB): Comprimeert tot ongeveer 25 KB met Gzip, of 20 KB met Brotli.
• Een grote JSON API-respons (500 KB): Comprimeert tot ongeveer 50-80 KB met Gzip.

Over een hele WordPress-site verlaagt het inschakelen van compressie de totale overdrachtsgrootte doorgaans met 60-80%.

Apache: Gzip inschakelen met mod_deflate

Als uw WordPress-site op Apache draait (wat bij de meeste shared hostingproviders het geval is), voeg dan het volgende toe aan uw .htaccess-bestand. Plaats het voor de WordPress-rewriteregels:

<IfModule mod_deflate.c>
    # Compress HTML, CSS, JavaScript, Text, XML and fonts
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/json
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom+xml
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/woff

    # Remove browser bugs for older browsers
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

    # Make sure proxies deliver the correct content
    Header append Vary Accept-Encoding
</IfModule>

De IfModule-wrapper zorgt ervoor dat deze configuratie alleen wordt toegepast als mod_deflate is geïnstalleerd. Bij de meeste hostingproviders is deze standaard ingeschakeld. Als u een 500 Internal Server Error krijgt na het toevoegen van deze code, neem dan contact op met uw host om te bevestigen dat mod_deflate beschikbaar is.

Nginx: Gzip-compressie inschakelen

Als uw server op Nginx draait, voeg dan de volgende directieven toe aan uw serverblok of het http-blok in uw nginx.conf-bestand:

gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_min_length 256;
gzip_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/x-javascript
    application/xml
    application/xml+rss
    application/atom+xml
    image/svg+xml
    font/ttf
    font/otf;

Een paar opmerkingen over deze instellingen: gzip_comp_level 6 biedt een goede balans tussen compressieratio en CPU-gebruik. Niveaus boven 6 leveren afnemende rendementen op terwijl ze de CPU-belasting aanzienlijk verhogen. De directive gzip_min_length 256 voorkomt compressie van zeer kleine bestanden waarbij de overhead van compressie groter is dan de besparing. De directive gzip_vary on vertelt cachende proxy's om afzonderlijke versies op te slaan voor gecomprimeerde en niet-gecomprimeerde inhoud.

Nginx: Brotli-compressie inschakelen

Brotli zit niet in het standaard Nginx-pakket. U moet de ngx_brotli-module apart installeren, of een distributie gebruiken die het bevat (veel moderne Linux-distributies bieden het aan als optioneel pakket). Voeg na installatie dit toe aan uw Nginx-configuratie:

brotli on;
brotli_comp_level 6;
brotli_min_length 256;
brotli_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/x-javascript
    application/xml
    application/xml+rss
    application/atom+xml
    image/svg+xml
    font/ttf
    font/otf;

U kunt Gzip en Brotli tegelijkertijd uitvoeren. Nginx serveert Brotli aan browsers die het ondersteunen en valt terug op Gzip voor de rest. Dit is de aanbevolen opzet voor maximale compatibiliteit.

WordPress-plugins die compressie afhandelen

Als u geen toegang heeft tot serverconfiguratiebestanden (gebruikelijk bij shared hosting), kunnen verschillende WordPress-cachingplugins compressie voor u inschakelen:

• WP Rocket: Voegt automatisch Gzip-compressieregels toe aan uw .htaccess-bestand bij activering. Geen aanvullende configuratie nodig. Dit is een premium plugin.
• LiteSpeed Cache: Als uw host de LiteSpeed-webserver gebruikt, schakelt deze plugin compressie in op serverniveau, wat efficiënter is dan Apache's mod_deflate. Gratis en beschikbaar in de WordPress-pluginrepository.
• W3 Total Cache: Biedt Gzip-compressie als onderdeel van de Browser Cache-instellingen. Schakel het in onder Performance > Browser Cache > HTTP compression. Gratis, maar kent een steilere leercurve.
• WP Super Cache: Bevat een optie "Compress pages" die vooraf gecomprimeerde statische bestanden aanbiedt. Eenvoudiger dan W3 Total Cache maar met minder opties.

Houd er rekening mee dat als uw hostingprovider compressie al op serverniveau inschakelt, het opnieuw toevoegen via een plugin geen extra effect heeft. Controleer dit eerst voordat u wijzigingen aanbrengt.

Hoe u kunt testen of compressie werkt

Nadat u compressie heeft ingeschakeld, moet u verifiëren dat deze daadwerkelijk wordt toegepast. Hier zijn verschillende methoden:

• Browser DevTools: Open uw site, druk op F12 om DevTools te openen, ga naar het tabblad Netwerk en herlaad de pagina. Klik op een HTML-, CSS- of JS-verzoek en kijk naar de respons-koptekst. U zou Content-Encoding: gzip of Content-Encoding: br moeten zien. U kunt ook de kolom "Size" (gecomprimeerde overdrachtsgrootte) vergelijken met de kolom "Content" of "Resource" (werkelijke gedecomprimeerde grootte).
• Online tools: Websites zoals GTmetrix, Google PageSpeed Insights en de compressiechecker van KeyCDN kunnen verifiëren dat uw site gecomprimeerde inhoud serveert. Ze markeren niet-gecomprimeerde bronnen als die worden gevonden.
• Commandoregel: Als u toegang heeft tot een terminal, kunt u curl -H "Accept-Encoding: gzip" -I https://uwsite.nl gebruiken om de respons-koptekst te zien. Zoek naar de Content-Encoding-koptekst in de uitvoer.
• InspectWP-scan: Voer een nieuwe InspectWP-scan uit nadat u compressie heeft ingeschakeld. De prestatiesectie toont de waarde van Content-Encoding. Deze moet gzip of br (Brotli) tonen in plaats van leeg of ontbrekend te zijn.

Veelvoorkomende problemen oplossen

Als compressie na wijzigingen niet lijkt te werken, controleer dan het volgende:

• CDN-overschrijving: Als u een CDN zoals Cloudflare gebruikt, kan het CDN compressie onafhankelijk van uw serverinstellingen afhandelen. Cloudflare schakelt Gzip standaard in en biedt Brotli als schakelaar in de Speed-instellingen.
• Servermodule niet geladen: Op Apache moet mod_deflate ingeschakeld zijn. Neem contact op met uw hostingprovider als u het niet zeker weet. Op Nginx vereist de Brotli-module aparte installatie.
• Conflicterende regels: Meerdere plugins of .htaccess-regels die compressie proberen in te stellen kunnen conflicteren. Controleer op dubbele mod_deflate-blokken in uw .htaccess-bestand.
• Proxy- of cachelaag: Reverse proxy's zoals Varnish kunnen compressiekoppen verwijderen of wijzigen. Zorg ervoor dat elke laag in uw stack correct is geconfigureerd.