Testez vos Core Web Vitals, et ce qui se cache derrière.

Que mesure un test Core Web Vitals ??

Votre test Core Web Vitals attribue trois notes à votre page : le LCP pour le chargement, l’INP pour la réactivité et le CLS pour la stabilité visuelle. Ouvrez votre rapport Search Console : vous y verrez ces indicateurs, chacun qualifié de « bon », « à améliorer » ou « médiocre ». Le LCP repère le moment où le contenu principal de votre page est probablement chargé. L’INP mesure toutes les interactions éligibles pendant la durée de vie de la page, puis retient la pire que vos visiteurs ont rencontrée. Et le CLS suit les décalages inattendus de la mise en page dans le contenu visible (pensez à un bouton qui bouge au moment où vous appuyez dessus).

Deux points brouillent la lecture de vos chiffres. Vos indicateurs viennent de vrais utilisateurs de votre site : ils changent donc selon les visiteurs et ne disent pas ce que Google, ni son robot d’indexation, pense de votre page. L’évaluation ne mesure pas ces indicateurs directement sur vos pages. Elle analyse ce que vos pages envoient au navigateur. Mais c’est bien la base de vos chiffres, et aussi la seule partie sur laquelle vous pouvez agir directement.

Quels sont les seuils à atteindre pour LCP, INP et CLS ??

Votre page réussit quand son 75e centile affiche un LCP inférieur ou égal à 2,5 secondes, un INP inférieur ou égal à 200 millisecondes et un CLS inférieur ou égal à 0,1. Comparez ensuite votre rapport avec les seuils de mauvaise performance. Un LCP supérieur à 4 000 ms est mauvais, comme un INP supérieur à 500 ms ou un CLS supérieur à 0,25. Et tout ce qui tombe entre « bon » et « mauvais » passe en « à améliorer ». Autrement dit, votre page n’a pas encore le niveau attendu.

Le 75e centile, c’est le point qui piège souvent. Trois chargements de page sur quatre, sur mobile comme sur ordinateur, doivent atteindre l’objectif : une bonne moyenne ne suffit donc pas. Quand PageSpeed Insights a assez de données pour vos trois indicateurs, votre page n’est conforme que si les trois 75e centiles passent. Votre rapport indique celui qui échoue. Si les données INP manquent, l’outil juge seulement le LCP et le CLS. Et sans données LCP ou CLS, il ne peut pas évaluer votre page du tout. L’INP a remplacé le FID comme indicateur Core Web Vitals le 12 mars 2024 (vous verrez donc peut-être encore le FID dans d’anciens rapports).

Pourquoi un test en laboratoire diffère-t-il de vos données terrain ??

Vos résultats de laboratoire et vos données de terrain divergent parce que vous comparez un chargement contrôlé à de nombreux chargements réels. Le test en laboratoire impose un appareil et un réseau définis ; les données de terrain enregistrent les chargements de vos visiteurs. Lancez votre URL dans PageSpeed Insights et comparez les deux blocs affichés. Le résultat en laboratoire vient de Lighthouse. Et le résultat de terrain vient du Chrome User Experience Report, appelé CrUX. Les résultats de laboratoire se répètent facilement et se déboguent bien, mais ils peuvent masquer de vrais goulets d’étranglement. Les données de terrain reflètent, elles, ce que vivent vos utilisateurs. En échange, vous avez moins de métriques et moins de détail pour déboguer.

Vos données de terrain forment une distribution, pas un chiffre unique. À chaque exécution, Lighthouse vous donne le même élément LCP, alors que vos vrais visiteurs en déclenchent souvent plusieurs. Votre CLS bouge aussi, car votre page peut contenir du contenu interactif que votre test Lighthouse n’active jamais. Bref, quand les deux résultats ne racontent pas la même chose, méfiez-vous des recommandations de l’outil sur le CLS après chargement et sur l’INP.

Que peut vous dire un scan public sur vos Core Web Vitals sans données terrain ??

Une analyse publique vous montre ce qui, dans vos pages, aide ou freine l’obtention de bons scores. Mais elle ne peut pas vous donner vos valeurs LCP, INP ou CLS au 75e centile. Le volet « performances » de votre évaluation détaille le poids de vos scripts, le chargement des images et le rendu, pour votre page d’accueil et jusqu’à huit pages échantillonnées. Il affiche aussi vos en-têtes de réponse et votre balisage, ces détails peu attirants qui expliquent souvent beaucoup. Vous voyez ainsi comment vos pages arrivent réellement dans le navigateur de vos visiteurs.

