Core Web Vitals sur WordPress : améliorer LCP, INP et CLS
Les Core Web Vitals sont trois indicateurs définis par Google pour mesurer l’expérience vécue par un visiteur : la vitesse d’affichage, la réactivité et la stabilité de la page. Ils font partie des signaux d’expérience pris en compte par Google, sans être un levier magique de classement. Leur vrai intérêt est ailleurs : un site qui s’affiche vite et ne saute pas sous le doigt perd moins de visiteurs.
Les trois indicateurs et leurs seuils
| Indicateur | Ce qu’il mesure | Seuil « bon » |
|---|---|---|
| LCP (Largest Contentful Paint) | Temps d’affichage du plus grand élément visible : image principale, gros titre, bloc de texte | 2,5 s ou moins |
| INP (Interaction to Next Paint) | Délai entre une interaction (clic, appui, touche) et la mise à jour visible de la page | 200 ms ou moins |
| CLS (Cumulative Layout Shift) | Ampleur des décalages inattendus de la mise en page | 0,1 ou moins |
L’INP a remplacé le FID (First Input Delay) en mars 2024. Le FID ne mesurait que la première interaction ; l’INP observe toutes les interactions de la visite, ce qui est bien plus exigeant pour les sites chargés de scripts.
Google évalue chaque indicateur sur le 75e centile des visites : pour que ta page soit jugée « bonne », au moins trois visites sur quatre doivent passer sous le seuil.
Données terrain et données de laboratoire
C’est la source de confusion la plus fréquente.
- Les données terrain viennent de vrais visiteurs utilisant Chrome, rassemblées dans le rapport CrUX (Chrome User Experience Report). Ce sont elles qui comptent pour Google. Elles portent sur les 28 derniers jours, donc une amélioration met plusieurs semaines à apparaître. Un site peu fréquenté peut ne pas avoir assez de données pour figurer dans CrUX.
- Les données de laboratoire sont produites par un test simulé (Lighthouse), sur un appareil et une connexion donnés. Elles servent à diagnostiquer et à comparer avant/après, mais ne reflètent pas forcément ce que vivent tes visiteurs. L’INP, en particulier, ne peut pas être mesuré en laboratoire puisqu’il faut une vraie interaction ; Lighthouse affiche à la place le Total Blocking Time comme indice.
Où mesurer
PageSpeed Insights affiche les deux : en haut, les données terrain de la page (ou de l’origine entière), en dessous, le diagnostic Lighthouse avec ses pistes d’amélioration. Teste en priorité la version mobile.
La Search Console, rapport « Signaux Web essentiels », regroupe les URL de ton site par statut (bonne, à améliorer, médiocre) et par type de problème. C’est le meilleur point de départ pour savoir quels modèles de pages poser sur l’établi : souvent, toutes les fiches produits ou tous les articles partagent le même défaut.
Les leviers sur WordPress
Améliorer le LCP
- Un hébergement réactif. Si le serveur met une seconde à répondre, le reste ne rattrape pas. Regarde le temps de réponse du serveur (TTFB) dans le diagnostic.
- Un cache de pages. Il évite de reconstruire chaque page en PHP à chaque visite. Notre comparatif des extensions de cache t’aide à choisir.
- Une image principale légère et prioritaire : bien dimensionnée, dans un format moderne, sans chargement différé (lazy loading). Tout est détaillé dans notre article pour optimiser les images.
- Moins de CSS et de polices bloquants. Les constructeurs de pages et les thèmes multifonctions chargent parfois beaucoup de feuilles de style. Limite le nombre de polices et de graisses.
Améliorer l’INP
- Moins de JavaScript. Chaque extension qui ajoute ses scripts sur toutes les pages (curseur, animations, chat, pop-up, outils de suivi) alourdit le traitement. Fais l’inventaire et retire ce qui ne sert pas.
- Différer les scripts non essentiels, ce que proposent la plupart des extensions de performance. Teste ensuite les menus, formulaires et paniers : un script retardé peut casser une fonction.
- Méfie-toi des balises tierces (publicités, widgets sociaux, outils de marketing) : ce sont souvent elles qui bloquent le navigateur.
Améliorer le CLS
- Des dimensions sur les images et vidéos : WordPress ajoute largeur et hauteur aux images insérées depuis la médiathèque, garde ce réflexe pour les intégrations (vidéos, iframes).
- Réserver la place des bannières de cookies, publicités et encarts chargés après coup.
- Des polices qui ne déforment pas la page en se chargeant : moins de polices, et préchargement de la principale.
Une méthode qui marche
- Ouvre le rapport de la Search Console et repère le type de page le plus touché.
- Teste une URL représentative dans PageSpeed Insights.
- Corrige une chose à la fois, sur un environnement de test si possible.
- Mesure en laboratoire pour vérifier l’effet immédiat, puis attends les données terrain.
- Dans la Search Console, utilise « Valider la correction » une fois le problème résolu.
Pour une vue d’ensemble des réglages, notre guide pour améliorer les performances complète cette page. Quand les gains faciles sont faits et que le problème vient du thème, d’un constructeur de pages ou du serveur, une optimisation des performances par des spécialistes évite de passer des semaines à tâtonner.
Cet article peut contenir des liens partenaires. Ils n'influencent jamais ce que nous écrivons.