Blog

WordPress website sneller maken (2/5): Caching gebruiken

Om jouw WordPress website sneller te maken zijn heel veel technieken beschikbaar. In dit artikel gaan we kijken naar een ander laaghangende fruit: caching. 

Dit artikel hoort bij een reeks van 5 artikelen over WordPress performance optimalisatie:

  1. Afbeeldingen optimaliseren
  2. Caching gebruiken
  3. Code optimaliseren
  4. Server instellingen verbeteren
  5. Geavanceerde technieken

Wat is caching en waarom is het belangrijk?

Caching is een techniek waarbij bepaalde data opgeslagen wordt om opnieuw te kunnen worden gebruikt. Vaak bevindt deze data zich op een plek die snel te bereiken is. Caching wordt heel veel toegepast binnen vrijwel alle applicaties en dus ook bij een WordPress website.

Bron: https://medium.com/must-know-computer-science/system-design-caching-acbd1b02ca01

Zoals je hierboven kunt zien, zorgt caching ervoor dat bezoekers van jouw website een kopie krijgen van de webpagina die ze bezoeken en dat deze niet telkens opnieuw hoeft te worden gemaakt door de server. Dit is vooral bij een WordPress website relevant, omdat er veel verwerkingstijd nodig is om de individuele webpagina’s te genereren. Dat komt doordat WordPress gebruik maakt van PHP, wat een programmeertaal is die, i.c.m. een database, dynamisch pagina’s genereert.

Als je een verzoek doet voor een bepaalde pagina zal er dus eerst een script gaan lopen dat data opvraagt uit een database en vervolgens aan de hand daarvan de pagina genereert. Dan pas wordt de pagina naar jouw browser verzonden en kun je de webpagina bekijken. Dit proces neemt, afhankelijk van o.a. de snelheid van je server, behoorlijk wat tijd in beslag. Een cache is dus een plek waar deze voorgegenereerde pagina’s in zitten en waardoor dit hele proces overgeslagen kan worden.

“Het gebruik van caching kan zomaar seconden schelen op de laadtijd van een gemiddelde WordPress website”

Caching activeren op jouw WordPress website

