Présentation des Core Web Vitals
Les Core Web Vitals sont un ensemble de métriques définis par Google pour mesurer la qualité de l'expérience utilisateur d'une page web. Depuis 2021, ces métriques sont intégrées dans l'algorithme de classement de Google — un site avec de bons scores bénéficie d'un avantage SEO.
Les trois métriques principales sont :
| Métrique | Description | Bon score |
|---|---|---|
| LCP (Largest Contentful Paint) | Temps de chargement du plus grand élément visible | < 2,5 secondes |
| INP (Interaction to Next Paint) | Réactivité aux interactions utilisateur | < 200 ms |
| CLS (Cumulative Layout Shift) | Stabilité visuelle — les éléments ne doivent pas sauter | < 0,1 |
Mesurer vos Core Web Vitals
Google PageSpeed Insights
Rendez-vous sur pagespeed.web.dev et saisissez l'URL de votre site. PageSpeed Insights affiche les scores en données réelles (CrUX) et en données de laboratoire, avec des recommandations détaillées.
Google Search Console
Dans Google Search Console (searchconsole.google.com), la section Expérience → Signaux Web essentiels affiche les performances réelles de votre site telles que mesurées par Chrome sur les appareils de vos vrais visiteurs.
Chrome DevTools
Dans Chrome, appuyez sur F12, allez dans l'onglet Performance et lancez une analyse de votre page. L'onglet Lighthouse propose une analyse complète avec les scores Core Web Vitals.
Améliorer le LCP (Largest Contentful Paint)
Le LCP mesure le temps nécessaire pour afficher le plus grand élément de contenu visible (généralement une image hero ou un grand texte). Un LCP lent donne l'impression que la page est lente à charger.
Identifier l'élément LCP
Dans PageSpeed Insights, cliquez sur Afficher les données de laboratoire pour voir quel élément déclenche le LCP. C'est souvent l'image principale en haut de page.
Optimisations pour améliorer le LCP
Précharger l'image LCP
Ajoutez une balise
<link rel="preload">dans le<head>de votre page pour l'image LCP :<link rel="preload" as="image" href="image-hero.webp" fetchpriority="high">WordPress permet de le faire via l'outil LiteSpeed Cache → Page Optimize → Media → Lazy Load exclusions pour exclure l'image hero du lazy loading.
Utiliser le format WebP pour l'image LCP
Convertissez votre image principale en WebP. Elle sera jusqu'à 35 % plus légère qu'un JPEG équivalent, réduisant le temps de téléchargement.
Activer le cache serveur
LiteSpeed Cache sur Gaprod sert les pages directement depuis la RAM du serveur, réduisant drastiquement le TTFB (Time to First Byte) qui est le principal facteur du LCP pour les pages HTML.
Utiliser un CDN
Un CDN (Content Delivery Network) sert vos fichiers statiques depuis des serveurs géographiquement proches de vos visiteurs. Cloudflare propose un plan gratuit compatible avec les hébergements Gaprod.
Améliorer l'INP (Interaction to Next Paint)
L'INP mesure la réactivité de votre page aux interactions utilisateur (clics, saisies). Un INP élevé indique que le thread principal du navigateur est surchargé.
Causes courantes d'un mauvais INP
- JavaScript trop lourd ou mal optimisé
- Extensions WordPress qui ajoutent beaucoup de JavaScript inutile
- Scripts tiers (chatbots, analytics lourds)
Solutions
Auditer les scripts JavaScript
Dans Chrome DevTools → onglet Performance, analysez quels scripts consomment le plus de temps processeur. Désactivez les extensions WordPress inutiles et mesurez l'impact.
Différer le chargement des scripts non critiques
Dans LiteSpeed Cache → Page Optimize → JS, activez le chargement différé des scripts JavaScript non essentiels. Cela libère le thread principal pour les interactions utilisateur.
Réduire les scripts tiers
Chaque script tiers (chatbots, widgets de réseaux sociaux, analytics) ajoute du temps de traitement. Évaluez lesquels sont vraiment nécessaires et retirez les autres.
Améliorer le CLS (Cumulative Layout Shift)
Le CLS mesure les décalages visuels inattendus — quand des éléments se déplacent pendant le chargement. Un CLS élevé est frustrant pour les utilisateurs et peut provoquer des clics accidentels.
Causes courantes d'un mauvais CLS
- Images sans attributs
widthetheightdéfinis - Publicités ou embeds qui s'insèrent dans la page après chargement
- Polices web qui provoquent un FOUT (Flash of Unstyled Text)
Solutions
Toujours définir width et height sur les images
Ajoutez systématiquement les attributs
widthetheightà toutes vos balises<img>pour que le navigateur réserve l'espace avant le chargement :<img src="photo.webp" alt="Description" width="800" height="600" loading="lazy">WordPress ajoute ces attributs automatiquement pour les images insérées via l'éditeur.
Précharger les polices web
Si vous utilisez des polices web (Google Fonts, polices personnalisées), préchargez-les dans le
<head>pour éviter le FOUT :<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>Sur Gaprod, les polices sont auto-hébergées, ce qui évite les dépendances vers des serveurs tiers et réduit le CLS.
Réserver l'espace pour les publicités et embeds
Si votre site affiche des publicités ou des embeds (YouTube, Twitter), réservez leur espace en CSS avant qu'ils se chargent :
.ad-container { min-height: 250px; }
Suivi continu des performances
Mesurez régulièrement
Les Core Web Vitals évoluent avec votre contenu. Intégrez une vérification mensuelle des performances dans votre routine de maintenance. Ajoutez votre site à Google Search Console pour recevoir des alertes automatiques en cas de dégradation.
Étapes suivantes
Pour aller plus loin dans l'optimisation :
- Activez LiteSpeed Cache pour réduire le TTFB et améliorer le LCP
- Optimisez vos images et adoptez le format WebP
- Envisagez Cloudflare comme CDN gratuit pour améliorer la performance mondiale