Wat is caching?

Wat is caching?

Caching is het tijdelijk opslaan van bestanden of resultaten zodat je ze sneller kunt hergebruiken. In plaats van elke keer opnieuw een pagina, afbeelding of databasequery op te vragen, levert een cache een kopie uit opslag. Dat scheelt tijd en serverbelasting en maakt je website sneller en stabieler.

Er zijn meerdere lagen die tegelijk meespelen:

• Browsercache op jouw apparaat. Afbeeldingen, CSS en scripts worden lokaal bewaard.
• CDN of proxy cache zoals Cloudflare. Bestanden worden dicht bij de bezoeker opgeslagen.
• Servercache. Denk aan Nginx FastCGI of Apache cache.
• Applicatiecache in WordPress. Plugins cachen pagina’s, objecten of geoptimaliseerde CSS en JS.
• Objectcache. Bijvoorbeeld Redis of Memcached om databasevragen te versnellen.

Zolang alles netjes samenwerkt merk je alleen snelheid. Krijg je verouderde pagina’s of ontbrekende wijzigingen, dan zit de cache vaak in de weg. Hieronder leggen we uit hoe je dat herstelt, per browser, in WordPress en bij Cloudflare.

Wanneer caching in de weg zit

Herkenbare signalen:

• Je past tekst of styling aan, maar bezoekers zien geen verschil.
• Je ziet oude afbeeldingen of foutmeldingen die al opgelost zijn.
• De ene bezoeker ziet de wijziging wel, de ander niet.
• Alleen ingelogd zie je het goed, uitgelogd niet.

Werk met deze vaste volgorde om te achterhalen waar het vastloopt:

• Test in een privénavigatievenster.
• Forceer een harde herlaad van de pagina.
• Leeg de browsercache.
• Leeg de WordPress cache.
• Purge de servercache of objectcache.
• Purge de CDN of zet tijdelijk Development Mode aan.
• Controleer headers in de Netwerk-tab van je browser om te zien welke laag nog serveert.

Tip voor snelle controle: voeg tijdelijk een query toe aan de URL, zoals ?v=123. Static files met zo’n versienummer worden als nieuw gezien.

Browsercache legen en hard herladen

Google Chrome desktop

• Harde herlaad: Windows en Linux Ctrl Shift R of Ctrl F5. macOS Cmd Shift R.
• Cache volledig legen: Menu met drie puntjes, Instellingen, Privacy en beveiliging, Browsegegevens wissen. Kies Tijdsbereik Alles, vink Cache met afbeeldingen en bestanden aan en bevestig.
• Extra optie: open DevTools met F12 of Cmd Option I, houd de herlaadknop ingedrukt, kies Empty cache and hard reload.

Mozilla Firefox desktop

• Harde herlaad: Windows en Linux Ctrl F5 of Ctrl Shift R. macOS Cmd Shift R.
• Cache legen: Menu, Instellingen, Privacy en beveiliging, onder Gegevens, Gecachte webinhoud, Nu legen. Of via Geschiedenis, Recente geschiedenis wissen en alleen Cache aanvinken.

Brave desktop

• Harde herlaad: Ctrl Shift R of Cmd Shift R.
• Cache legen: Menu, Instellingen, Privacy en beveiliging, Browsegegevens wissen en Cache aanvinken.

Safari macOS

• Snel herladen: Cmd R. Voor echt cache legen gebruik je het Ontwikkelmenu.
• Ontwikkelmenu aanzetten: Safari, Instellingen, Geavanceerd, vink Toon Ontwikkelmenu in menubalk aan. Daarna Ontwikkel, Leeg caches.
• Per site data verwijderen: Safari, Instellingen, Privacy, Beheer websitegegevens, zoek je domein, Verwijder.

Mobiel kort

• iOS Safari: Instellingen, Safari, Wis geschiedenis en websitedata. Of via Geavanceerd, Websitegegevens, zoek domein en verwijder gericht.
• Android Chrome en Brave: Menu, Geschiedenis of Privacy, Browsegegevens wissen, Cache aanvinken.

Let op: cookies wissen is zelden nodig en logt je uit. Begin altijd met alleen cache.

WordPress cache legen

WordPress kent meerdere caches tegelijk. Begin bij je cache of performance plugin en werk naar beneden.

