Heb je je WordPress website net door een snelheidstest gehaald, en kreeg je als resultaat dat je een Expires headers moet toevoegen aan je WordPress website?
Expires headers helpen je om gebruik te maken van browsercaching, waardoor de laadtijden van je website korter worden. Daarnaast horen ze ook bij de aanbevelingen van YSlow, waardoor ze dus je score voor prestaties beïnvloeden in tools zoals GTmetrix.
In dit artikel leggen we uit wat Expires headers zijn en wat ze voor je website kunnen betekenen. Vervolgens laten we je stapsgewijs zien hoe je Expires header kan toevoegen binnen WordPress, op verschillende manieren.
Maar eerst moeten we even een onderliggend onderwerp uitleggen, namelijk browsercaching.
Wat is browsercaching?
Voordat we het echt gaan hebben over Expires headers, moet je eerst het principe achter browsercaching goed begrijpen. Dit is belangrijk omdat Expires header je vooral helpen om browsercaching te implementeren en beheren. Weet je dus niet goed wat browsercaching is, dan zal je ook de toegevoegde waarde van Expires header niet zien.
Kort gezegd zorgt browsercaching ervoor dat je website de browser van een bezoeker vertelt dat bepaalde bestanden op de lokale computer opgeslagen moeten worden, en dat die lokale bestanden bij toekomstige bezoeken gebruikt moeten worden. Zo wordt voorkomen dat bestanden bij elk bezoek opnieuw van je server gedownload moeten worden.
Doordat je een bestand niet aldoor opnieuw hoeft te downloaden, worden de laadtijden van je website korter en het datagebruik minder.
Laten we als voorbeeld naar het logo van je website kijken. Je logo is precies hetzelfde op elke pagina binnen je website, dus het slaat nergens op dat je bezoekers hetzelfde bestand voor elke pagina opnieuw moeten downloaden. Met browsercaching kan je dat logobestand inderdaad op laten slaan op de lokale computer van je bezoekers. Een bezoeker moet nog steeds je logo downloaden bij hun eerste bezoek. Maar bij de daaropvolgende bezoeken en pagina’s kan het bestand gewoon geladen worden vanuit hun eigen browsercache.
Wat zijn Expires headers?
Expires headers maken de browser van je bezoeker duidelijk of een bepaalde resource geladen moet worden vanuit de browsercache, zoals hierboven uitgelegd, of dat er een nieuwe versie van de webserver gedownload moet worden.
Specifieker kan je er een vervaltijd mee instellen voor de gecachete versie van bestandstypen, waarna dat bestand vervalt (‘expires’) en de browser het opnieuw moet downloaden van de server.
Laten we een voorbeeld bekijken…
Stel dat je het gedrag voor browsercaching van PNG afbeeldingen op je website wil bepalen. Wanneer je de Expires headers voor PNG bestanden op één maand zet, zullen de browsers van je bezoekers:
- De reeds gedownloade versie vanuit de cache laden gedurende één maand na het eerste bezoek/download.
- Het bestand opnieuw downloaden van de server na één maand.
Je kan verschillende Expires headers instellen voor verschillende bestandstypen, waardoor je de browsercaching voor je site erg gedetailleerd kan instellen.
Expires Headers vs cache-control
Expires headers zijn één manier om browsercaching te controleren binnen WordPress, maar niet de enige manier. Een andere techniek heet cache-control.
Cache-control is een modernere techniek met wat meer flexibiliteit voor het beheren van caching. Daarom gebruiken tegenwoordig veel websites cache-control, waaronder wij hier bij Kinsta via onze custom Nginx configuratie.
Maar Expires headers bieden alles wat de meeste websites nodig hebben, dus het is een goede standaardoptie om browsercaching mee te beheren. Je kan ze ook allebei tegelijk gebruiken, waarbij de cache-control headers in de meeste gevallen voorrang krijgen. Wanneer je beide gebruikt, moet je erop letten dat je wel dezelfde vervaltijden gebruikt.
Wil je meer lezen over hoe je cache-control kan gaan gebruiken bij WordPress, lees dan onze gids over hoe je browsercaching kan gebruiken in WordPress.
Zo los je de melding “Add Expires Headers” op in WordPress
Tijd om te beginnen aan de praktische uitleg, waarbij we je precies laten zien hoe je Expires headers kan instellen bij WordPress.
Maar eerst hebben we nog wat goed nieuws. Wanneer je gehost wordt bij Kinsta, hoef je de Expires headers helemaal niet in te stellen, want dan regelen wij dat automatisch voor je. We hebben zowel onze servers als ons geïntegreerde Content Delivery Network (CDN) zo ingesteld dat ze standaard browsercaching gebruiken, dus je hoeft hier zelf niks meer aan te doen.
Heb je een andere host, dan kan je wel de Expires headers toevoegen aan je WordPress website. Je kan dit doen via je eigen stukje code op het niveau van de server (Nginx of Apache) of via een wat meer gebruiksvriendelijke WordPress plugin.
Zo voeg je Expires headers toe via .htaccess op een Apache webserver
Wanneer je webhost een Apache webserver gebruikt, kan je de Expires headers toevoegen via het .htaccess bestand, te vinden in de root map van je server (dezelfde map waar je ook het wp-config.php bestand vindt).
Dit is wat je moet gaan doen:
- Maak verbinding met je server via FTP via je FTP client
- Vind het .htaccess bestand in de root map
- Download een back-up van het .htaccess bestand naar je computer. Mocht er dan iets misgaan, dan kan je altijd de back-up gebruiken om alles terug te zetten.
- Voeg het stukje code hieronder toe bovenaan het bestand
## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
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"
</IfModule>
## EXPIRES HEADER CACHING ##De standaardwaarden zullen prima werken voor de meeste websites, maar je kan de vervaltijden naar wens aanpassen voor bepaalde bestandstypen in het stukje code.
Zo voeg je Expires headers toe via het config bestand op een Nginx webserver
Wanneer je host een Nginx webserver gebruikt, dan kan je de Expires headers instellen door het configuratiebestand van je server aan te passen. Hoe je dit bestand precies kan bewerken hangt af van je host, dus je kan het beste contact opnemen met de ondersteuning van je host wanneer je er niet uit komt.
Kinsta gebruikt ook de Nginx webserver, maar zoals gezegd hebben we alles al voor je geregeld, dus je hoeft zelf niks meer te doen.
Voor het bestand moet je dit stukje code gebruiken:
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}Je kan de vervaltijden voor verschillende bestandstypen naar wens aanpassen.
Zo voeg je Expires headers toe met een WordPress plugin
Wanneer je liever niet zelf de code voor de Expires headers wil toevoegen, dan zijn er ook genoeg WordPress plugins te vinden die dit eenvoudig voor je kunnen regelen. Sommige plugins voegen Expires headers toe, andere juist de cache-control. Bij allebei is het resultaat dat je WordPress website voortaan browsercaching kan gebruiken.
Een mogelijke oplossing is het gebruiken van een cachingplugin, als je host nog geen caching voor je heeft geïmplementeerd. Een goede keuze hiervoor is WP Rocket, die ook volledig compatibel is met Kinsta. Zodra je de WP Rocket plugin activeert, schakelt het meteen browsercaching voor je in, zonder dat je iets met de instellingen hoeft te doen.
Er zijn ook nog andere caching plugins waarmee je Expires headers en/of browsercaching kan implementeren, zoals:
Wanneer je de caching van je website al hebt geregeld en een meer specifieke plugin zoekt, dan zijn dit twee goede gratis plugins:
De Leverage Browsercaching plugin heeft geen instellingen, je activeert de plugin gewoon en de rest gaat automatisch.
De Add Expires Headers plugin daarentegen maakt het mogelijk om Expires headers voor verschillende bestandstypen in te stellen, via het nieuwe Add Expires Headers deel binnen je WordPress dashboard dat verschijnt na het activeren:
Zo test je of de Expires header werken
Om te testen of je Expires header goed ingesteld zijn, kan je deze gratis tool van GiftOfSpeed gebruiken. Zodra je de URL van je website invoert zal de tool je twee dingen melden:
- De cache vervaltijd voor alle bestanden op je website.
- Het cache type, dit zou Expires headers moeten zijn aangezien je deze methode hebt gebruikt, maar het kan ook cache-control zijn als je je website anders hebt ingesteld.
Je kan je website ook door een andere snelheidstest halen, zoals GTmetrix, en controleren of je nog steeds de melding “Add Expires headers” krijgt.
Zo test je de Expires headers via de Terminal
Wil je de Expires headers testen op een meer technische manier, dan kan je een “curl” verzoek sturen naar een statische asset van je website via de Terminal, en de HTTP headers direct bekijken. Als je Expires of cache-control regels bijvoorbeeld ook ingesteld zijn voor CSS bestanden, dan kan je een “curl” verzoek zoals hieronder doen.
curl -I https://kinstalife.com/wp-includes/css/dist/block-library/style.min.cssIn ons geval krijgt het “curl” verzoek naar style.min.css de onderstaande reactie.
HTTP/2 200
server: nginx
date: Wed, 27 Jan 2021 01:11:05 GMT
content-type: text/css; charset=UTF-8
content-length: 51433
last-modified: Tue, 12 Jan 2021 20:17:48 GMT
vary: Accept-Encoding
etag: "5ffe03ec-c8e9"
expires: Thu, 31 Dec 2037 23:55:55 GMT
cache-control: max-age=315360000
access-control-allow-origin: *
accept-ranges: bytes
x-edge-location-klb: HaIXowU1oNczJ391oDE9zVvZ7279840b5d30a89472f57253756b3e63Zoals je kan zien bevat de reactie zowel een “expires” als een cache-control header. Specifieker geeft de cache-control header een max-age van 315360000 seconden, oftewel één jaar.
Zo voeg je Expires headers toe voor externe scripts
Met de methoden die we hierboven hebben laten zien kan je de Expires headers instellen voor alle bestanden op de server van je WordPress website. Maar je kan nog niet de Expires header voor externe scripts instellen, zoals bijvoorbeeld Google Fonts, Google Analytics, enz.
Daarom zullen sommige snelheidstesten dit nog steeds als potentieel probleem aanmerken, ook al heb je de Expires header al via bovenstaande methoden toegevoegd.
Daarom enkele oplossingen voor veelgebruikte externe scripts:
Zo voeg je Expires headers toe voor Google Fonts
Veel WordPress website gebruiken Google Fonts voor custom lettertypen. Dit betekent meestal ook het laden van de lettertypen vanuit het CDN van Google, waardoor je de Expires headers niet kan instellen via de instellingen van je server.
Een makkelijke oplossing is het lokaal hosten van de bestanden voor het lettertypen, in plaats van het CDN van Google te gebruiken. Om dit te doen kan je de gratis Optimize My Google Fonts (OMGF) plugin via WordPress.org gebruiken.
Je kan ook onze volledige uitleg over het lokaal hosten van lettertypen in WordPress lezen om meer te weten te komen over de voordelen en nadelen van deze aanpak.
Zo voeg je Expires headers toe voor Google Analytics
Wanneer je problemen ziet die betrekking hebben op browsercaching en Google Analytics, dan kan je ervoor kiezen om het Google Analytics script lokaal te hosten, net zoals we net bij Google Fonts hebben laten zien.
Hier zijn enkele WordPress plugins die dit eenvoudig voor je kunnen doen:
- CAOS (Complete Analytics Optimization Suite)
- Perfmatters
- WP Rocket met de ingebouwde Google Tracking add-on.
Samenvatting
Expires headers helpen je om browsercaching te beheren voor verschillende bestandstypen binnen je WordPress website.
Tegenwoordig gebruiken veel websites cache-control headers in plaats van Expires header, omdat cache-control een modernere optie is met meer flexibiliteit. Maar Expires headers werken nog altijd prima voor het overgrote merendeel van de websites, en je kan ook de Expires header en cache-control tegelijkertijd gebruiken.
Verder zullen sommige snelheidstests je website een lagere score geven wanneer je geen Expires headers gebruikt, wat dan ook je voornaamste motivatie hiervoor zou kunnen zijn.
Wanneer je WordPress website gehost wordt door Kinsta hoef je niet na te denken over de Expires headers, aangezien wij alles al voor je geregeld hebben. Maar heb je een andere host, dan kan je de Expires headers toevoegen via de stukjes code hierboven, of via één van de genoemde plugins.
