Core Web Vitals expliqués : LCP, INP, CLS et ce qu'ils mesurent

Les Core Web Vitals occupent une place étrange dans les discussions sur la performance web : tout le monde en parle, peu de gens savent exactement ce que chacun mesure. Le vocabulaire y est pour beaucoup, trois sigles anglais qui recouvrent en réalité trois questions très simples que se pose un visiteur. Le contenu arrive il vite ? La page répond elle quand on la touche ? Reste elle stable pendant qu’on la lit ? Ces trois questions structurent l’ensemble du dispositif, et les seuils publiés par Google leur donnent des réponses chiffrées. Comprendre la mécanique de chaque indicateur, ses causes de dégradation et son poids réel dans le classement évite deux erreurs opposées : ignorer complètement le sujet, ou lui accorder une importance qu’il n’a pas.

Core Web Vitals : trois mesures, trois questions

Le dispositif retient trois indicateurs, chacun assorti d’un seuil qui définit le « bon » niveau. Une page est considérée comme atteignant ce niveau quand soixante quinze pour cent de ses chargements réels respectent le seuil, la mesure portant sur les visiteurs et non sur une simulation.

La logique de ces seuils mérite un mot. Ils ne sortent pas d’une intuition de laboratoire mais de travaux sur la perception humaine du temps. En dessous de deux secondes et demie, un affichage est ressenti comme normal. Au delà de deux cents millisecondes, une réaction est ressentie comme un décalage. Un contenu qui bouge sous l’œil provoque une gêne mesurable quel que soit son degré.

Le seuil intermédiaire, celui qui sépare le niveau correct du niveau franchement mauvais, se situe nettement plus haut, entre une fois et demie et deux fois et demie la valeur du bon niveau selon l’indicateur. Franchir la limite basse ne fait donc pas basculer une page dans la catastrophe, mais l’écart se ressent.

Le choix du soixante quinzième centile plutôt que d’une moyenne mérite d’être compris, car il change tout. Une moyenne se laisse tirer vers le bas par une majorité de visites confortables et masque les mauvaises expériences. Le centile retenu garantit au contraire que trois visiteurs sur quatre au moins vivent l’expérience annoncée. Un site dont la moyenne semble excellente peut ainsi échouer, simplement parce qu’un quart de son audience, celle qui navigue sur un appareil modeste ou une connexion lente, subit des temps très supérieurs. Les Core Web Vitals sont conçus pour rendre visible cette minorité maltraitée.

LCP : la vitesse d’affichage du contenu principal

Le LCP, pour Largest Contentful Paint, mesure le temps écoulé entre le début du chargement et l’affichage du plus grand élément visible dans la fenêtre initiale. Cet élément est presque toujours une image de titre, une vidéo de couverture ou un bloc de texte volumineux. La métrique cherche à capter le moment où le visiteur estime que la page est arrivée.

Quatre postes composent cette durée, et les traiter dans l’ordre donne les meilleurs résultats. Le temps serveur vient en premier : tant que le premier octet n’est pas parti, rien ne peut s’afficher. Suivent les ressources bloquantes, feuilles de style et scripts placés dans l’en tête, qui suspendent le rendu le temps de leur téléchargement. Vient ensuite le chargement de l’élément lui même, dominé par le poids du fichier image. Se pose enfin la question du rendu proprement dit.

Trois erreurs récurrentes plombent cet indicateur. Différer le chargement de l’image principale, alors que ce mécanisme est fait pour les éléments hors écran, retarde mécaniquement le moment mesuré. Servir une image aux dimensions du grand écran à un téléphone impose un téléchargement disproportionné. Charger une police avant le texte, sans stratégie d’affichage de repli, retarde l’apparition d’un bloc textuel qui aurait pu être le plus grand élément.

Un détail technique change souvent la donne à lui seul : l’image de titre doit être annoncée au navigateur le plus tôt possible, avec une priorité élevée, afin qu’il la télécharge avant les ressources secondaires. Sans cette indication, le navigateur découvre l’élément le plus important de la page tardivement, après avoir consacré sa bande passante à des fichiers dont personne n’attend l’affichage.

Le poids du serveur dans cette chaîne dépend directement de l’infrastructure et du niveau de mise en cache, sujet développé dans notre décryptage de l’hébergement mutualisé et de ses limites.

INP : la réactivité, qui a remplacé le FID

En mars 2024, l’INP, pour Interaction to Next Paint, a remplacé le FID dans le dispositif officiel. Le changement est loin d’être cosmétique.

L’ancien indicateur ne mesurait que le délai avant traitement de la toute première interaction, un chiffre facile à maintenir bas et peu représentatif. L’INP observe l’ensemble des interactions d’une visite, clics, appuis, frappes au clavier, et retient une valeur proche de la pire d’entre elles. Il mesure en outre la chaîne complète : délai avant prise en charge, durée du traitement, puis temps nécessaire pour que le résultat s’affiche à l’écran.

