Snelheid en caching bij een shop

Module 6: Beheer en veiligheid · Leestijd: 10 minuten

Leerdoel: Na deze les kun je caching voor een WooCommerce-shop zo inrichten dat de winkel snel is en persoonlijke pagina's nooit in de cache komen, en kun je dat controleren aan de kopregels.

Kernbegrippen: paginacache, uitsluitingen (winkelwagen, afrekenen, Mijn account), cookies die de cache omzeilen, no-cache-kopregels, DONOTCACHEPAGE, objectcache, Redis, winkelwagenfragmenten, geolocatie met paginacache, geplande acties opruimen

Twee soorten pagina's

De basis van caching (paginacache, browsercache, objectcache, OPcache, een CDN) staat in de WordPress-cursus, les 6.2. Daar staat ook al de belangrijkste regel voor shops: persoonlijke pagina's mogen niet in de paginacache. Deze les werkt dat uit.

Een shop heeft twee soorten pagina's:

Gaat het mis, dan zie je het meteen: een klant ziet de winkelwagen van een ander, of erger, iemands adres op de afrekenpagina. Dat is ook een datalek in de zin van de AVG (KB 6749).

Wat WooCommerce zelf al doet

WooCommerce helpt een cache op drie manieren, en het is goed om ze te kennen, zodat je ziet wanneer iets ze weghaalt:

1. Constanten. Op winkelwagen, afrekenen en Mijn account zet WooCommerce DONOTCACHEPAGE (en ook voor object- en databasecache). Veel cacheplugins lezen die constante en slaan de pagina dan over.
2. Kopregels. Op diezelfde pagina's stuurt WooCommerce de no-cache-kopregels van WordPress mee: Cache-Control: no-cache, must-revalidate, max-age=0, private en een Expires in het verleden. Een proxy of CDN die zich aan de regels houdt, bewaart de pagina dan niet. Voor ingelogde gebruikers komt er no-store bij.
3. Cookies. Zodra iemand iets in de winkelwagen legt, zet WooCommerce cookies zoals woocommerce_items_in_cart, woocommerce_cart_hash en wp_woocommerce_session_.... Goede caches geven bezoekers met zo'n cookie geen opgeslagen pagina meer, ook niet van productpagina's, omdat bijvoorbeeld het mandje in de kop dan per bezoeker anders is.

De documentatie van WooCommerce noemt voor cacheplugins: sluit winkelwagen, Mijn account en afrekenen uit, en de cookies woocommerce_cart_hash, woocommerce_items_in_cart, wp_woocommerce_session_, woocommerce_recently_viewed en store_notice[...]. Voor Varnish geeft ze ook regels voor adressen met ?add-to-cart=.

Waar het in de praktijk misgaat

• Andere adressen voor de shoppagina's. Je hebt de winkelwagen hernoemd naar /mandje/ of een vertaalplugin maakt /de/warenkorb/. Een cache die op vaste adressen als /cart uitsluit, mist die. Cacheplugins die WooCommerce kennen, lezen de pagina's uit de instellingen; een cache op de server of bij een CDN doet dat niet.
• Een CDN dat alles cachet. Sommige CDN-regels ("cache everything") negeren de kopregels. Sluit dan de shoppagina's en de genoemde cookies expliciet uit.
• Een plugin die de kopregels overschrijft. Een beveiligings- of snelheidsplugin zet soms op elke pagina Cache-Control: public, max-age=.... Dan staan de no-cache-kopregels er niet meer.
• Een sessie voor elke bezoeker. Normaal zet WooCommerce pas een sessiecookie als er iets in de winkelwagen ligt. Zet een plugin of thema bij elke bezoeker al een sessie (een cookie wp_woocommerce_session_ of PHPSESSID bij het eerste bezoek), dan valt de paginacache voor iedereen weg en is je shop bij drukte traag.
• Geolocatie. Bij WooCommerce > Instellingen > Algemeen kies je de standaardlocatie van een klant. Met gewoon "Geolocatie" berekent de server per bezoeker het land, en bij prijzen per land past dat niet bij een paginacache. WooCommerce heeft daarom de optie "Geolocatie (met ondersteuning voor paginacaching)", die het land via een extra opvraging in de browser bepaalt. Heb je geen prijzen of btw per land nodig vóór het afrekenen, kies dan het winkelland: dat is het eenvoudigst. Voor geolocatie downloadt WooCommerce periodiek een database van MaxMind.

Op een LiteSpeed-server (zoals bij WebOké) regelt de plugin LiteSpeed Cache de uitsluitingen voor WooCommerce zelf; controleer ze bij de instellingen voor uitsluiten. Bij andere webservers en hosters werkt het met een andere cacheplugin vergelijkbaar.