• LiteSpeed Cache: WordPress toolbar, LiteSpeed, Purge All. Zo nodig Purge All CSS/JS Cache. Daarna Tools controleren als optimalisaties vastlopen.
• WP Rocket: WordPress toolbar, Leeg cache. Daarna Preload starten. Bij problemen met CSS of JS onder Bestandsoptimalisatie opnieuw opbouwen.
• W3 Total Cache: WordPress toolbar, Empty All Caches. Check Page Cache, Minify en Object Cache afzonderlijk bij aanhoudende issues.
• WP Super Cache: Instellingen, WP Super Cache, Delete Cache. Zo nodig Delete Cache and Minified CSS/JS.
• Autoptimize: Beheer, Autoptimize, Delete Cache. Dit leegt alleen geoptimaliseerde CSS en JS, niet de paginacache.
• Elementor: Elementor, Tools, Regenerate CSS and Data. Daarna browser hard herladen.

Objectcache en servercache

• Redis Object Cache: in de plugin op Flush Cache klikken.
• Nginx FastCGI of Varnish: purge via je hostingpanel of support. Bij eigen beheer via CLI of map purge.

Best practices

• Cache niet voor ingelogde gebruikers en niet voor wp-admin.
• Laat maar één tool minificatie en combinaties doen. Meerdere optimalisaties stapelen geeft vaak issues.
• Werk met bestandsversies. Laat WordPress of je bundler automatisch `style.css?ver=1.2.3` en `app.js?ver=1.2.3` genereren.

Cloudflare caching

Cloudflare voegt een extra cachelaag toe tussen bezoeker en jouw server. Dat is krachtig, maar het kan botsen met caching plugins als je het niet goed inricht.

Wat Cloudflare opneemt in zijn caching.

• Standaard vooral statische assets zoals afbeeldingen, CSS en JS.
• Met regels kun je pagina’s cachen. Dat geeft grote snelheidswinst, maar vraagt zorg voor inlog, winkelwagen en dynamische delen.

Slim werken met Cloudflare

• Development Mode: zet dit aan tijdens bouwen. Cloudflare negeert tijdelijk de cache. Duurt drie uur of zet zelf weer uit.
• Purge: Purge by URL bij een specifieke pagina of asset. Purge Everything bij grote wijzigingen, spaarzaam gebruiken.
• Respect Origin Cache-Control: laat Cloudflare je headers volgen. Stel in je hosting nette TTL’s in voor statische files en korte TTL voor dynamische pagina’s.
• Bypass voor ingelogden: maak een regel Bypass cache on cookie voor cookies zoals `wordpress_logged_in_` of `woocommerce_items_in_cart`.
• Niet dubbel optimaliseren: kies of Cloudflare minificeert of jouw WordPress plugin. Niet allebei. Hetzelfde geldt voor image compression.
• Controleer headers: kijk in DevTools naar `CF-Cache-Status`. Zie je een hit terwijl je net iets hebt aangepast, purge de juiste URL of zet tijdelijk Development Mode aan.

Cloudflare en caching plugins samen

• Laat de plugin pagina’s cachen en Cloudflare vooral assets, of draai het om met Cache Everything plus goede bypass-regels.
• Gebruik versieparameters voor assets. Bij `style.css?ver=2.1` haalt Cloudflare automatisch de nieuwe versie op.

Stappenplan als je wijzigingen niet ziet

• Open de pagina in privénavigatie.
• Forceer een harde herlaad.
• Voeg tijdelijk `?v=123` toe om assets te forceren.
• Leeg de WordPress plugin-cache en eventueel Autoptimize of theme-cache.
• Flush Redis of servercache als je die gebruikt.
• In Cloudflare: Purge by URL voor de pagina en betrokken assets. Bij grote wijzigingen eventueel Purge Everything of zet Development Mode aan.
• Controleer in DevTools of je nog een cache-hit ziet. Let op `CF-Cache-Status`, `x-cache`, `x-litespeed-cache` en `age`.

Samenvatting

Caching maakt websites snel door resultaten tijdelijk op te slaan. De winst is groot, maar je werkt met lagen die elkaar kunnen beïnvloeden. Los cacheproblemen stap voor stap op: eerst browser, dan WordPress, daarna server en CDN. Gebruik duidelijke regels, zorg dat ingelogde gebruikers buiten de cache vallen en laat één partij optimaliseren. Met goede instellingen profiteer je van snelheid zonder gedoe en zien je bezoekers altijd de juiste versie.