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

Yuriko Hirota
Yuriko Hirota

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:

  1. Utilisation de gestionnaires unload
  2. Utilisation de la directive no-store sur les en-têtes Cache-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:

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.

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 extraite intégralement à chaque requête.
  • Ce nom 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, une très courte durée de mise en cache peut améliorer les performances et décharger les serveurs principaux.

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.

Métriques Pourcentage d'augmentation (mobile) Pourcentage d'augmentation (ordinateur)
taux de succès de 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 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:

  1. Accéder à la liste des articles
  2. Cliquez sur un article pour le lire.
  3. Revenir à la liste des articles
  4. 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.

Deux pellicules d'une navigation vers l'arrière d'un article à la page de la liste des articles. La partie supérieure représente une pellicule du processus traité avec le cache amélioré, qui prend 0,3 seconde, tandis que la partie inférieure représente le même processus géré sans cache amélioré, qui prend 3,3 secondes.

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:

Image animée montrant le flux de navigation vers l'arrière entre un article et la fiche d'un article avec et sans cache amélioré. Avec le cache amélioré, la navigation vers l'arrière est non seulement plus rapide, mais la position de défilement est maintenue avec précision. Sans le cache amélioré, ces garanties ne peuvent pas être accordées.

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.