Als je ooit je website door Google PageSpeed Insights of Pingdom hebt gehaald, dan heb je waarschijnlijk de grote gele ‘Leverage Browser Caching’-waarschuwing gezien En dat is waarschijnlijk de reden dat je hier bent beland. Vandaag duiken we in deze waarschuwing en kijken we dat deze betekent, welke effecten deze heeft, en wat je opties zijn met betrekking tot je WordPress-site.

Wat is de ‘Leverage browser caching’-waarschuwing?

De ‘leverage browser caching’-waarschuwing, zoals te zien in onderstaand screenshot, heeft betrekking op je browsercache. Wanneer je een website bezoekt, download je computer of ander apparaat de assets – de HTML, CSS, JavaScript en afbeeldingen – naar de lokale cache van je browser. Op deze manier hoeft hij dat niet elke keer te doen wanneer je de pagina bezoekt. De waarschuwing wordt gegenereerd wanneer je webserver, of een server van een derde partij, niet de juiste HTTP-cacheheaders heeft geïmplementeerd. Daarnaast is er nog de mogelijkheid dat de header wel bestaat, maar dat de cachetijd te kort is ingesteld.

Stel een verloopdatum of -tijd in in HTTP-headers

Stel een verloopdatum of -tijd in in HTTP-headers

Je kunt deze waarschuwing ook te zien krijgen in de nieuwe “Think with Google” websitesnelheidstest, welke wordt aangedreven door Google PageSpeed Insights. Dit was ontworpen als een soort marketingtool door Google, maar veel klanten sturen de foutmeldingen simpelweg door naar hun webmasters. Dit heeft als resultaat dat WordPress-ontwikkelaars en -ontwerpers op zoek zijn naar manieren om deze foutmelding te verhelpen om hun klanten gerust te stellen.

“Think with Google” snelheidstest

“Think with Google” snelheidstest

Nu we het toch hebben over Google PageSpeed Insights, zorg ervoor dat je deze gedetailleerde handleiding hebt gelezen –> Hoe scoor je een 100/100 op Google PageSpeed Insights met WordPress

De ‘Leverage Browser Caching’-waarschuwing verhelpen in WordPress

Als het aankomt op het verhelpen van de ‘Leverage Browser Caching’-waarschuwing zijn er een aantal verschillende scenario’s die je meestal tegenkomt als WordPress-gebruiker. Meest voor de hand liggend is dat je webserver niet goed is geconfigureerd. Het tweede, meer ironische scenario is dat het script van Google Analytics de waarschuwing veroorzaakt. En het derde scenario is dat een script van een derde partij de waarschuwing veroorzaakt. Bekijk hieronder wat je opties zijn.

1. Browser-caching activeren op je server

De meest voorkomende reden van de ‘Leverage Browser Caching’-waarschuwing is dat je webserver niet de juiste headers heeft. In het onderstaande screenshot van Google PageSpeed Insights zie je dat de waarschuwing wordt getoond, omdat de vervaldatum niet is ingesteld. Als het aankomt op caching zijn er twee methodes die worden gebruikt, Cache-Control-headers en Expires-headers. Waar de Cache-Control-header caching inschakelt aan de kant van de gebruiker en de maximale verlooptijd van een middel instelt, wordt de Expiry-header gebruikt om een specifiek moment in te stellen waarna het middel niet meer valide is.

‘Leverage Browser Caching’-waarschuwing in Google PageSpeed Insights

‘Leverage Browser Caching’-waarschuwing in Google PageSpeed Insights

Laten we bekijken hoe je deze headers kunt instellen op je webserver Let op: Je hebt niet noodzakelijk beide headers nodig, omdat de twee headers elkaar overbodig maken. Cache-Control is nieuwer en daarom de aanbevolen methode, maar sommige webperformancetools zoals GTmetrix controleren echter nog steeds op Expires-headers. Dit zijn allemaal voorbeelden, je kunt aanpassingen maken aan de bestandstypes, verlooptijden, enz. afhankelijk van wat je nodig hebt.

Belangrijk! Het bewerken van het .htaccess-bestand op Nginx of Apache kan je site onbruikbaar maken als je het niet goed doet. Als je je niet comfortabel voelt met het bewerken van kernbestanden, neem dat eerst contact op met je host of een ontwikkelaar.

Cache-Control-header toevoegen in Nginx

Je kunt een Cache-Control-header toevoegen in Nginx door het volgende toe te voegen aan de locatie of het blok van je serverconfiguratie:

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
 expires 30d;
 add_header Cache-Control "public, no-transform";
}

Wat doet de bovenstaande code precies? Simpel gezegd vertelt het de server dat de bestandstypes niet gaan veranderen voor tenminste dertig dagen. Dus in plaats van constant dezelfde middelen te laden, cachet hij deze op je computer. Op deze manier laadt de pagina sneller bij je volgende bezoek.

Expires-header toevoegen in Nginx

Je kunt een Expires-header toevoegen in Nginx door het volgende toe te voegen aan het blok van je serverconfiguratie: in dit voorbeeld kun je zien hoe je verschillende vervaltijden instelt voor verschillende bestandstypes.

    location ~*  \.(jpg|jpeg|gif|png|svg)$ {
        expires 365d;
    }

    location ~*  \.(pdf|css|html|js|swf)$ {
        expires 2d;
    }

