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. Il améliore considérablement l'expérience de navigation des utilisateurs, en particulier pour les sites Web qui impliquent de nombreuses navigations aller-retour.
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 qu'ils ont effectué ont montré que les pages qui utilisent bfcache 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 exploiter pleinement bfcache, 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, Permissions-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, pour "Cache Control: no-store") : si vous remplacez l'en-tête Cache-control de no-store par no-cache, vous pouvez 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`
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 s'agit de réponses publiques que vous souhaitez valider à chaque fois (par exemple, la page d'accueil d'un site d'actualités, même si un temps de mise en cache très court peut améliorer les performances et décharger les serveurs principaux).

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

Impact de bfcache 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. Aucune autre différence visuelle ou fonctionnelle n'existait 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 d'étude de cas.)

Métriques	% d'amélioration (mobile)	% d'amélioration (ordinateur)
Taux de succès de bfcache	+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 sur les pages plus longtemps, ce qui augmente le nombre de vues d'annonces et, par conséquent, les revenus publicitaires.

bfcache améliore l'expérience utilisateur fluide sur le site Web

Lorsque les pages se chargent instantanément, la navigation est plus fluide.

Dans Yahoo! Pour JAPAN News, l'un des principaux parcours utilisateur est le suivant:

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 charge à nouveau. 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 d'annonces ajoutées de manière dynamique ou d'autres modifications de mise en page, la position de défilement est souvent restaurée de manière incorrecte, ce qui peut désorienter les utilisateurs ou même les amener à 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 est une pellicule du processus géré avec bfcache, qui prend 0,3 seconde, tandis que la partie inférieure correspond au 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 directement d'un article à un autre, puis reviennent en arrière:

Image animée montrant le flux de navigation inverse d'un article vers la page de liste des articles 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 augmentation 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 bfcache, 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.