Le cache amélioré (ou cache amélioré) est une optimisation du navigateur qui permet de naviguer instantanément vers les pages précédentes et suivantes. Elle améliore considérablement l'expérience de navigation des utilisateurs, en particulier pour les sites Web qui impliquent de nombreuses navigations dans les deux sens.
Article web.dev sur le cache amélioré
Les marchands Yahoo! JAPAN News, l'une des plates-formes d'actualités les plus populaires au Japon, a décidé d'améliorer son taux d'accès au cache amélioré, ce qui lui a permis d'améliorer considérablement l'expérience utilisateur et l'activité. Plus précisément, les résultats du test A/B qu'elle a mené ont montré que les pages utilisant le cache amélioré avaient une augmentation de 9% des revenus publicitaires.
Cette étude de cas explique comment Yahoo! JAPAN News a supprimé les blocages du cache amélioré et amélioré l'expérience utilisateur de manière significative.
Supprimer les bloqueurs de cache amélioré
Le cache amélioré est disponible depuis Chrome 86 et est également disponible sur tous les navigateurs récents. Cependant, pour tirer pleinement parti du cache amélioré, vous devez supprimer les bloqueurs potentiels sur votre site Web. Les principaux obstacles auxquels Yahoo! JAPAN News:
- Utilisation de gestionnaires
unload - Utilisation de la directive
no-storesur les en-têtesCache-control
Pour connaître les principaux obstacles à votre site Web, accédez à Outils de développement Chrome > Applications > Cache amélioré (en savoir plus) ou utilisez l'API notRestoredReasons pour obtenir une vue plus complète des blocages en fonction de l'utilisation réelle sur le terrain.
Voici comment Yahoo! JAPAN News a supprimé les blocages:
- Décharger les gestionnaires:utilisez l'événement
pagehideau lieu de l'événementunload, car l'événementunloadest très peu fiable. De plus,permission-policy: unloada été lancé dans Chrome 115 afin que les sites Web puissent supprimer de manière fiable les gestionnairesunloadpour des origines spécifiques. Chrome prévoit également d'abandonner progressivement les gestionnairesunload. Cache-control: no-store(ou CCNS en abrégé): remplacer l'en-têteCache-controlno-storeparno-cachepeut activer le cache amélioré. Chrome prévoit également de commencer la mise en cache pour le cache amélioré, même avec un en-têteno-store, dans certains cas.
Le CCNS est destiné aux pages qui ne doivent en aucun cas être mises en cache. Ceci s'accompagne d'une mise en garde : les pages dotées d'un CCNS ne pourront bénéficier d'aucune technologie de mise en cache, y compris les serveurs périphériques CDN et les caches locaux.
Si vous avez un en-tête CCNS, profitez-en pour discuter des stratégies Cache-control adaptées à votre site Web. Voici les principales différences entre no-store et no-cache.
Si vous souhaitez en savoir plus sur les options de Cache-control, cet organigramme vous sera d'une aide précieuse.
Impact du cache amélioré en chiffres
Pour mesurer l'impact du cache amélioré, Yahoo! JAPAN News a effectué un test A/B pendant deux semaines. Au cours de cette période, l'équipe a diffusé une version de ses pages avec les correctifs du cache amélioré à un groupe et une version avec des pages inéligibles au cache amélioré à un autre. Elle a choisi les chemins d'URL générant un trafic important pour que le test puisse obtenir des résultats significatifs. Il n'y a eu aucune autre différence visuelle ou fonctionnelle entre les deux versions.
Voici une vidéo comparant le site Web avec et sans cache amélioré. Comme vous pouvez le constater, le site Web pour lequel le cache amélioré est activé se charge beaucoup plus rapidement lors d'une navigation avant ou arrière.
Très prometteur, le groupe ayant activé le cache amélioré a enregistré une hausse significative des pages vues et des revenus publicitaires, en particulier sur les appareils mobiles.
Voici des informations détaillées sur l'impact observé par Yahoo! JAPAN News avec son test A/B de cache amélioré. Pour en savoir plus, consultez l'article consacré à l'étude de cas.
Lorsque les navigations en arrière-plan entre les pages deviennent instantanées grâce au cache amélioré, les utilisateurs ont tendance à rester plus longtemps sur les pages, ce qui augmente le nombre de visionnages des annonces, ce qui augmente les revenus publicitaires.
Le cache amélioré améliore l'expérience utilisateur sur le site Web
Lorsque les pages se chargent instantanément, la navigation est plus fluide.
Dans Yahoo! JAPAN News, l'un des principaux parcours utilisateur est le suivant:
- Accéder à la liste des articles
- Cliquez sur un article pour le lire.
- Revenir à la liste des articles
- Cliquez sur un autre article pour le lire.
Avant le cache amélioré, lorsque les utilisateurs avaient fini de lire un article (étape 2), ils devaient attendre que la page répertoriant les articles se charge à nouveau. Cela peut être un facteur de friction pour les utilisateurs qui souhaitent simplement revenir à la liste des articles pour choisir un autre article à lire.
La position de défilement était une autre source de friction lors de la navigation vers l'arrière. En pratique, le navigateur tente de restaurer la position de défilement en cas de navigation vers l'arrière. Toutefois, en raison de l'ajout dynamique d'annonces ou d'autres modifications de la mise en page, la position de défilement est souvent incorrectement restaurée, ce qui peut entraîner une perte d'orientation des utilisateurs, voire la quitter. Cela n'est jamais un problème lorsqu'une navigation vers l'arrière est alimentée par le cache amélioré: la position de défilement est immédiatement et correctement restaurée.
Grâce au cache amélioré, le parcours utilisateur a disparu. Les utilisateurs peuvent revenir instantanément à la page contenant la liste des articles et choisir un autre article à lire sans avoir à attendre le chargement de cette page.
Il en va de même lorsque les utilisateurs passent directement d'un article à l'autre et vice-versa:
En résumé, les avantages de l'utilisation de bfcache pour Yahoo! JAPAN News comprend:
- Augmentation du nombre de pages vues: les utilisateurs étaient plus susceptibles de naviguer sur le site Web lorsque les pages étaient mises en cache avec le cache amélioré.
- Hausse des revenus: suite à une augmentation du nombre de pages vues par session, le nombre d'impressions d'annonces a augmenté, ce qui s'est traduit par une augmentation de 9% des revenus sur mobile par rapport au groupe test sans mise en cache amélioré.
Conclusion
Pour résumer, le cache amélioré rend votre site Web instantané, mais il contribue également à améliorer l'expérience utilisateur globale et à accroître l'engagement sur votre site Web.
L'équipe Chrome s'efforce en permanence de bloquer le cache amélioré, en particulier les deux raisons listées dans cet article, qui sont les principales raisons pour lesquelles le cache amélioré n'est pas utilisé. À l'avenir, cela n'empêchera peut-être pas l'utilisation du cache amélioré, mais il n'est pas nécessaire d'attendre. Pour tirer parti du cache amélioré, examinez les éléments qui bloquent le cache amélioré, et évitez ces schémas courants et d'autres moins courants.