Back/Forward Cache

A Back/Forward Cache (bfcache) a böngésző memóriájában tartja a már meglátogatott oldalt, így a vissza vagy előre gomb azonnal megjeleníti, újratöltés nélkül. A látogatónak ez gyors, az oldal pedig nem kap újabb betöltési terhelést. Bizonyos beállítások kizárják az oldalt ebből.

Hogyan mérjük

A riport mobilnak emulált Chrome-ban betölti az oldalt, és két dolgot néz.

• Van-e a fő dokumentum válaszában Cache-Control fejléc, amely tartalmazza a no-store értéket.
• Van-e a window objektumon unload eseménykezelő (a böngésző hibakereső protokolljával kérdezi le, a betöltés után).

Eredmény:

• Megfelelő: egyik sincs.
• Hiba: legalább az egyik van. Súlyossága: alacsony. A riport megadja az okot (no-store, unload, vagy mindkettő).

A teszt nem próbálja ki magát a visszalépést, és más kizáró okokat sem keres (például nyitott IndexedDB-kapcsolat, futó fetch kérés vagy window.opener). A web.dev jelzi, hogy a no-store kezelésén a Chrome dolgozik, így a hatás böngészőnként és verziónként változhat; a teszt a fejlécet tartalmazó oldalt a biztonság kedvéért hibának veszi.

Hogyan javítsd

1. unload helyett pagehide. A pagehide mind kilépéskor, mind a bfcache-be kerüléskor lefut. A web.dev szerint az unload Firefoxban asztali gépen kizárja az oldalt, a Chrome pedig elavulttá nyilvánította.
2. A no-store helyett no-cache vagy max-age, ha az oldal nem érzékeny (nem személyes adat, nem fiók). A no-store érzékeny oldalaknál maradhat.
3. A nyitott adatbázis- és hálózati kapcsolatokat a pagehide-ban zárd, és a pageshow-ban nyisd újra.

A no-store eltávolítása a szerver vagy a gyorsítótár-bővítmény beállítása; konkrét, ellenőrzött szerverdirektívát itt nem adunk, mert a fejlécet gyakran az alkalmazás vagy egy bővítmény állítja. Keresd meg, honnan jön (lásd: Cache-Control fejléc).

JavaScript

JavaScript

window.addEventListener('pagehide', (event) => {
  // az unload-kezelő tartalma ide
});

A pagehide esemény event.persisted értéke igaz, ha az oldal a bfcache-be kerül.

Hogyan ellenőrizd

• Chrome fejlesztői eszközök: Application, Back/Forward Cache, “Run Test”. Megmutatja, visszaállítható-e az oldal, és mi akadályozza.
• A Lighthouse 10.0 óta tartalmaz bfcache-auditot.
• A pageshow eseményben naplózd az event.persisted értéket: igaz, ha az oldalt a bfcache állította vissza.
• Futtasd újra a riportot.