Utilité du cache amélioré JAPAN News augmente ses revenus de 9% sur mobile

Yuriko Hirota

Le cache amélioré (ou bfcache) est une optimisation de 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 nombreux allers-retours.
Article web.dev sur le bfcache

Yahoo! JAPAN News, l'une des plates-formes d'actualités les plus populaires au Japon, a déployé des efforts concertés pour améliorer son taux de réussite de bfcache. Elle a ainsi constaté une amélioration significative de l'expérience utilisateur et de ses résultats commerciaux. Plus précisément, les résultats du test A/B de cette organisation ont montré que les pages utilisant le cache amélioré ont enregistré une augmentation de 9% des revenus publicitaires.

Cette étude de cas explique comment Yahoo! JAPAN News a supprimé les bloqueurs de bfcache et a constaté que bfcache avait considérablement amélioré l'expérience utilisateur.

Supprimer les bloqueurs pour bfcache

bfcache est disponible depuis Chrome 86 et également sur tous les navigateurs modernes. Toutefois, pour tirer pleinement parti du cache amélioré, vous devez supprimer les bloqueurs potentiels sur votre site Web. Voici quelques-uns des principaux éléments bloquants que Yahoo! JAPAN News a rencontré les problèmes suivants :

Utilisation de gestionnaires unload
Utilisation de la directive no-store sur les en-têtes Cache-control

