Les Core Web Vitals (CWV) sont trois métriques de performance que Google utilise comme signaux de classement : Largest Contentful Paint (LCP), Interaction to Next Paint (INP) et Cumulative Layout Shift (CLS). Améliorer ces scores ne sert pas seulement le SEO. Cela améliore directement l'expérience de vos visiteurs sur votre site. Des pages plus rapides obtiennent plus d'engagement, des taux de rebond plus faibles et des taux de conversion plus élevés. Voici une approche complète et pratique pour améliorer chaque métrique sur WordPress.
Mesurez avant d'optimiser
Avant toute modification, établissez une référence afin de pouvoir suivre votre progression. Utilisez ces outils pour mesurer vos Core Web Vitals actuels :
- Google PageSpeed Insights : entrez votre URL sur pagespeed.web.dev. La section supérieure affiche les données terrain provenant d'utilisateurs réels (si disponibles), et la section inférieure affiche les données de laboratoire issues d'un test simulé. Les données terrain sont celles que Google utilise réellement pour le classement.
- Google Search Console : allez dans le rapport « Core Web Vitals » sous « Expérience ». Cela montre des données agrégées sur l'ensemble de votre site, regroupées par mobile et ordinateur. Il met en évidence les URL à améliorer et celles qui passent.
- Chrome DevTools : ouvrez DevTools (F12), allez dans l'onglet « Performance » et lancez un enregistrement pendant le chargement de votre page. Cela vous donne des données de timing détaillées pour chaque ressource et étape de rendu.
- Extension Web Vitals pour Chrome : installez l'extension « Web Vitals » pour des mesures CWV en temps réel pendant que vous naviguez sur votre site.
Notez vos valeurs de référence LCP, INP et CLS. Après chaque optimisation, retestez pour confirmer l'amélioration.
Optimisation du LCP : faire charger le contenu principal plus vite
Le LCP mesure le temps nécessaire pour que le plus grand élément visible (généralement une image héros, un titre ou un grand bloc de texte) apparaisse à l'écran. Google considère qu'un LCP inférieur à 2,5 secondes est « bon ». Voici comment le réduire :
- Identifiez votre élément LCP : dans PageSpeed Insights, faites défiler jusqu'au diagnostic « Largest Contentful Paint element » pour voir exactement quel est votre élément LCP. Le savoir vous indique où concentrer vos efforts.
- Optimisez l'image héros : si votre élément LCP est une image, compressez-la, convertissez-la en WebP ou AVIF, et assurez-vous qu'elle est dimensionnée de manière appropriée pour son conteneur. Une image de 3000 px de large dans un conteneur de 1200 px gaspille de la bande passante. Ajoutez
fetchpriority="high"pour indiquer au navigateur de prioriser son téléchargement. - Préchargez les ressources critiques : ajoutez un indice de préchargement dans votre
<head>pour l'image LCP afin que le navigateur commence à la télécharger immédiatement au lieu d'attendre de la découvrir lors du rendu :
<link rel="preload" as="image" href="/wp-content/uploads/hero.webp" fetchpriority="high" />- Réduisez le temps de réponse du serveur : un TTFB lent retarde tout. Utilisez une extension de cache (voir notre guide), améliorez votre hébergement si le TTFB dépasse régulièrement 600 ms, et envisagez un CDN pour servir le contenu depuis des serveurs géographiquement plus proches.
- Éliminez le CSS et le JS bloquant le rendu : déplacez le CSS non critique pour qu'il se charge de manière asynchrone et différez le JavaScript qui n'est pas nécessaire au rendu initial. Les fonctionnalités « Optimize CSS Delivery » et « Delay JavaScript Execution » de WP Rocket gèrent cela automatiquement.
- Utilisez un CDN : servir les ressources statiques (images, CSS, JS) depuis des serveurs en périphérie proches de vos visiteurs réduit la latence. Cloudflare, BunnyCDN et KeyCDN s'intègrent tous bien à WordPress.
- Supprimez les extensions inutiles : chaque extension peut ajouter des fichiers CSS et JS à la page. Désactivez et supprimez les extensions dont vous n'avez plus besoin. Utilisez l'extension Query Monitor pour voir lesquelles ajoutent le plus de surcharge.
Optimisation de l'INP : rendre les interactions instantanées
L'INP mesure la rapidité de réponse de votre page lorsqu'un utilisateur clique sur un bouton, touche un lien ou tape dans un champ. Google considère qu'un INP inférieur à 200 millisecondes est « bon ». Un mauvais INP provient généralement de JavaScript bloquant le thread principal. Voici comment y remédier :
- Réduisez le temps d'exécution JavaScript : auditez vos extensions et supprimez celles qui ajoutent du JavaScript lourd inutile. Sliders, widgets de partage social et constructeurs de pages complexes contribuent souvent de manière significative. Utilisez l'onglet Coverage de Chrome DevTools (Ctrl+Shift+P, tapez « Coverage ») pour voir quelle proportion du JS chargé est réellement utilisée.
- Différez les scripts non critiques : ajoutez l'attribut
deferaux scripts non nécessaires au chargement initial. Des extensions comme Flying Scripts permettent de retarder des scripts spécifiques jusqu'à une interaction utilisateur (défilement, clic ou frappe). - Minimisez les scripts tiers : trackers analytiques, pixels publicitaires, widgets de chat en direct et intégrations sociales exécutent tous du JavaScript. Chacun ajoute du temps d'exécution. Consolidez quand c'est possible, chargez-les après l'interaction utilisateur, ou remplacez les intégrations lourdes par des alternatives statiques (par exemple, une capture d'écran d'un tweet au lieu du script d'intégration Twitter).
- Découpez les tâches longues : les tâches JavaScript qui durent plus de 50 ms bloquent le thread principal et retardent les interactions utilisateur. Si vous écrivez du JavaScript personnalisé, utilisez
requestAnimationFrameousetTimeoutpour découper les calculs lourds en morceaux plus petits. - Réduisez la taille du DOM : un grand DOM (plus de 1500 nœuds) ralentit chaque opération JavaScript car le navigateur doit traiter plus d'éléments. Simplifiez la structure de votre page, retirez les divs d'enrobage inutiles, et demandez-vous si chaque section de contenu est vraiment nécessaire au chargement initial.
Optimisation du CLS : empêcher le contenu de bouger
Le CLS mesure à quel point le contenu visible se déplace de manière inattendue pendant le chargement. Google considère qu'un CLS inférieur à 0,1 est « bon ». Les décalages de mise en page frustrent les utilisateurs car ils provoquent des erreurs de clic et un mouvement visuel désorientant. Voici comment les éliminer :
- Définissez des dimensions explicites pour les images : incluez toujours les attributs
widthetheightsur vos images. WordPress le fait automatiquement pour les images insérées via la médiathèque, mais les images ajoutées manuellement en HTML personnalisé ou via un constructeur de pages peuvent ne pas avoir ces attributs. Sans dimensions, le navigateur ne sait pas combien d'espace réserver, ce qui fait sauter le contenu lorsque l'image se charge. - Réservez de l'espace pour les publicités et intégrations : si vous affichez des publicités, définissez une
min-heightsur le conteneur publicitaire correspondant à la taille attendue. Idem pour les intégrations YouTube, widgets sociaux et autres contenus tiers chargés de manière asynchrone. - Utilisez font-display swap : lorsque les polices personnalisées se chargent lentement, le navigateur peut masquer le texte jusqu'à ce que la police soit prête, puis l'afficher soudainement, provoquant un décalage. Définissez
font-display: swapdans vos déclarations@font-facepour que le navigateur affiche immédiatement le texte avec une police de repli et bascule vers la police personnalisée lorsqu'elle est prête :
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
}- Évitez d'injecter du contenu au-dessus de la ligne de flottaison après chargement : bannières, barres de notification et popups de consentement aux cookies qui poussent le contenu vers le bas provoquent des décalages. Utilisez un positionnement sticky ou des superpositions plutôt que d'insérer des éléments dans le flux du document.
- Préchargez les polices web : si votre thème utilise des polices personnalisées, préchargez-les pour qu'elles soient disponibles plus tôt, réduisant le temps d'affichage de la police de repli :
<link rel="preload" as="font" href="/fonts/custom.woff2" type="font/woff2" crossorigin />Extensions WordPress qui aident pour les Core Web Vitals
Plusieurs extensions traitent plusieurs métriques CWV à la fois :
- WP Rocket : cache de page, optimisation CSS/JS, chargement différé, exécution JS différée. L'extension unique la plus complète pour améliorer les CWV.
- Autoptimize : extension gratuite pour la minification CSS et JS, la concaténation et le CSS critique en ligne. Fonctionne bien avec une extension de cache.
- Perfmatters : extension légère pour désactiver les fonctionnalités WordPress inutilisées (emojis, intégrations, dashicons), gérer les scripts par page et ajouter des indices de préchargement.
- Flying Scripts : extension gratuite qui retarde l'exécution JavaScript jusqu'à l'interaction utilisateur. Particulièrement efficace pour les scripts tiers comme Google Analytics, Facebook Pixel et les widgets de chat.
- OMGF (Optimize My Google Fonts) : télécharge localement les polices Google et optimise leur chargement, éliminant la requête externe et améliorant à la fois LCP et CLS.
Suivre les améliorations dans le temps
Les données terrain des Core Web Vitals (celles utilisées par Google pour le classement) se mettent à jour sur une période glissante de 28 jours. Cela signifie que les améliorations n'apparaîtront pas immédiatement dans Search Console. Après avoir effectué des modifications, attendez au moins quatre semaines avant d'évaluer l'impact dans Search Console. En attendant, utilisez les données de laboratoire de PageSpeed Insights et l'extension Chrome Web Vitals pour un retour plus rapide. Mettez en place une routine mensuelle : lancez PageSpeed Insights sur vos pages clés, notez les scores et comparez-les au mois précédent. Cela vous aide à détecter tôt les régressions, en particulier après des mises à jour d'extensions ou des changements de thème.
Vérifiez les Core Web Vitals avec InspectWP
InspectWP vérifie de nombreux facteurs influençant les Core Web Vitals : encodage de contenu (GZIP/Brotli), version du protocole HTTP (HTTP/2 ou HTTP/3), nombre total d'images, nombre de fichiers JS et CSS, et taille HTML globale. Utilisez ces métriques comme point de départ pour identifier les domaines nécessitant attention. Lancez une analyse après chaque optimisation pour confirmer l'amélioration.