Wat de paginacache niet oplost

Winkelwagen en afrekenen worden altijd door PHP en de database opgebouwd. Bij drukte (een actie, een nieuwsbrief) zijn dat precies de pagina's waar je klanten geld uitgeven. Daar helpen andere dingen:

• Een objectcache zoals Redis bewaart de uitkomst van databasevragen in het geheugen. Bij een shop, met veel pagina's die niet in de paginacache kunnen, levert dat merkbaar meer op dan bij een gewone site. Je hosting moet Redis aanbieden (bij WebOké kan het, DA 15.7); daarna zet je het aan met een plugin.
• Winkelwagenfragmenten. Klassieke thema's werken het mandje in de kop bij met een script (wc-cart-fragments) dat bij een gevulde winkelwagen een extra opvraging doet. Moderne blokthema's met het mini-winkelwagenblok hebben dat minder nodig. Laad zulke scripts niet op pagina's waar ze niets doen.
• Opgeruimde geplande acties. WooCommerce gebruikt de Action Scheduler voor achtergrondtaken (les 7.3). Afgeronde acties worden standaard na een maand opgeruimd. Loopt de lijst toch op tot honderdduizenden, vaak door een uitbreiding die iets blijft plannen of door mislukte acties, dan worden databasevragen trager. Kijk bij WooCommerce > Status > Geplande acties naar het aantal mislukte en wachtende acties.
• HPOS. Bestellingen in eigen tabellen (les 1.2) maken zoeken in bestellingen sneller dan in de oude berichtentabel. Bestaande winkels moeten zelf overstappen (les 6.2 over back-ups vooraf).
• Een actuele PHP-versie en genoeg geheugen (les 7.2).

In de praktijk: zo ziet het eruit in WooCommerce

Controleer het bij Theehuis Example in een privévenster met de ontwikkelhulpmiddelen van je browser (F12, tabblad Netwerk, eerste verzoek):

1. Homepage, twee keer laden: bij de tweede keer een kopregel als x-litespeed-cache: hit of cf-cache-status: HIT. Geen cookie wp_woocommerce_session_ bij het eerste bezoek.
2. shop.example.com/winkelwagen/, twee keer laden: geen hit, en cache-control met no-cache of private.
3. Hetzelfde voor afrekenen en Mijn account.
4. Leg een product in de winkelwagen en laad een productpagina: je ziet je eigen mandje, geen opgeslagen versie.

Samenvatting

• Pagina's die voor iedereen gelijk zijn in de cache; winkelwagen, afrekenen en Mijn account nooit.
• WooCommerce zet zelf DONOTCACHEPAGE, no-cache-kopregels en cookies; controleer dat niets ze weghaalt of negeert.
• Let op hernoemde adressen, CDN-regels, plugins die kopregels overschrijven, sessies voor elke bezoeker en geolocatie.
• Redis, opgeruimde geplande acties, HPOS en een goede PHP-versie helpen waar de paginacache niet kan.
• Test met twee keer laden in een privévenster en lees de kopregels.

Quiz

Opdracht

Opdracht A6.4: Blijven winkelwagen en afrekenen uit de cache? Vul het adres van je shop in en de adressen van je winkelwagen en afrekenpagina (en eventueel Mijn account). Het programma vraagt de homepage twee keer op met 2 seconden ertussen, zonder cookies, en daarna elke shoppagina ook twee keer. Er wordt niets in de winkelwagen gelegd en niets besteld. Groen als de homepage bij de tweede keer uit de cache komt (of duidelijk sneller is) zonder een sessiecookie te zetten, en als elke shoppagina bij de tweede keer geen cachetreffer heeft en een Cache-Control met no-cache, no-store, private of max-age=0 stuurt. Oranje als de homepage geen cache gebruikt, of als een shoppagina geen treffer heeft maar ook geen no-cache-kopregel. Rood bij een cachetreffer op winkelwagen, afrekenen of Mijn account, of als de homepage bij elke bezoeker een WooCommerce-sessie start.

Een groen vinkje betekent dat deze controle nu klopt, niet dat je shop veilig is.

Verder lezen

Stappen in een paneel gelden voor WebOké; bij andere aanbieders werkt het vergelijkbaar.

• Gratis WordPress-cursus 6.2: Caching
• Gratis WordPress-cursus 6.3: Afbeeldingen, PHP en andere snelheidswinst
• DirectAdmin handleiding 15.7: Redis
• Mijn website is traag of gebruikt te veel CPU: zo maak je hem sneller
• Is dit een datalek en moet ik het melden?
• Configuring caching plugins (developer.woocommerce.com, Engels): https://developer.woocommerce.com/docs/best-practices/performance/configuring-caching-plugins/
• LiteSpeed Cache voor WordPress en een webshop