Assurez-vous que la page peut être restaurée à partir du cache amélioré

Contexte

Le cache amélioré (bfcache) stocke un instantané de la page en mémoire pour la restaurer à partir de l'historique de navigation. Cela accélère considérablement la navigation de retour vers la page. Toutefois, certaines API de navigateur (par exemple, les écouteurs de déchargement) peuvent entraîner l'échec du bfcache, et la page sera chargée normalement.

Comment Lighthouse détecte les échecs du bfcache

Navigations autonomes

À la fin d'une navigation autonome, Lighthouse quitte la page et tente de la restaurer à partir de l'historique de navigation pour détecter si le bfcache est utilisé.

Parcours utilisateur

Lighthouse ne teste pas activement le bfcache lors de la navigation lors de l'exécution d'un parcours utilisateur. En effet, quitter la page et y revenir à la fin de chaque navigation ne reflète pas la plupart des expériences utilisateur sur la page.

Toutefois, vous pouvez toujours tester l'utilisation de bfcache en mode intervalle de temps en incluant une navigation dans l'historique dans le parcours utilisateur. Exemple :

const flow = await startFlow(page);

// This navigation will not test the bfcache
// because it is part of a user flow.
await flow.navigate('https://example.com');

// This timespan will try to restore the page from the bfcache.
// Problems restoring from the bfcache are surfaced in this report.
await flow.startTimespan();
await page.goto('https://example2.com');
await page.goBack();
await flow.endTimespan();

Comprendre les défaillances du bfcache

Si la page n'a pas pu être restaurée à partir de bfcache pour une raison quelconque, l'audit échoue. Lighthouse indique les raisons pour lesquelles le bfcache n'a pas pu être utilisé, ainsi que le ou les cadres à l'origine du problème. Les raisons d'échec peuvent être de trois types:

  • Actionnable: vous pouvez résoudre ces problèmes pour activer la mise en cache.
  • Prise en charge en attente: Chrome n'est pas encore compatible avec ces fonctionnalités. Elles empêchent donc le stockage en cache. Toutefois, une fois la prise en charge effectuée, Chrome supprime ces limites.
  • Non exploitables: vous ne pouvez pas résoudre ces problèmes sur cette page. Un élément échappant au contrôle de la page empêche la mise en cache.

Exemple de résultat de l'audit du cache avant/arrière de Lighthouse

Ressources