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

Contexte

Le cache amélioré stocke en mémoire un instantané de la page qui sera restauré à partir de l'historique de navigation. Cela accélère considérablement les navigations de retour sur la page, mais certaines API de navigateur (comme les écouteurs de déchargement) peuvent entraîner l'échec du cache amélioré et le chargement normal de la page.

Comment Lighthouse détecte-t-il les échecs de cache amélioré ?

Navigations autonomes

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

Parcours utilisateur

Lighthouse ne teste pas activement le cache amélioré dans la navigation lors de l'exécution d'un parcours utilisateur. En effet, le fait de quitter et de revenir à la page à 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 du cache amélioré en mode période en incluant une navigation à 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 échecs de mise en cache amélioré

Si, pour une raison quelconque, la page n'a pas pu être restaurée à partir du cache amélioré, l'audit échouera. Lighthouse indiquera les raisons pour lesquelles le cache amélioré n'a pas pu être utilisé, ainsi que la ou les images à l'origine du problème. Il existe trois types de motifs d'échec:

  • Action directe: vous pouvez résoudre ces problèmes pour activer la mise en cache.
  • Assistance en attente: ces fonctionnalités ne sont pas encore compatibles avec Chrome, qui empêchent donc la mise en cache. Cependant, une fois compatible, Chrome supprime ces limitations.
  • Action non utilisable: vous ne pouvez pas résoudre ces problèmes sur cette page. Un élément indépendant du contrôle de la page empêche la mise en cache.

Exemple de résultat de l'audit de cache amélioré de Lighthouse

Ressources