Core Web Vitals : comprendre LCP, INP et CLS et améliorer un site WordPress

Performance & typographie · Par la rédaction de Gabarit · Publié le 2026-10-27

Bureau dans la pénombre éclairé par une lampe, avec deux écrans affichant du code et une photo de montagne — Un poste de travail à deux écrans. Photographie de Lee Campbell, CC0 (Wikimedia Commons).

Google mesure l'expérience de chargement des pages avec trois indicateurs, les Core Web Vitals, en français « signaux Web essentiels ». Ils ne disent pas tout de la qualité d'un site, mais ils mettent des chiffres sur ce que ressentent les visiteurs : la page s'affiche-t-elle vite, réagit-elle aux clics, bouge-t-elle pendant la lecture ? Voici ce qu'ils mesurent et comment les améliorer sur un site WordPress.

Trois mesures, trois questions

La page de référence publiée par l'équipe Chrome de Google sur son site web.dev définit les trois indicateurs et leurs objectifs. Chacun répond à une question simple.

Indicateur	Question	Objectif « bon »
LCP	Le contenu principal s'affiche-t-il vite ?	≤ 2,5 s
INP	La page répond-elle vite quand on clique, touche ou tape ?	≤ 200 ms
CLS	La mise en page reste-t-elle stable pendant le chargement ?	≤ 0,1

La même page recommande de mesurer « le 75e centile des chargements de pages », séparément sur mobile et sur ordinateur : une page passe si elle atteint les trois objectifs pour au moins trois visites sur quatre. Ce choix évite qu'une bonne moyenne cache une expérience médiocre pour une part importante des visiteurs.

L'INP a remplacé le FID

Jusqu'en 2024, la réactivité était mesurée par le First Input Delay (FID), qui ne regardait que le délai avant le traitement de la première interaction. L'INP observe l'ensemble des interactions pendant la visite et retient une valeur représentative des plus lentes. Le blog web.dev a annoncé qu'il remplaçait le FID comme signal Web essentiel le 12 mars 2024. Pour un site qui charge beaucoup de JavaScript, sliders, constructeurs de pages, scripts publicitaires, l'INP est souvent le plus difficile des trois.

Les indicateurs suivent d'ailleurs un cycle de vie : expérimental, puis « en attente », puis stable. L'INP est passé par ces étapes avant de devenir stable ; les trois signaux actuels sont tous stables.

Terrain ou laboratoire

Deux familles de mesures coexistent, et il faut savoir laquelle on regarde. Les données de terrain proviennent de vrais visiteurs, avec leurs appareils et leurs connexions : ce sont elles qui comptent pour les seuils. Les données de laboratoire sont produites par un outil qui charge la page dans des conditions simulées, par exemple l'onglet Lighthouse des outils de développement de Chrome. Elles sont utiles pour diagnostiquer et comparer avant et après une modification, mais ne mesurent pas l'INP réel, puisqu'aucune personne n'interagit.

Un test lancé depuis un ordinateur récent, avec une bonne connexion fibre comme celle que l'on choisit pour travailler en freelance depuis son domicile, donne une image flatteuse. Il faut simuler un téléphone d'entrée de gamme et une connexion mobile moyenne pour approcher ce que vivent beaucoup de visiteurs.

Améliorer le LCP

L'élément LCP est presque toujours une image de tête ou un grand titre. Les leviers les plus efficaces :

Ne pas charger en différé l'image principale. Le chargement différé (loading="lazy") est utile sous la ligne de flottaison, contre-productif pour l'image visible d'emblée.
Lui donner la priorité. Depuis WordPress 6.3, le logiciel ajoute automatiquement fetchpriority="high" à l'image qu'il estime la plus susceptible d'être l'élément LCP ; la note de développement de l'équipe Performance l'explique.
Servir des images à la bonne taille, en format moderne, avec srcset : voir notre article sur les images responsives.
Réduire le temps de réponse du serveur : cache de pages, hébergement adapté, moins de requêtes à la base de données.
Charger les polices sans bloquer l'affichage, avec font-display: swap et un préchargement mesuré, comme détaillé dans notre article sur les polices auto-hébergées.

Améliorer l'INP

L'INP souffre quand le fil principal du navigateur est occupé par du JavaScript au moment où l'utilisateur agit. Sur WordPress, les causes habituelles sont les extensions qui chargent leurs scripts sur toutes les pages, les constructeurs de pages lourds, les scripts tiers (chat, publicité, mesure d'audience, vidéos intégrées) et les animations déclenchées au défilement. Les remèdes sont surtout soustractifs : retirer les extensions inutiles, charger les scripts seulement sur les pages qui en ont besoin, différer ce qui peut l'être, et préférer des blocs natifs aux composants lourds.

Un outil utile pour repérer ces scripts est l'onglet Performance des outils de développement du navigateur : en enregistrant un clic sur un menu ou un bouton, on voit les « tâches longues » qui bloquent le fil principal et le fichier qui les provoque. C'est souvent une seule extension qui explique l'essentiel du retard.

Améliorer le CLS

Le décalage de mise en page se produit quand un élément apparaît ou change de taille après le premier affichage et pousse le reste du contenu. Les coupables classiques :

Les images sans dimensions. Avec width et height, le navigateur réserve la place avant le chargement. WordPress 5.5 a commencé à compléter automatiquement ces attributs pour les images de la médiathèque.
Les bandeaux injectés en haut de page : cookies, promotions, alertes. Mieux vaut les superposer en bas de l'écran que les insérer au-dessus du contenu.
Les polices de remplacement très différentes de la police finale, qui font changer la longueur des lignes au moment du chargement.
Les publicités et intégrations sans emplacement réservé.

Garder la mesure en perspective

Les Core Web Vitals sont un outil, pas une fin. Un site très rapide mais illisible, ou inaccessible au clavier, ne sert pas mieux ses visiteurs. Mais les bonnes pratiques de performance recoupent largement celles de l'accessibilité et de la sobriété : moins de scripts, des images dimensionnées, une typographie soignée, un balisage propre. C'est souvent en simplifiant un thème qu'on gagne sur tous les tableaux.

Sources

web.dev (Google), « Web Vitals » et « Interaction to Next Paint becomes a Core Web Vital on March 12 » (consultés le 27 octobre 2026).
Make WordPress Core, « Image performance enhancements in WordPress 6.3 », 13 juillet 2023.
Make WordPress Core, « Lazy-loading images in 5.5 », 14 juillet 2020.