Le cache amélioré a aidé Yahoo! JAPAN News enregistre une augmentation de 9% de ses revenus 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 nombreux allers-retours.

Article web.dev sur le cache amélioré

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 du cache avant/arrière. Elle a ainsi constaté des améliorations significatives en termes d'expérience utilisateur et de 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 vous explique comment Yahoo! JAPAN News a supprimé les bloqueurs pour bfcache et a montré comment bfcache avait considérablement amélioré l'expérience utilisateur.

Supprimer les bloqueurs pour bfcache

Le bfcache est disponible depuis Chrome 86, ainsi que sur tous les navigateurs modernes. Toutefois, pour profiter pleinement du bfcache, il est nécessaire de supprimer les bloqueurs potentiels sur votre site Web. Voici quelques-uns des principaux problèmes bloquants que Yahoo! Voici les problèmes rencontrés par JAPAN News :

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

Vous pouvez rechercher les principaux bloqueurs sur votre site Web en accédant à Outils pour les développeurs Chrome > Applications > Cache amélioré. Vous pouvez également utiliser 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 remplacés : ils utilisaient l'événement pagehide au lieu de l'événement unload, car unload est très peu fiable. 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 d'abandonner progressivement les gestionnaires unload.
• Modification de cache-control : la modification de l'en-tête Cache-control de no-store (CCNS) à no-cache permet d'activer le cache amélioré. Chrome prévoit la mise en cache pour la bfcache, même avec un en-tête no-store, dans certaines circonstances.

CCNS est destiné aux pages qui ne doivent jamais être mises en cache, en aucun cas. Il convient de noter que les pages avec CCNS ne bénéficient 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, 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.

Pour en savoir plus sur les options cache-control, consultez l'organigramme cache-control.

Test A/B pour démontrer l'impact

Pour mesurer l'impact du cache amélioré, Yahoo! JAPAN News a effectué un test A/B pendant deux semaines. Ils ont diffusé une version de leurs pages avec les corrections du cache amélioré dans un groupe et une version avec des pages non éligibles au cache amélioré dans un autre. Ils ont testé les chemins d'URL avec un trafic important pour s'assurer que le test produisait des résultats significatifs. Il n'y avait aucune autre différence visuelle ou fonctionnelle entre les pages.

Voici une vidéo comparant le site Web avec et sans cache amélioré. Vous pouvez constater que le site Web avec le cache amélioré 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 pour lequel bfcache était activé a enregistré une augmentation significative du nombre de pages vues et des revenus publicitaires, en particulier sur les appareils mobiles.

Voici des informations sur l'impact observé par Yahoo!. JAPAN News avec son test A/B bfcache. Pour en savoir plus, consultez leur étude de cas.

Lorsque la navigation entre les pages devient instantanée grâce au 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.

Expérience utilisateur fluide

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

Dans Yahoo! Dans JAPAN News, l'un des principaux parcours utilisateur consiste à lire plusieurs articles :

1. Accédez à la liste des articles.
2. Cliquez sur un article pour le lire.
3. Une fois terminé, revenez à la liste des articles.
4. Cliquez sur un autre article pour le lire.

Avant le bfcache, lorsque les utilisateurs avaient fini de lire un article, ils devaient attendre que la page de la liste des articles se recharge. Cela peut être un facteur de friction pour les utilisateurs qui souhaitent revenir rapidement à la liste 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 lors d'une navigation vers l'arrière. Toutefois, en raison d'annonces ajoutées de manière dynamique ou d'autres modifications de la mise en page, la position de défilement peut être restaurée de manière incorrecte. Cela peut entraîner une certaine confusion chez l'utilisateur, voire l'inciter à quitter la page.

Ce problème est résolu lorsque la 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 à la bfcache, les frictions dans le parcours utilisateur ont disparu. Les utilisateurs peuvent revenir instantanément à la page de la liste des articles et en choisir un autre à lire sans avoir à attendre que la page de la liste des articles se charge.

Il se passe la même chose lorsque les utilisateurs passent d'un article à un autre, puis reviennent en arrière :

En résumé, les avantages de la 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, les impressions d'annonces ont augmenté, ce qui a entraîné une hausse de 9 % des revenus sur mobile par rapport au groupe de test sans bfcache.

Implémenter bfcache maintenant

En bref, le bfcache ne se contente pas de rendre votre site Web instantané, mais peut également réduire les frictions dans l'expérience utilisateur globale et accroître l'engagement sur votre site Web.

L'équipe Chrome examine en permanence les bloqueurs de bfcache, en particulier les raisons listées, car elles sont courantes. À l'avenir, il est possible que ces éléments n'empêchent pas l'utilisation du cache amélioré, mais il n'est pas nécessaire d'attendre jusque-là. Pour profiter du cache amélioré, identifiez dès maintenant les bloqueurs de cache amélioré et évitez ces modèles courants (et d'autres moins courants).