Wat is de back/forward cache (bfcache)? Uitleg

Definitie

De bfcache bewaart een complete pagina in het geheugen als de bezoeker weggaat. Klikt hij op terug of vooruit, dan verschijnt de pagina direct, zonder opnieuw te laden.

Wat is de bfcache?

Als een bezoeker van pagina A naar pagina B gaat, kan de browser pagina A in zijn geheel in het geheugen bewaren, inclusief de JavaScript-status en scrollpositie. Gaat de bezoeker terug, dan haalt de browser de pagina uit dat geheugen. Er is geen netwerkverzoek en geen nieuwe rendering nodig. De pagina is er gewoon.

Dat is iets anders dan de HTTP-cache. De HTTP-cache bewaart losse bestanden, maar de pagina moet nog opnieuw worden opgebouwd en scripts moeten opnieuw draaien. De bfcache bewaart de pagina zoals hij was. Alle grote browsers ondersteunen het, maar alleen als de pagina geschikt is.

De bfcache werkt alleen bij navigatie via de terug- en vooruitknop of het bijbehorende veeggebaar op mobiel. Klikt een bezoeker op een link naar dezelfde pagina, dan laadt die gewoon opnieuw. Het is dus geen vervanging van een goede server- of browsercache, maar een extra laag bovenop.

Waarom het ertoe doet voor webshops

Webshopbezoekers gebruiken de terugknop veel. Van categorie naar product, terug naar de categorie, naar het volgende product. Kan de categoriepagina uit de bfcache komen, dan staat hij er direct, met de filters en scrollpositie nog intact.

Ook voor de Core Web Vitals telt het. CrUX meet alle navigaties, ook terug- en vooruit-navigaties. Een pagina die uit de bfcache komt, is vrijwel direct zichtbaar en dat trekt je LCP-cijfers op het 75e percentiel omhoog. Het is een van de weinige snelheidswinsten waarvoor je niet aan afbeeldingen of servers hoeft te sleutelen.

Op productlijsten met filters is het effect extra merkbaar. Zonder bfcache bouwt de pagina na terug opnieuw op, en moet het script de filterstatus en scrollpositie herstellen. Dat gaat lang niet altijd goed. Met bfcache staat de bezoeker precies waar hij was.

Wat de bfcache blokkeert

De bekendste blokkades: unload-event-listeners in JavaScript, een Cache-Control: no-store-header op de HTML, en openstaande verbindingen zoals een WebSocket. Ook third-party scripts voegen vaak een unload-handler toe zonder dat je het weet. Gebruik pagehide of visibilitychange in plaats van unload.

Controleer het in Chrome DevTools onder Application > Back/forward cache. Klik op "Test back/forward cache" en je ziet direct of de pagina in aanmerking komt en zo niet, welke oorzaak er is. Lighthouse heeft er ook een audit voor.

Bij Magento krijgen persoonlijke pagina's zoals winkelwagen, checkout en account standaard headers met no-store. Dat is terecht en daar wil je ook geen bfcache. Voor categorie- en productpagina's wil je dat wel. Kijk welke extensies of scripts daar een unload-handler toevoegen. Bij Shopify zijn het meestal apps; test met en zonder app-embeds.

Chrome rapporteert ook in je eigen meting of een pagina uit de bfcache kwam. Met de NotRestoredReasons-API zie je bij echte bezoeken waarom een pagina niet in aanmerking kwam. Dat is nuttig als de DevTools-test op je eigen machine slaagt, maar je field data iets anders zeggen.

Let op met de winkelwagen

Een pagina uit de bfcache is een momentopname. Heeft de bezoeker op de productpagina iets toegevoegd en gaat hij terug, dan toont de mini-winkelwagen op de vorige pagina misschien nog het oude aantal. Vang dat op met het pageshow-event: als event.persisted true is, kwam de pagina uit de bfcache en ververs je de winkelwagendata. In Magento en Hyvä kun je daarvoor de customer sections opnieuw laden.

Hetzelfde geldt voor prijzen of voorraad die tijdens het bezoek veranderen. Voor de meeste shops is een verversing van de winkelwagen genoeg.

Mini-cart verversen na terugnavigatie

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // pagina kwam uit de bfcache: winkelwagen opnieuw ophalen
    window.dispatchEvent(new CustomEvent('reload-customer-section-data'));
  }
});

Verder lezen

Gerelateerde begrippen

Core Web Vitals LCP (Largest Contentful Paint)CrUX (Chrome UX Report)Third-party scripts Lighthouse

Veelgestelde vragen

Telt de bfcache mee in de Core Web Vitals?+

Ja. CrUX meet ook terug- en vooruit-navigaties. Pagina's uit de bfcache laden vrijwel direct en verbeteren je field data.

Hoe test ik of mijn pagina de bfcache kan gebruiken?+

In Chrome DevTools onder Application > Back/forward cache. De test laat zien of de pagina in aanmerking komt en wat het blokkeert.

Waarom komt mijn pagina niet in de bfcache?+

Vaak door een unload-event-listener, een Cache-Control: no-store-header of een openstaande verbinding. Third-party scripts zijn een veelvoorkomende bron.

Back/forward cache (bfcache)