Vous obtenez un indice crédible sur la cause, pas une mesure de l’effet. Si votre lot de scripts est lourd, surveillez un risque d’INP. Une image chargée tard signale un risque de LCP. Aucun de ces signaux ne prouve que vos vrais visiteurs ont un problème. L’inverse vaut aussi : un résultat « propre » ne prouve pas que votre rapport de terrain soit « vert ». Et un démarrage lent plafonne votre LCP. Votre page ne peut pas s’afficher en moins de 2,5 secondes si son téléchargement n’est pas terminé depuis quelques secondes. Pour recouper, regardez les données de terrain de votre Search Console en parallèle de l’évaluation.

Quels types de pages échouent généralement sur l'INP ??

En général, vous échouez à l’INP quand vos pages exécutent des gestionnaires d’événements lourds, chargent des scripts tiers qui bloquent le thread principal, provoquent des décalages de mise en page ou manipulent un DOM volumineux. Cliquez sur votre filtre, votre champ de formulaire ou votre menu le plus lent. Voyez-vous une pause ? Les gestionnaires d’événements coûteux pénalisent le plus vos pages ; vérifiez donc vos validations de formulaire complexes, vos filtrages côté client et vos grosses modifications du DOM. Les animations aggravent le problème quand elles déclenchent des changements de mise en page ou de gros rafraîchissements. Et les scripts tiers gourmands liés aux clics ou aux appuis posent le même problème.

Votre INP retient la pire interaction observée sur toute la durée de vie de votre page : un seul élément lent suffit donc à tirer ce score vers le bas. Cherchez dans votre code une tâche longue, cause fréquente du problème, c’est-à-dire toute tâche qui tourne plus de 50 millisecondes. En avez-vous trouvé une ? Découpez-la en morceaux plus petits avec `scheduler.yield()` ou `setTimeout`, une méthode souvent recommandée. Et si votre DOM est lourd, chaque mise à jour de l’affichage coûte plus cher. L’évaluation relève le poids de votre script et son modèle de rendu : c’est un point de départ, rien de plus. Mais seules vos données de terrain enregistrent l’interaction elle-même.

Comment remédier aux trois problèmes les plus courants liés aux Core Web Vitals ??

Pour corriger le LCP, lancez plus tôt le chargement de votre contenu principal ; pour l’INP, découpez vos tâches longues et réduisez les scripts qui bloquent ; pour le CLS, repérez les éléments qui se déplacent sans raison sur votre page et réservez-leur une place fixe. Commencez par votre rapport dans la Search Console. Identifiez lequel des trois indicateurs échoue au 75e centile, puis corrigez-le en premier. Reproduisez ensuite ce problème dans votre propre test en laboratoire. Les outils de terrain reflètent plus fidèlement ce que vivent vos utilisateurs. Mais les outils de laboratoire aident souvent mieux à trouver l’origine du problème et à le corriger. Chaque outil a donc son rôle : servez-vous de chacun pour ce qu’il fait le mieux.

Pour le LCP, cherchez ce qui retarde l’affichage de votre contenu : si votre page n’a pas fini de se télécharger au bout de quelques secondes, vous ne passerez pas sous 2,5 secondes. Regardez ensuite comment se charge votre plus gros élément. Pour l’INP, découpez toute tâche de plus de 50 millisecondes avec `scheduler.yield()` ou `setTimeout`, et retirez de vos pages les scripts tiers déclenchés par les clics. Et pour le CLS, retestez vos éléments interactifs : votre test en laboratoire ne déclenche peut-être jamais le décalage. Relancez l’évaluation sur votre site après chaque modification : vous verrez vos résultats évoluer.

Vos questions, nos réponses.

À lire ensuite.

1. 01Analyse de site webL'analyse générale, sur les huit piliers.
2. 02Audit SEO Next.jsMode de rendu, métadonnées, coût d'hydratation.
3. 03Checklist d'audit de site webLes huit piliers sous forme de checklist à suivre vous-même.