Pour connaître les principaux bloqueurs de votre site Web, accédez à Outils pour les développeurs Chrome > Applications > Cache avant/arrière (plus d'informations) ou utilisez l'API notRestoredReasons pour obtenir une vue plus complète des bloqueurs en fonction de l'utilisation réelle sur le terrain.

Voici comment Yahoo! JAPAN News a supprimé ses bloqueurs :

Gestionnaires de déchargement : utilisez l'événement pagehide au lieu de l'événement unload, car l'événement unload est très peu fiable. De plus, permission-policy: unload a été lancé dans Chrome 115 afin que les sites Web puissent supprimer de manière fiable les gestionnaires unload pour des origines spécifiques. Chrome prévoit également d'abandonner progressivement les gestionnaires unload.
Cache-control: no-store (ou CCNS en abrégé): changer l'en-tête Cache-control de no-store en no-cache peut activer le cache amélioré. Chrome prévoit également de commencer à mettre en cache pour bfcache, même avec un en-tête no-store dans certaines circonstances.

Le CCNS est destiné aux pages qui ne doivent jamais être mises en cache, en aucun cas. Cela signifie que les pages avec CCNS ne pourront pas bénéficier d'aucune technologie de mise en cache, y compris les serveurs de périphérie CDN et les caches locaux.

Si vous disposez d'un en-tête CCNS, c'est une excellente occasion de discuter des stratégies Cache-control adaptées à votre site Web. Voici les principales différences entre no-store et no-cache.

Cache-control: no-store Cache-control: no-cache

`Cache-control: no-store`	`Cache-control: no-cache`
La réponse ne peut pas être stockée dans des caches. Par conséquent, la réponse est récupérée intégralement à chaque requête. Il doit être utilisé pour les réponses privées.	La réponse peut être stockée dans des caches tant qu'elle est revalidée avec le serveur avant chaque utilisation. Il doit s'agir de réponses publiques que vous souhaitez revalider à chaque fois (par exemple, la page d'accueil d'un site Web d'actualités). Même dans ce cas, même dans ce cas, une mise en cache très courte peut améliorer les performances et décharger les tâches des serveurs principaux.

La réponse ne peut pas être stockée dans des caches.
Par conséquent, la réponse est récupérée intégralement à chaque requête.
Il doit être utilisé pour les réponses privées.

La réponse peut être stockée dans des caches tant qu'elle est revalidée avec le serveur avant chaque utilisation.
Il doit s'agir de réponses publiques que vous souhaitez revalider à chaque fois (par exemple, la page d'accueil d'un site Web d'actualités). Même dans ce cas, même dans ce cas, une mise en cache très courte peut améliorer les performances et décharger les tâches des serveurs principaux.

Pour en savoir plus sur les options Cache-control, consultez ce diagramme de flux.

Impact du cache amélioré en chiffres

Pour mesurer l'impact de bfcache, Yahoo! JAPAN News a effectué un test A/B pendant deux semaines, au cours duquel il a diffusé une version de ses pages avec les correctifs bfcache à un groupe et une version avec des pages non compatibles avec bfcache à un autre. Il a choisi les chemins d'URL générant un trafic important afin que le test puisse obtenir des résultats pertinents. 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 bfcache. Vous pouvez constater que le site Web avec bfcache activé se charge beaucoup plus rapidement lors d'une navigation vers la page précédente ou suivante.

Ce qui est vraiment prometteur, c'est que le groupe avec bfcache activé a enregistré une augmentation significative du nombre de 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 bfcache. (Pour en savoir plus, consultez cet article).

Métriques	% d'augmentation (mobile)	% d'amélioration (ordinateur)
Taux de succès du cache amélioré	+54,03 points (0,04% → 54,07%)	+47,28 points (0,02% → 47,30%)
Pages vues	+2,26 %	+0,65 %
Revenus publicitaires	+9,0 %	+0,6 %

Lorsque les navigations avant/arrière entre les pages deviennent instantanées avec bfcache, les utilisateurs ont tendance à rester plus longtemps sur les pages, ce qui augmente le nombre de vues d'annonces et, par conséquent, 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 les campagnes Yahoo! JAPAN News, l'un des principaux parcours utilisateur se présente comme suit:

Accéder à la liste des articles
Cliquez sur un article à lire
Revenir à la liste des articles
Cliquer sur un autre article à lire

Avant bfcache, lorsque les utilisateurs avaient terminé de lire un article (étape 2), ils devaient attendre que la page de liste des articles se recharge. Cela peut constituer un obstacle pour les utilisateurs qui souhaitent simplement revenir à la liste d'articles pour choisir un autre article à lire.

La position de défilement était une autre source de friction lors de la navigation en arrière. En pratique, le navigateur tente de restaurer la position de défilement lors d'une navigation en 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 restaurée de manière incorrecte, ce qui peut amener les utilisateurs à perdre leur chemin ou même à quitter la page. Ce n'est jamais un problème lorsqu'une navigation arrière est optimisée par bfcache : la position de défilement est immédiatement et correctement restaurée.

Deux filmstrips montrant une navigation arrière depuis un article jusqu'à la page de liste des articles. La partie supérieure représente une pellicule du processus géré avec bfcache, qui prend 0,3 seconde, tandis que la partie inférieure représente le même processus géré sans bfcache, qui prend 3,3 secondes.

Avec bfcache, les frictions du parcours utilisateur ont disparu. Les utilisateurs peuvent instantanément revenir à la page de liste des articles et choisir un autre article à lire sans avoir à attendre que la page de liste des articles se charge.

Il en va de même lorsque les utilisateurs passent d'un article directement à un autre et vice-versa:

Image animée montrant le flux de navigation vers l'arrière d'un article vers la page contenant la liste de l'article avec et sans bfcache. Avec bfcache, la navigation vers la page précédente est non seulement plus rapide, mais la position de défilement est également conservée avec précision. Sans bfcache, ces garanties ne peuvent pas être fournies.

En résumé, voici les avantages de l'utilisation de bfcache pour Yahoo! JAPAN News inclut :

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 bfcache.
Augmentation des revenus : grâce à l'augmentation du nombre de pages vues par session, le nombre d'impressions d'annonces a augmenté, ce qui a entraîné une hausse de 9 % des revenus sur mobile par rapport au groupe de test sans bfcache.

Conclusion

En résumé, bfcache permet de rendre votre site Web instantané, mais aussi de réduire les frictions dans l'expérience utilisateur globale et d'accroître l'engagement sur votre site.

L'équipe Chrome examine en permanence les bloqueurs de bfcache, en particulier les deux raisons listées dans cet article, car elles sont courantes. À l'avenir, ces éléments ne seront peut-être pas suffisants pour empêcher l'utilisation du cache amélioré, mais il n'est pas nécessaire d'attendre. Pour profiter des avantages de bfcache, examinez vos bloqueurs bfcache et évitez ces modèles courants, ainsi que d'autres moins courants.