Cache-Control-header toevoegen in Apache

Je kunt een Expires-header toevoegen in Apache door het volgende toe te voegen aan je .htaccess-bestand: Stukjes code kunnen worden toegevoegd boven- of onderaan het bestand (voor ‘#BEGIN WordPress’ of na ‘#END WordPress’).

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"

Expires-header toevoegen in Apache

Je kunt een Expires-header toevoegen in Apache door het volgende toe te voegen aan je .htaccess-bestand:

## EXPIRES HEADER CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

## EXPIRES HEADER CACHING ##

Als je een klant bent bij Kinsta, hoef je je niet druk te maken over het toevoegen van deze headers. Deze staan al op hun plaats op al onze Nginx-servers. En onthoud, als je een CDN-provider gebruikt zoals KeyCDN zijn deze headers waarschijnlijk al toegevoegd aan je assets.

Je kunt je headers controleren in het netwerkpaneel van Chrome DevTools of door simpelweg je WordPress-site opnieuw door Google PageSpeed Insights te halen om er zeker van te zijn dat de waarschuwing weg is.

HTTP-cacheheaders

HTTP-cacheheaders

2. ‘Leverage Browser Caching’ en Google Analytics

De op een na meest voorkomende oorzaak van ‘leverage browser caching’-waarschuwingen komen van Google Analytics. Dit is vrij ironisch aangezien dit een script van Google zelf is. Het probleem is dat het een lage cachetijd van 2 uur instelt op hun eigen asset, zoals je kunt zien in het screenshot hieronder. Ze doen dit waarschijnlijk, omdat ze zo snel mogelijk verandering bij alle gebruikers willen doorvoeren wanneer ze, om wat voor reden dan ook, iets aanpassen.  Er is echter een manier om dit te omzeilen, en dat is om het Google Analytics script op je eigen server te hosten. Wees er echter van bewust dat dit niet wordt ondersteunt door Google.

Cachen van Google Analytics

Cachen van Google Analytics

Er is een geweldige plug-in genaamd Complete Analytics Optimization Suite, gemaakt door Daan van den Bergh, die je in staat stelt om Google Analytics lokaal te hosten op je WordPress-site.

CAOS plug-in

CAOS plug-in

Je kunt de plug-in downloaden vanuit de WordPress-bibliotheek of door ernaar te zoeken onder “Add New” in het plug-ins-tabblad van je WordPress-dashboard. De plug-in stelt je in staat om het Google Analytics JavaScript-bestand (analytics.js) lokaal te hosten en het up-to-date te houden met wp_cron(). Andere features zijn onder andere de mogelijkheid om gemakkelijk IP-adressen van je gebruikers te anonimiseren, een aangepast bouncepercentage in te stellen en om het script te verplaatsen (header of footer).

Sommige extra voordelen van het lokaal hosten van je eigen Analytics-script zijn dat je het aantal externe HTTP-verzoeken naar Google kan verminderen van twee naar één en dat je nu volledige controle hebt over de caching van het bestand. Dit betekent dat je de cache-headers kunt gebruiken die we je hierboven hebben laten zien.

Installeer simpelweg de plug-in, voer je Google Analytics Tracking ID in, en de plug-in voegt de benodigde tracking-code toe aan je WordPress-website, downloadt en slaat het analytics.je-bestand op op je server en houdt het up-to-date met een ingepland script in wp_cron(). We raden ook aan om deze te laten laden vanuit de footer. Let op: deze plug-in zal niet werken met andere WordPress-plug-ins voor Google Analytics.

Lokaal gehoste Analytics-instellingen

Lokaal gehoste Analytics-instellingen

3. Hoe zit het met scripts van een derde partij?

Als je WordPress-site je bedrijf is, heb je waarschijnlijk extra scripts van een derde partij om conversiepercentages bij te houden, A/B-testen uit te voeren, enz. Hier zitten misschien ook scripts bij zoals de Facebook conversion pixels, Twitter, CrazyEgg, Hotjar, enz. Helaas kun je deze scripts niet lokaal hosten, dus is er niet veel dat je kunt doen omdat je geen controle hebt over de assets van de derde partij. Maar voor kleine sites en bloggers kun je hoogstwaarschijnlijk de ‘leverage browser caching’-waarschuwing wegwerken door een van de bovenstaande aanbevelingen te volgen.

‘Leverage browser caching’-waarschuwing veroorzaakt door een script van een derde partij

‘Leverage browser caching’-waarschuwing veroorzaakt door een script van een derde partij

Sammenvatting

Er zijn een aantal opties beschikbaar wanneer je die vervelende ‘leverage browser caching’-waarschuwing probeert te verhelpen op je WordPress-site. De meeste mensen kunnen er helemaal vanaf komen. Onthoud, deze webperformancetools moeten gebruikt worden als richtlijn. We raden niet aan om te veel in te zitten over de scores, maar het wegwerken van waarschuwingen leidt in de meeste gevallen wel tot een snellere WordPress-website.

Heb je andere tips voor het verhelpen van de ‘leverage browser caching’-waarschuwing? Laat dan hieronder een reactie achter.

40
keer gedeeld