Wat is de Cache-Control-header? Uitleg voor SEO

Definitie

Cache-Control is een HTTP-header die bepaalt of en hoe lang browsers, CDN's en proxies een bestand mogen bewaren. Goede instellingen maken terugkerende bezoeken sneller en verlagen serverlast.

Wat regelt Cache-Control?

Met Cache-Control geeft je server per response aan wie het mag opslaan en hoe lang. max-age=N betekent: N seconden vers. s-maxage geldt alleen voor gedeelde caches zoals een CDN. private betekent: alleen de browser mag het bewaren, niet een gedeelde cache.

no-cache en no-store worden vaak verward. Volgens MDN betekent no-cache dat een bestand wél opgeslagen mag worden, maar vóór elk hergebruik bij de server gecontroleerd moet worden. no-store betekent: helemaal niet opslaan.

MDN raadt voor bestanden met een versie of hash in de URL aan: max-age=31536000, immutable. Verandert het bestand, dan verandert de URL. Voor HTML raadt MDN no-cache aan, zodat bezoekers snel nieuwe asset-verwijzingen krijgen. stale-while-revalidate laat een cache tijdelijk een verlopen versie serveren terwijl op de achtergrond een nieuwe wordt opgehaald.

Zo werkt het in Magento/Hyvä, Shopify en Laravel

Magento versioneert statische bestanden met een deployversie in het pad. Daardoor kunnen CSS en JavaScript lang gecachet worden. Of dat ook gebeurt, hangt af van je webserver- en Varnish-configuratie. Controleer de response-headers op een productieserver, niet alleen de standaardconfig.

Shopify regelt de caching van thema-assets en afbeeldingen via het eigen CDN. Je hebt daar weinig invloed op en dat is meestal prima.

In Laravel stel je headers in via middleware of je webserver. Vite zet een hash in de bestandsnamen van je build, dus die kun je lang en immutable cachen. Pagina's met sessie- of klantdata krijgen private of no-store.

Cache-Control en Googlebot

Volgens Google ondersteunen de crawlers HTTP-caching met ETag en Last-Modified. Google raadt ETag aan, omdat het minder foutgevoelig is. Komt de ETag overeen, dan antwoordt je server met een 304 zonder body. Google noemt daarnaast max-age als hulp bij het plannen van hercrawls. Andere caching-directives ondersteunen de crawlers volgens Google niet.

Veelgemaakte fouten:

- no-cache gebruiken terwijl je no-store bedoelt, of andersom.

- Pagina's met persoonlijke data zonder private in een CDN laten belanden.

- Bestanden zonder hash lang cachen. Na een deploy zien bezoekers dan oude CSS.

- Helemaal geen header sturen. Browsers gaan dan zelf heuristisch cachen, met onvoorspelbaar gedrag.

Typische headers per bestandstype

# Gehashte assets (app.3f9a1c.js)
Cache-Control: public, max-age=31536000, immutable

# HTML-pagina
Cache-Control: no-cache

# Account- of checkoutpagina
Cache-Control: private, no-store

Verder lezen

Gerelateerde begrippen

CDN (content delivery network)Varnish Full page cache TTFB (Time to First Byte)Back/forward cache (bfcache)HTTP/3 Crawlbudget

Veelgestelde vragen

Wat is het verschil tussen no-cache en no-store?+

no-cache: opslaan mag, maar de cache moet vóór hergebruik bij de server controleren of het nog klopt. no-store: helemaal niet opslaan. Gebruik no-store alleen voor gevoelige data.

Gebruikt Googlebot mijn cache-headers?+

Google zegt dat de crawlers HTTP-caching met ETag en Last-Modified ondersteunen, en raadt ETag aan. Google noemt ook max-age als hulp bij het plannen van hercrawls. Andere directives worden volgens Google niet ondersteund.

Hoe lang mag ik CSS en JavaScript cachen?+

Als de URL een versie of hash bevat, een jaar met immutable. Zonder hash moet je korter cachen of revalideren, anders zien bezoekers na een deploy oude bestanden.

Cache-Control