In de handleidingen die ik schrijf probeer ik altijd om de oplossing toegankelijk te maken voor iedereen, dus ook hier zullen we gaan werken met een WordPress plugin. De plugin die ikzelf het liefst gebruik is WP Super Cache (https://nl.wordpress.org/plugins/wp-super-cache/). Met deze plugin kun je gemakkelijk zogeheten full-page caching aanzetten op jouw website. “Full-page” slaat op het feit dat de volledige pagina gecached wordt. Er zijn ook methodes waar alleen bepaalde onderdelen gecached worden of bepaalde PHP instructies. Full-page caching is echter de meest gebruikelijke vorm en levert ook direct het meeste resultaat op.

Nadat je de plugin hebt geïnstalleerd kun je onder “Instellingen > WP Super Cache” de caching inschakelen. In principe zal voor veel websites dit al prima werken en een goede snelheidswinst opleveren. Wanneer je de cache wilt legen kun je dit doen door op “Verwijder cache” te klikken in de bovenste balk in de backend en vervolgens op “Verwijder cache” te klikken.

Hoewel dit in de basis genoeg is voor een snellere website zijn er nog wel een paar dingen waar je op moet letten.

 

Verschillende valkuilen bij caching

Caching is een lastig iets om helemaal goed te begrijpen en er zijn verschillende problemen waar je tegenaan kunt lopen wanneer je hier niet veel ervaring mee hebt. Hieronder bespreek ik een paar vaak voorkomende problemen.

 

Niet altijd de nieuwste versie zien van je website

Wanneer je caching hebt ingeschakeld betekent dit ook dat je niet per se altijd de nieuwste versie ziet van de desbetreffende pagina. Als een pagina eenmaal gecached is zal deze niet zomaar meer updaten wanneer er een verandering plaatsvindt aan de website. Je kunt er daarom voor kiezen om onder het tabblad “Geavanceerd” onder “Diversen > Cache beperkingen” “Schakel caching uit voor ingelogde bezoekers” te selecteren. Dit zorgt ervoor dat als jij ingelogd bent, je altijd de nieuwste versie van de website ziet.

Een andere instelling om op te letten is “Geavanceerd > Wis alle cachebestanden wanneer een bericht of pagina wordt gepubliceerd of bijgewerkt”. Zorg ervoor dat deze is aangevinkt, zodat de cache wordt geleegd wanneer je een aanpassing doet aan de website. 

 

Dynamische pagina’s zorgen voor een hele grote cache

Sommige website maken gebruik van pagina’s waar heel veel verschillende versies van bestaan. Dit kan bijvoorbeeld te maken hebben met zogeheten query variabelen die je in het URL van de pagina kunt plaatsen. Een voorbeeld hiervan is: www.voorbeeld.nl/?naam=Jan&achternaam=Zoutendijk. Deze pagina heeft dus potentieel heel veel versies, omdat mensen die de website bezoeken met verschillende namen ook verschillende versies van de pagina krijgen te zien. Dit kan bijvoorbeeld voorkomen als iemand wordt doorverwezen na het invullen van een formulier. 

Om te voorkomen dat dit soort dynamische pagina’s een hele grote cache gaan vormen is het mogelijk om dit soort pagina’s niet te laten cachen door WP Super Cache. Dit kun je doen “Diversen > Don’t cache pages with GET parameters (?x=y at the end of a url)” aan te vinken.

“Elke website heeft een eigen cachingstrategie nodig, omdat dit afhankelijk is van de content van de website”

Actuele pagina’s niet cachen

Er zijn andere redenen waarom je een pagina liever niet cached. Een pagina die heel vaak verandert, bijvoorbeeld omdat er telkens nieuwe nieuwsitems of sociale media berichten worden weergegeven, wil je misschien liever niet cachen. Het risico is namelijk dat de bezoekers dan niet de nieuwste versie zien van deze pagina. De snelheidswinst staat dan wellicht niet in verhouding met het feit dat mensen niet de meest actuele versie krijgen te zien van de pagina. Je kunt dit handmatig instellen onder het kopje “Accepted Filenames & Rejected URIs”. Hier kun je bijvoorbeeld de voorpagina niet laten cachen.

 

Periodiek cache legen of juist niet?

Standaard wordt de cache eens in de 0.5 – 1 uur geleegd. Dit wordt gedaan om dezelfde reden als die hierboven is omschreven. Je wilt voorkomen dat bepaalde pagina’s die vaak vernieuwen outdated raken. Echter, het kan zijn dat jouw website geen pagina’s heeft die vaak wijzigen, of pas als je zelf een handmatige aanpassing doet in WordPress. Dan kun je overwegen om de caching niet periodiek te laten legen. Het voordeel hiervan is dat jouw website dan altijd snel is. De cache wordt namelijk opgebouwd wanneer iemand voor het eerst de pagina bezoekt. Wanneer de cache dan net geleegd is zal die persoon een tragere ervaring hebben. Wanneer jouw website niet zoveel bezoekers krijgt én niet gebruik maakt van vaak veranderende content, kan het een goed idee zijn om de cache dus niet automatisch te laten legen. Je kunt dit instellen onder “Expiry Time & Garbage Collection”. Je kunt hier de Cache-time-out op 0 seconden zetten, wat betekent dat deze niet leegt.

 

Geavanceerd: browsercaching instellingen aanpassen

Hiervoor hebben we gekeken naar zogeheten Full-page caching, waarmee we middels een plugin WordPress pagina’s toe hebben gevoegd aan de cache. Een andere vorm van caching die helpt bij het verbeteren van de snelheid van jouw website is browsercaching. 

Browsers (zoals Google Chrome) maken ook gebruik van een cache. Hier worden o.a. afbeeldingen, scripts en ook HTML pagina’s in opgeslagen. Dit betekent dat als je een pagina bezoekt waar je al eens eerder bent geweest je sneller een resultaat krijgt. Hoewel een browser dus standaard bepaalde bestanden cached kun je nog wel invloed uitoefenen op hoe lang dit gecached moet worden.

Aangezien de meeste statische bestanden, zoals afbeeldingen, niet vaak veranderen kun je de browser de instructie geven om deze bestanden langer in de cache op te slaan. Dit kun je op de meeste servers doen door de .htaccess aan te passen. Hiervoor moet je toegang hebben tot de server. Dit kan bijvoorbeeld met een FTP programma of soms kan het ook via het controlepaneel van de webhoster. In de folder waar ook jouw WordPress installatie staat, staat meestal (hangt af van de servertechniek die wordt gebruikt) een bestand genaamd .htaccess. Je kunt de volgende code toevoegen aan de bovenkant van dit bestand om de caching tijd te verhogen naar 1 jaar:

 

<IfModule mod_headers.c>
  <FilesMatch “\.(ico|pdf|jpg|jpeg|png|gif|js|css)$”>

     Header set Cache-Control “max-age=31536000, public”

  </FilesMatch>

</IfModule>

<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 text/css “access 1 year”
ExpiresByType text/html “access 1 year”
ExpiresByType application/pdf “access 1 year”
ExpiresByType text/x-javascript “access 1 year”
ExpiresByType image/x-icon “access 1 year”

</IfModule>

 

Het .htaccess bestand kan via een FTP programma aangepast worden

 

Hoe leeg ik de browsercache?

Als bestanden langer vastgehouden worden door de browser krijg je, net zoals we zagen bij de Full-page cache, het probleem dat je niet altijd de nieuwste versie van de website te zien krijgt. Dit komt vooral voor als er aanpassingen zijn gedaan aan de styling van de website (CSS) of de Javascript code. Dit kan bijvoorbeeld voorkomen wanneer een template wordt geupdate. Vaak zal het zo zijn dat het thema ervoor zorgt dat de browsercache automatische wordt geleegd, maar als dat niet gebeurt kun je zelf handmatig je browsercache leegmaken met de volgende commando’s (in Google Chrome), wanneer je in een browser de desbetreffende pagina aan het bezoeken bent:

  • Windows: Ctrl + F5
  • Mac: Command + Shift + R


Conclusie

Zoals je kunt lezen is het instellen van een Full-page caching voor jouw WordPress website niet moeilijk. Echter, het kan wel lastig zijn om te bepalen welke onderdelen van je website je wilt cachen en voor hoe lang. Ook moet je je ervan bewust zijn dat er caching wordt gebruikt en daarom bepaalde dingen niet helemaal werken zoals je zou verwachten. 

Hopelijk helpt je dit weer een stapje verder bij het optimaliseren van jouw website! Neem gerust contact met mij op bij vragen. 

In het volgende artikel ga ik kijken naar een andere belangrijke factor van WordPress performance optimalisatie: Code optimalisatie. Je leest het hier. 

Deel bericht

Over Jan Zoutendijk

Jan bouwt al sinds de 20e eeuw websites. Hij neemt ondernemingen graag onder de loep en kijkt hoe hij hun online aanwezigheid kan verbeteren. Zijn specialisaties zijn strategie en development.

Jouw project een keer bespreken?

Een website kan zoveel meer zijn dan alléén een website. Ontdek hoe ook jij je bezoekers een positieve online ervaring kan bieden middels een kosteloos en vrijblijvend kennismakingsgesprek. 

/ 5250+ klanten