Site optimalisatie: caching (stap 2/3)

Gewijzigd op Thu, 17 Feb 2022 om 02:28 PM

Wat is caching?

In onze handleiding over front-end optimalisatie raken we het onderwerp 'caching' al even aan. We beschrijven hier ook in hoe een verzoek aan een website afgehandeld wordt. Bij een bezoek aan een pagina zonder caching moet alle informatie die je wilt ontvangen opgevraagd worden via verschillende bestanden, databases en externe bronnen. Net als een magazijnmedewerker die op verschillende plekken zijn bestellingen moet pakken kan dit wat tijd in beslag nemen. De oplossing: caching. Caching zorgt er in zijn basisvorm voor dat alle aanvragen al in pakketjes klaar liggen, binnen handbereik, om aan de websitebezoeker uit te geven. Let er wel op dat wanneer je nieuwe berichten plaatst op je site dat de pakketjes natuurlijk vernieuwd worden, anders zit jouw nieuwe inhoud er niet in. In dit geval moet de cache worden geleegd en kan deze vervolgens weer worden gevuld.

Caching kan op verschillende lagen gebeuren. Ten eerste hebben al onze websites bij Savvii de mogelijkheid om Varnish caching te gebruiken. Dit is caching die op de server zelf plaats vindt. Daarnaast zijn er extra cachinglagen die door plugins voor Wordpress toegevoegd kunnen worden. Als laatste heeft de bezoeker van je site ook nog een lokale browsercache. In deze handleiding richten we ons alleen op de eerste twee, aangezien browsercaching een vak apart is.

Wordpress caching plugins in de Wordpress Codex.

Varnish caching

Varnish is een open-source caching oplossing die wij op al onze servers hebben draaien. Alle sites kunnen en mogen hier gebruik van maken, maar we merken dat dit niet altijd gebeurt. Dit komt omdat websites heel erg persoonlijk worden gemaakt voor alle bezoekers en dus specifiek aangemaakte inhoud willen aanleveren. Terugkomend op de pakketjes die de server klaarmaakt om aan de bezoekers te geven, kun je je misschien voorstellen dat dit niet werkt als elk pakketje toch weer iets speciaals moet hebben voor elke bezoeker. Denk hierbij aan webshops met voor elke bezoeker een apart winkelmandje. Soms gebeurt dit dus bewust (zoals bij de webshops), maar ook werkt de varnish cache soms onbewust niet omdat er een plugin is die dit blokkeert. Het is goed om te controleren of de varnish cache actief is.

Controleren of je site succesvol Varnish caching gebruikt

Wij geven headers mee aan de pagina's die onze servers uitgeven. De headers kun je nakijken door de developer tools van je browser te openen en daar de headers te bekijken. Het verschilt per browser waar je deze developer tools kan vinden. Voor Google Chrome vind je als voorbeeld een afbeelding onderaan dit artikel. Onze header die aangeeft of Varnish gebruikt wordt ziet er als volgt uit:

X-Varnish-Cache:HIT

Als deze header als reactie HIT geeft, dan is de pagina voorzien van onze Varnish caching. Als je hier MISS ziet dan is de pagina niet door Varnish uitgegeven. Dit kan gebeuren als dit de eerste keer is dat de pagina bekeken wordt, in welk geval je de pagina kan verversen en de headers nog een keer kan nakijken. Als je dan nogmaals een MISS ziet staan dan is er waarschijnlijk iets dat de Varnish caching blokkeert. Dit kan verschillende oorzaken hebben, maar de meest voorkomende is een PHP Sessie cookie. Deze cookies maken dat elke pagina uniek wordt voor elke bezoeker en Varnish dus niet gebruikt wordt. Je kunt controleren of deze cookie gebruikt wordt door weer naar de headers te kijken, maar ditmaal zoek je:

Set-Cookie:PHPSESSID=######**********************

Zie je deze header staan? Dan maakt een onderdeel van je website hier gebruik van. Denk aan social media plugins of andere plugins die unieke inhoud aan klanten aanbieden. In dat geval kun je op zoek gaan naar het betreffende thema of de plugin en kijken of je deze functie uit kan schakelen. Er is geen 'makkelijke' manier om te achterhalen welk onderdeel van je site de PHP sessie cookie gebruikt (zie ook deze pagina).

De developer tools van Google Chrome (druk op de F12 toets). Hier vind je de headers van de site die je bezoekt.

Plugin caching

Varnish zorgt voor complete pagina caching en doet dit dus niet voor unieke bezoekers. Nu zijn alle ingelogde bezoekers uniek, dus de backend van je site wordt niet door Varnish gecached. Hiervoor (en voor andere meer geavanceerde caching mogelijkheden) kun je caching plugins gebruiken, zoals:

W3 Total Cache: gebruik je als je site op een VPS One of hoger staat en je gebruik wilt maken van het werkgeheugen van je private server. Dit werkgeheugen is sneller in het uitgeven van gecachede bestanden dan een standaard caching op harde schijf (op ons shared platform). In dit blogartikel vind je de verschillende instellingen die je kan gebruiken voor deze plugin.

WP Rocket: gebruik je voor de wat meer simpele caching en is in het Nederlands beschikbaar. WP Rocket heeft een "preloading" of "polling" functie waarbij de verschillende pagina's van je site door een bot bezocht worden, zodat deze in de cache geladen worden. Kijk hiermee uit en gebruik dit niet op grote (webwinkel)sites die al traag reageren. Hierdoor kan de site zichzelf aanvallen en kapot gaan. Lees dit blogartikel voor de standaardinstellingen en mogelijkheden van WP Rocket.

Naast deze twee plugins zijn er nog veel meer te vinden in de Wordpress codex. Voor alle caching plugins geldt: test en vergelijk! Alle sites verschillen, dus elke caching plugin kan een ander effect hierop hebben. Experimenteer dus met de instellingen om tot de beste prestaties te komen.