Caching

Module 6: Snelheid · Leestijd: 9 minuten

Leerdoel: Na deze les kun je uitleggen welke soorten cache er zijn en een paginacache goed instellen en controleren.

Kernbegrippen: paginacache, browsercache, Cache-Control, objectcache, Redis, OPcache, CDN, cacheplugin, LiteSpeed Cache, uitzonderingen (ingelogd, winkelwagen, afrekenen), cache legen, dubbele cacheplugins

Cache: werk niet twee keer doen

Een cache bewaart het resultaat van werk, zodat het de volgende keer niet opnieuw hoeft. Bij een WordPress-site zijn er vier plekken waar dat gebeurt, van groot naar klein:

De paginacache

Les 1.2 liet het zien: zonder cache maakt WordPress bij elk bezoek de hele pagina opnieuw. Met een paginacache maakt de eerste bezoeker hem, en krijgen de volgende de opgeslagen HTML. Een TTFB van een seconde kan zo naar een paar honderdsten van een seconde gaan, en je pakket kan veel meer bezoekers tegelijk aan.

Hoe je een paginacache krijgt, hangt af van je webserver:

• LiteSpeed (veel gedeelde hosting, waaronder WebOké): de webserver heeft zelf een cache. De gratis plugin LiteSpeed Cache stuurt die aan vanuit WordPress: welke pagina's in de cache mogen, wanneer ze geleegd worden. Omdat de cache in de webserver zit, wordt PHP helemaal niet gestart voor een opgeslagen pagina.
• Apache of nginx: een cacheplugin die de HTML als bestanden opslaat, zoals WP Super Cache, W3 Total Cache of een betaalde plugin zoals WP Rocket. Of een cache die de hoster op serverniveau regelt.
• Beheerde WordPress-hosting heeft vaak een eigen cache; daar installeer je meestal geen cacheplugin.

Kies er één. Twee cacheplugins tegelijk (bijvoorbeeld LiteSpeed Cache en WP Rocket) zitten elkaar in de weg: dubbel werk, pagina's die niet worden geleegd, vreemde fouten. Op een LiteSpeed-server werkt LiteSpeed Cache met de cache van de webserver; een andere cacheplugin kan dat niet.

Wat niet in de cache mag

Een paginacache geeft iedereen dezelfde HTML. Dat gaat fout bij pagina's die per bezoeker anders zijn:

• ingelogde gebruikers (de beheerbalk, "Welkom, Lisa");
• de winkelwagen, het afrekenen en Mijn account bij een webwinkel;
• pagina's met een formulier met een eenmalige code (nonce), die na een tijd verloopt;
• pagina's die op basis van locatie, taal of een cookie iets anders tonen.

Goede cacheplugins slaan ingelogde gebruikers en de bekende WooCommerce-pagina's vanzelf over. Bij andere plugins (een ledengedeelte, een boekingssysteem) moet je zelf uitzonderingen instellen. Het teken dat het misgaat: een bezoeker ziet de winkelwagen van iemand anders, of een formulier geeft "verlopen" of "ongeldige aanvraag".

Legen: wanneer is de cache oud?

Pas je een pagina aan, dan moet de opgeslagen versie weg. Cacheplugins legen bij het opslaan van een bericht meestal die pagina, de homepage en de archieven. Bij een wijziging aan het menu, het thema of een widget moet vaak de hele cache worden geleegd. Zie je na een wijziging de oude versie, leeg dan de cache (in de beheerbalk van de cacheplugin) en controleer het in een privévenster, zodat je eigen browsercache niet meespeelt.

De browsercache

De server vertelt de browser met kopregels hoe lang hij een bestand mag bewaren:

cache-control: public, max-age=31536000

Dit zegt: bewaar dit een jaar. Voor stylesheets, scripts, lettertypen en afbeeldingen is een lange tijd prima, omdat WordPress bij een nieuwe versie een andere ?ver= achter het adres zet en de browser het dan als nieuw bestand ziet. Voor de HTML zelf is een korte tijd (of geen) gebruikelijk, zodat bezoekers wijzigingen snel zien.

Veel hosters en cacheplugins regelen dit. In de opdracht van deze les controleer je het.

Objectcache en Redis

