Compressie en caching: zelf nakijken in tien minuten

Ze pakken twee verschillende problemen aan, en ze vullen elkaar aan.

• Compressie verkleint tekstbestanden voor ze verstuurd worden. Je html, css en javascript gaan er vaak drie tot vier keer kleiner door. De browser pakt ze weer uit, en de bezoeker merkt er niets van behalve dat het sneller gaat.
• Caching vertelt de browser hoelang hij een bestand mag bewaren. Zonder die instructie haalt hij je logo, je lettertypen en je stylesheets bij elk bezoek opnieuw op, ook al veranderden ze in geen maanden.

Samen raken ze precies de bezoekers die het meest tellen: mensen op mobiel en op een matige verbinding. De gemiddelde laadtijd op mobiel bedraagt 8,6 seconden, tegenover 2,5 seconden op desktop.

Je hebt hiervoor niets nodig behalve je browser. In Chrome of Edge:

1. Open je site en druk op F12 om de ontwikkelaarsvenster te openen.
2. Ga naar het tabblad Netwerk en herlaad de pagina.
3. Klik op het eerste item in de lijst, meestal je paginanaam.
4. Kijk bij de responsheaders naar content-encoding. Staat daar br of gzip, dan is compressie aan. Staat er niets, dan niet.
5. Kijk bij een afbeelding of stylesheet naar cache-control. Staat daar een max-age van enkele maanden, dan is caching goed ingesteld.

Klinkt technisch, maar het is vijf keer klikken. En je hebt daarna een concreet antwoord in plaats van een vermoeden.

Een snelheidstest zegt het ook, maar minder expliciet. Ze vermeldt aanbevelingen als "tekstcompressie inschakelen" of "efficiënt cachebeleid gebruiken". Dat zijn precies deze twee.

Niet alles verdient dezelfde bewaartermijn. Deze verdeling werkt voor vrijwel elke site.

Type bestand	Compressie	Cachetermijn
Html van je pagina's	Ja	Kort of geen, want inhoud verandert
Css en javascript	Ja	Lang, met versienummer in de bestandsnaam
Afbeeldingen	Nee, al gecomprimeerd	Lang
Lettertypen	Nee bij woff2	Zeer lang
Pdf's en downloads	Beperkt nut	Lang

De truc bij lange cachetermijnen is een versienummer in de bestandsnaam. Verandert je stylesheet, dan verandert de naam, en haalt de browser vanzelf de nieuwe op. Zonder die truc durft niemand lange termijnen instellen, uit angst dat bezoekers een oude versie blijven zien.

Wie het moet doen, hangt af van je opzet. In alle gevallen is het werk van minuten, niet van uren.

• Bij een gedeelde hosting staat compressie vaak al aan of is er een schakelaar in het configuratiescherm. Zo niet, vraag het gewoon aan de ondersteuning: "Kunnen jullie brotli- of gzip-compressie en cache-control headers activeren?"
• Bij WordPress regelt een cachingplugin allebei. Kies er één, niet drie, want meerdere cachingplugins botsen met elkaar.
• Bij een eigen server of een bouwer is dit een instelling in de webserverconfiguratie. Stuur je bouwer de twee headernamen door, dan weet hij meteen wat je bedoelt.
• Bij een CDN zet je het meestal aan in het dashboard van die dienst.

Test na de wijziging opnieuw met dezelfde vijf klikken. En let op: schakel je caching agressief in, wis dan je cache na elke sitewijziging, anders zie je je eigen aanpassingen niet.

Verwacht een merkbaar snellere eerste weergave en een veel snellere tweede pagina, omdat de browser dan al veel in huis heeft. Op mobiel is dat verschil het grootst.

Wat het niet oplost: een trage server, zware afbeeldingen, of een stapel scripts van cookiebanners en chatwidgets. Compressie maakt een script van 300 kilobyte kleiner om te versturen, maar de browser moet het nog altijd uitvoeren.

Toch is dit bijna altijd de eerste stap, want de verhouding tussen moeite en resultaat is nergens beter. En elke tiende seconde telt: wanneer de laadtijd stijgt van 1 naar 3 seconden, neemt de kans dat een bezoeker meteen weer vertrekt toe met 32%, terwijl 53% van de mobiele bezoekers een website verlaat die langer dan 3 seconden laadt.

Wil je in één keer zien welke van deze technische punten bij jou nog openstaan, dan controleert de gratis marketing scan compressie, protocol en beveiligingsheaders samen met je zes andere pijlers.