Le résultat est un indicateur beaucoup plus sévère et beaucoup plus fidèle. Un site qui s’affichait vite mais devenait poussif dès qu’on ouvrait un menu, filtrait un catalogue ou dépliait une réponse voyait ce défaut passer inaperçu ; il apparaît désormais en pleine lumière.

Les causes de dégradation sont presque toujours les mêmes. Des tâches longues monopolisent le fil d’exécution principal du navigateur, qui ne peut pas répondre pendant ce temps. L’accumulation d’extensions ajoutant chacune leurs propres écouteurs d’événements produit le même effet. Les scripts tiers, mesure d’audience, bandeaux, widgets sociaux, s’exécutent souvent au pire moment. Une animation trop ambitieuse au moment du clic achève le tableau.

Les corrections consistent à découper les traitements longs en tranches, à retarder ce qui n’est pas nécessaire immédiatement, à supprimer les scripts dont personne ne lit les résultats, et à donner un retour visuel instantané à l’utilisateur. Le meilleur remède reste souvent le plus radical : retirer du code plutôt qu’en ajouter.

Cette bascule vers l’INP a une conséquence stratégique rarement soulignée. La performance ne se joue plus seulement au chargement initial, mais pendant toute la durée de la visite. Un site de commerce dont le filtrage de catalogue met une seconde à réagir, un formulaire dont chaque frappe déclenche une validation coûteuse, une carte interactive qui saccade au déplacement : autant de situations invisibles pour les anciens indicateurs et sanctionnées par le nouveau. Mesurer la réactivité impose donc de parcourir la page comme un visiteur, en actionnant réellement ses composants, plutôt que de se contenter d’une analyse au chargement.

CLS : la stabilité visuelle

Le CLS, pour Cumulative Layout Shift, quantifie les mouvements inattendus du contenu pendant le chargement. Il ne s’exprime pas en secondes mais en score sans unité, calculé à partir de la surface d’écran déplacée et de l’ampleur du déplacement. Un seuil de 0,1 correspond à une page pratiquement stable.

L’indicateur traduit une expérience que tout le monde a vécue : commencer à lire un paragraphe qui descend brusquement, viser un lien qui se dérobe au moment du clic, atterrir sur un bouton que l’on ne visait pas. Sur téléphone, ces glissements provoquent des erreurs de manipulation coûteuses.

Quatre causes couvrent l’essentiel des cas. Les images et vidéos publiées sans dimensions déclarées, qui n’occupent aucune place avant leur arrivée puis repoussent tout. Les polices personnalisées qui remplacent une police de repli aux métriques différentes, provoquant une recomposition du texte. Les encarts, bandeaux de consentement et blocs injectés après coup, insérés au dessus du contenu déjà affiché. Les composants qui se déplient ou se chargent en différé sans espace réservé.

Une nuance protège des faux positifs : les déplacements provoqués par une action délibérée du visiteur, dans la demi seconde qui suit son clic, ne sont pas comptabilisés. Ouvrir un menu déroulant ou déplier une section n’aggrave donc pas le score, à condition que la réaction soit immédiate. Ce sont les mouvements subis, ceux que rien n’annonce, qui pèsent.

La correction tient dans un principe unique : réserver l’espace à l’avance. Déclarer les dimensions, prévoir des emplacements de taille fixe pour les contenus dynamiques, choisir des polices de repli aux proportions voisines. Ces réflexes relèvent du travail d’intégration soigné décrit dans notre article sur le métier de webdesigner intégrateur.

Quelle place réelle dans le référencement

Ces signaux font partie des critères d’évaluation de l’expérience sur une page, aux côtés de la compatibilité mobile et de la sécurité de la connexion. Ils comptent, et il serait imprudent de les ignorer. Leur poids reste néanmoins secondaire face à la pertinence du contenu et à l’autorité du site.

L’ordre de priorité qui en découle est stable. Un contenu qui répond mieux que les autres à l’intention de recherche passe devant tout. Une page techniquement accessible et correctement structurée vient ensuite. L’optimisation des indicateurs d’expérience intervient à ce moment, comme facteur de départage entre pages comparables et comme levier direct sur le taux d’abandon.

C’est d’ailleurs par ce second effet que le gain se manifeste le plus vite. Une page qui s’affiche en une seconde et demie plutôt qu’en cinq garde une part sensiblement plus grande de ses visiteurs, et cet effet se produit indépendamment de tout classement. La performance rapporte d’abord en conversion, ensuite en visibilité.

Une dernière mise en garde s’impose sur la méthode de mesure. Les données officielles reposent sur une fenêtre glissante de vingt huit jours de visites réelles, ce qui interdit d’évaluer une correction le lendemain de son déploiement. La lecture combinée des mesures de terrain et des diagnostics de laboratoire est détaillée dans notre article sur la lecture du score PageSpeed Insights.

Trois questions, trois seuils, trois familles de correctifs : le dispositif est plus simple qu’il n’en a l’air, à condition de le traiter comme un instrument de mesure de l’expérience réelle, jamais comme un tableau de chasse.