Core Web Vitals : ce que mesurent LCP, INP et CLS, les seuils, et ce qu'en dit Google

Les trois mesures et leurs seuils

web.dev recommande de juger chaque mesure au 75e centile des chargements de page, séparément sur mobile et sur ordinateur : une page passe quand trois visites sur quatre atteignent le seuil « bon ».

Ce qu'en dit la recherche Google

La page de Google Search Central consacrée aux Core Web Vitals indique qu'ils vont dans le sens de ce que les systèmes de classement de Google cherchent à récompenser. La même page en pose clairement les limites : de bons scores ne garantissent pas les premières places, et la pertinence reste plus importante. Elle renvoie au rapport Core Web Vitals de la Search Console pour voir comment se comportent vos pages.

La vitesse mérite donc d'être travaillée, d'abord parce que les visiteurs la ressentent, et comme un signal parmi d'autres. Une page rapide qui ne répond pas à la recherche ne passera pas devant une page plus lente qui y répond.

LCP : afficher vite le contenu principal

Selon web.dev, peuvent compter comme plus grand élément affiché : les images (y compris dans un SVG), l'image d'aperçu ou la première image d'une vidéo, les éléments avec une image de fond chargée en CSS, et les blocs contenant du texte. Sur la plupart des pages, c'est l'image principale ou le titre.

• Servir l'image principale dans un format moderne, à la taille affichée, sans chargement différé.
• Éviter que le contenu principal attende de gros scripts ou une réponse lente du serveur.
• Charger les polices de façon à afficher le texte avant l'arrivée de la police personnalisée.
• Garder des pages légères : chaque script ou widget en plus concurrence le contenu principal.

INP : des clics et des touchers qui répondent tout de suite

L'INP observe les clics de souris, les touchers sur écran tactile et les frappes au clavier ; le survol et le défilement ne comptent pas. Pour la plupart des sites, c'est l'interaction la plus lente qui est retenue ; sur les pages très utilisées, une interaction parmi les plus lentes est ignorée toutes les 50, pour écarter les accidents. web.dev précise que l'INP se mesure au mieux auprès de vrais utilisateurs ; en laboratoire, le Total Blocking Time peut servir d'indicateur approché, sans le remplacer.

• Réduire ou différer le JavaScript lourd, surtout les balises tierces.
• Découper les tâches longues pour que le navigateur puisse réagir entre deux.
• Donner un retour visuel immédiat au clic, puis faire le travail plus lent.

CLS : empêcher la page de sauter

web.dev liste les causes habituelles des décalages : images et vidéos sans dimensions, publicités et widgets tiers qui se redimensionnent, contenu injecté après le chargement, et polices web qui s'affichent différemment de leur police de secours. Les décalages survenant dans les 500 millisecondes qui suivent un clic, un toucher ou une frappe de l'utilisateur sont exclus, car il s'y attend.

• Indiquer largeur et hauteur (ou un ratio) sur chaque image et vidéo.
• Réserver la place des bandeaux, intégrations et publicités avant leur chargement.
• Ne pas insérer de contenu au-dessus de ce que le visiteur est en train de lire.
• Choisir des polices de secours de taille proche de la police personnalisée.

Données terrain et données de laboratoire

Deux sortes de chiffres circulent. Les données terrain viennent de vrais visiteurs : ce sont elles que visent les seuils au 75e centile ci-dessus. Les données de laboratoire viennent d'un test dans un environnement contrôlé : utiles pour diagnostiquer et vérifier un changement avant sa mise en ligne, elles ne disent pas ce qu'ont vécu vos visiteurs. Quand les deux divergent, fiez-vous au terrain et servez-vous du laboratoire pour trouver la cause.

Comment nous construisons des sites rapides chez Takat

Par défaut, nous construisons des sites statiques rapides : peu de JavaScript, des images dimensionnées et compressées, des dimensions fixées pour éviter les décalages, aucun widget tiers sans raison. Le site de notre agence obtient 100 dans Lighthouse. Un score de laboratoire n'est pas un classement : après la mise en ligne, nous lisons aussi les données terrain dans la Search Console. Voir Sites web et Audits.