Core Web Vitals : les signaux SEO de l’expérience utilisateur

Avec Web Vitals, Google fournit les KPI essentiels pour une expérience utilisateur optimale. Explorons les détails de cette initiative de Google pour évaluer votre expérience utilisateur et détecter les opportunités d’amélioration pour accélérer le chargement des pages votre site.

Qu’est-ce que Web Vitals ?

Google propose différents outils de test de la vitesse des pages web (Google Lighthouse, Chrome DevTools, PageSpeed Insights, Speed Console's Search Report). Ce n’est pas toujours simple de s’y retrouver dans la profusion d’outils et d’indicateurs, c’est pourquoi Google a décidé de simplifier l’accès aux informations relatives à l’expérience utilisateur.

Ainsi, les éditeurs de sites internet, responsables digitaux et marketing… peuvent se concentrer sur les signaux et les KPI les plus importants : les Core Web Vitals.

Qu’est-ce que les Core Web Vitals ?

Ils font partie des Web Vitals qui s’appliquent à toutes les URL d’un site web. Essentiels pour monitorer la vitesse des pages web, Google les couvre via ses différents outils.

Chacun de ces Core Web Vitals représente une facette de l'expérience utilisateur, et ces signaux sont mesurables en conditions réelles via les outils “Field” de Google (Real User Monitoring).

Les métriques qui composent les Core Web Vitals, et qui font partie des signaux pour le référencement par Google depuis la mise à jour Page Experience, sont amenées à évoluer avec le temps.

Google a choisi de se concentrer sur trois aspects de l'expérience utilisateur : l'affichage, l'interactivité et la stabilité visuelle. Ainsi, les Core Web Vitals sont composés des KPI suivants avec ces seuils :

Le Largest Contentful Paint (LCP), soit le moment où le contenu le plus important en termes de taille apparaît à l’écran (texte, image...), est l’indicateur retenu pour évaluer la vitesse d'affichage. Pour une bonne expérience utilisateur, le LCP doit se produire dans les 2,5 secondes qui suivent le début du chargement de la page (ndlr : compresser les images fait partie des bonnes pratiques qui contribuent à un bon LCP).
L'Interactive to Next Paint (INP) mesure l'interactivité. Pour une bonne expérience utilisateur, les pages doivent avoir un INP inférieur à 200 millisecondes.
Le Cumulative Layout Shift (CLS) mesure la stabilité visuelle. Pour une bonne expérience utilisateur, les pages doivent conserver un CLS inférieur à 0,1.

Pour chacune des métriques ci-dessus, pour vous assurer d'atteindre les objectifs recommandés pour la plupart de vos internautes, Google suggère d’observer le 75ème percentile des temps de chargement de vos pages, en distinguant mobile et desktop.

Quels outils pour mesurer les Core Web Vitals ?

Google estime que ces Core Web Vitals sont des signaux essentiels pour toutes les expériences web et les fait par conséquent remonter dans ses outils de monitoring des performances web.

Voici ceux qui les prennent en charge, qu’il s’agisse d’outils de Real User Monitoring (Field) ou de Synthetic Monitoring (Lab).

Les outils RUM pour mesurer les Core Web Vitals

Chrome User Experience Report (CrUX) recueille des données de navigation réelles et anonymisées. Elles permettent d'évaluer rapidement la vitesse d’un site sans avoir besoin d'implémenter vous-mêmes les mesures en JavaScript, et alimentent des outils tels que PageSpeed Insights et le rapport de vitesse “Speed Report” de la Search Console.

Les données de Chrome User Experience Report offrent un moyen rapide d'évaluer la vitesse de chargement, mais elles ne fournissent pas de détails par page vue - ce qui est souvent nécessaire pour diagnostiquer avec précision, monitorer et réagir rapidement en cas de régression des performances sur une URL.

Par conséquent, Google recommande fortement d’implémenter vous-même une solution de RUM.

Mesurer les Core Web Vitals en JavaScript

Chacun des Core Web Vitals peut être mesuré en JavaScript à l'aide d'API Web standard.

La façon la plus simple de mesurer tous les Core Web Vitals est d'utiliser la bibliothèque JavaScript web-vitals, une bibliothèque prête à l’emploi donnant un accès facile aux API web natives qui récupère chaque métrique exactement de la même manière que les outils Google mentionnés ci-dessus.

Ainsi, avec la bibliothèque web-vitals, mesurer chaque métrique est aussi simple qu’un appel de fonction (voir la documentation pour une utilisation complète et les détails de l'API) :

import {getCLS, getINP, getLCP} from 'web-vitals';
function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}
getCLS(sendToAnalytics);
getINP(sendToAnalytics);
getLCP(sendToAnalytics);

Vous pouvez également créer des rapports sur chaque Core Web Vitals sans écrire de code à l'aide de l'extension Web Vitals Chrome.

Cette extension utilise la bibliothèque web-vitals pour recueillir chacune de ces mesures et les afficher au cours de la navigation. Vous pouvez alors suivre les performances de vos propres sites, des sites de vos concurrents et de pages web en général.

Les outils synthétiques pour mesurer les Core Web Vitals

Bien que tous les Core Web Vitals soient, avant tout, des mesures RUM, bon nombre d'entre elles sont également mesurables via les outils synthétiques, dont les outils Google. C’est même le meilleur moyen de tester les performances de nouvelles fonctionnalités pendant le développement, avant leur déploiement live. C'est également le meilleur moyen d’anticiper les régressions de performance.

Mais bien que les mesures synthétiques (Lab) soient essentielles pour évaluer l’expérience utilisateur et l’améliorer, elles ne remplacent pas le Real User Monitoring (Field). Les performances d'un site peuvent varier considérablement en fonction des capacités de l'appareil, des conditions de réseau, des autres processus qui peuvent être exécutés sur l'appareil et qui peuvent avoir un impact sur le chargement de la page.

En réalité, chacune des métriques Core Web Vitals peut voir son score modifié selon les interactions de l’internaute. Seule la mesure de données réelles peut traduire avec précision la réalité de l’expérience utilisateur.

Les autres Core Web Vitals

Les Core Web Vitals sont des mesures essentielles pour comprendre et offrir une expérience utilisateur optimale, mais ce ne sont pas les seules.

D’autres métriques permettent de les compléter ou de s’en rapprocher, notamment pour cerner d’autres aspects de l'expérience utilisateur, ou pour diagnostiquer un problème spécifique.

Par exemple, le Time to First Byte (TTFB) et le First Contentful Paint (FCP) sont deux métriques essentielles pour traduire l'expérience de chargement et sont tous deux utiles pour diagnostiquer d’éventuels problèmes de performance au même titre que le LCP.

Vous souhaitez optimiser la performance de votre site ?