Een paginacache helpt niet bij ingelogde gebruikers en niet bij de winkelwagen. Daar helpt een objectcache: WordPress bewaart de uitkomst van databasevragen in het geheugen, in een programma als Redis of Memcached. De volgende keer dat dezelfde vraag komt, haalt WordPress het antwoord uit het geheugen in plaats van uit de database.

Dat is vooral nuttig voor webwinkels, ledensites en sites met veel ingelogde redacteuren. Voor een gewone informatiesite met een paginacache is het verschil klein. Een objectcache vraagt dat je hoster Redis of Memcached aanbiedt; je zet het daarna aan met een plugin (LiteSpeed Cache kan het, er zijn ook losse plugins).

Een CDN

Een CDN (content delivery network) is een netwerk van servers op veel plekken in de wereld die kopieën van je bestanden (en soms je hele pagina's) bewaren. Een bezoeker krijgt ze van de dichtstbijzijnde server. Dat helpt vooral bij bezoekers ver weg en bij veel verkeer. Voor een Nederlandse site met Nederlandse bezoekers op een Nederlandse server is de winst klein. Een CDN met proxy (zoals Cloudflare) verandert ook je DNS en je certificaat (DNS-cursus les 7.5); doe dat niet zonder te begrijpen wat het doet.

In de praktijk: zo ziet het eruit in een paneel

Als voorbeeld gebruiken we LiteSpeed Cache op een LiteSpeed-server. Andere cacheplugins hebben vergelijkbare instellingen onder andere namen.

1. Installeer en activeer LiteSpeed Cache bij Plugins > Nieuwe plugin.
2. Open LiteSpeed Cache > Cache: "Cache inschakelen" staat aan, "Cache ingelogde gebruikers" uit (tenzij je weet wat je doet).
3. Bij een webwinkel: controleer bij Uitsluiten dat winkelwagen, afrekenen en Mijn account erin staan (bij WooCommerce gaat dat vanzelf).
4. Laat de overige onderdelen (optimaliseren van CSS en JavaScript, afbeeldingen) eerst uit. Zet ze één voor één aan en test na elke stap: juist die onderdelen breken weleens een thema.
5. Controleer in een privévenster met de ontwikkelhulpmiddelen (F12, Netwerk, eerste verzoek): bij de tweede keer laden hoort x-litespeed-cache: hit te staan.

Samenvatting

• Er zijn vier soorten cache: pagina (de grootste winst), browser, object en OPcache.
• Op een LiteSpeed-server stuurt LiteSpeed Cache de cache van de webserver aan; op Apache of nginx gebruik je een andere cacheplugin. Kies er één.
• Ingelogde gebruikers, winkelwagen, afrekenen en persoonlijke pagina's horen niet in de paginacache.
• Leeg de cache na wijzigingen aan menu of thema en controleer in een privévenster.
• Een objectcache (Redis) helpt bij webwinkels en ingelogde gebruikers; een CDN vooral bij ver weg en veel verkeer.

Quiz

Opdracht

Opdracht A6.2: Werkt je paginacache? Vul het adres van je site in. Het programma vraagt de homepage twee keer kort na elkaar op, zonder cookies, en kijkt bij de tweede keer naar kopregels die een cache-treffer aangeven (x-litespeed-cache: hit, x-cache: HIT, cf-cache-status: HIT, een age groter dan 0, of de kopregel van een andere bekende cache). Daarna vraagt het één stylesheet uit de homepage op en controleert of de browser die minstens zeven dagen mag bewaren (cache-control: max-age of expires). Noteer welke cache je gebruikt.

Verder lezen

Deze artikelen beschrijven de stappen in de panelen van WebOké; in andere panelen werken ze vergelijkbaar.

• DirectAdmin handleiding 18.3: Mijn website is traag
• DirectAdmin handleiding 15.7: Redis
• Mijn website is traag of gebruikt te veel CPU: zo maak je hem sneller
• OPcache: 30 seconden vertraging na het wijzigen van een PHP-bestand
• Is gzip geactiveerd in Directadmin en LiteSpeed of Apache
• Cache in WordPress (developer.wordpress.org, Engels): https://developer.wordpress.org/advanced-administration/performance/cache/