Le cache amélioré a aidé Yahoo! JAPAN News enregistre une augmentation de 9% de ses revenus sur mobile

Yuriko Hirota
Yuriko Hirota
X

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 de 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:

  1. Utilisation de 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 à Chrome DevTools > Applications > Cache avant/arrière. Vous pouvez également utiliser l'API notRestoredReasons pour obtenir une vue plus complète des éléments bloquants en fonction de l'utilisation réelle sur le terrain.

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

Le CCNS est destiné aux pages qui ne doivent jamais être mises en cache, en aucun cas. Notez que les pages avec CCNS ne bénéficient d'aucune technologie de mise en cache, y compris les serveurs de bordure 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 le schéma de flux cache-control.

Tests A/B pour démontrer l'impact

Pour mesurer l'impact de bfcache, Yahoo! JAPAN News a effectué un test A/B pendant deux semaines. Ils ont diffusé une version de leurs pages avec les correctifs bfcache dans un groupe et une version avec des pages non éligibles à bfcache dans un autre. Il a testé des chemins d'URL générant un trafic important pour s'assurer que le test produisait des résultats significatifs. Aucune autre différence visuelle ou fonctionnelle n'existait entre les pages.

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 et son test A/B bfcache Pour en savoir plus, consultez son étude de cas.

Métriques Hausse (%) (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 la navigation avant/arrière entre les pages devient instantanée 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.

Expérience utilisateur fluide

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

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

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

Avant bfcache, lorsque les utilisateurs avaient terminé de lire un article, ils devaient attendre que la page de liste des articles se recharge. Cela peut constituer 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 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 dynamiquement ou d'autres modifications de mise en page, la position de défilement peut être restaurée de manière incorrecte. Cela peut entraîner de la confusion chez l'utilisateur ou même l'abandon de la page.

Ce problème est résolu lorsque la navigation arrière est alimentée par bfcache: la position de défilement est immédiatement et correctement restaurée.

Deux filmstrips d'une navigation en arrière. La partie supérieure correspond à une pellicule traitée avec bfcache, ce qui prend 0,3 seconde, tandis que la partie inférieure correspond au même processus traité sans bfcache, ce 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 plus rapide et la position de défilement est conservée avec précision. Sans bfcache, ces améliorations ne sont pas garanties.

En résumé, voici les avantages 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.

Implémenter bfcache dès maintenant

En résumé, bfcache rend votre site Web instantané, mais peut également réduire les frictions dans l'expérience utilisateur globale et augmenter 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, 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. Vous pouvez profiter de bfcache en examinant vos bloqueurs bfcache dès maintenant et en évitant ces modèles courants (et d'autres moins courants).