Core Web Vitals : guide pratique pour un site rapide

Un site lent perd ses visiteurs avant même d’afficher le premier titre. Google le sait, et c’est pourquoi les Core Web Vitals font partie de ses systèmes de classement : si vos pages se chargent vite et répondent bien, vous êtes mieux positionné. La bonne nouvelle, c’est qu’il est rarement nécessaire de tout reconstruire pour améliorer ces métriques — il faut savoir quoi mesurer et par où commencer.

Que sont les Core Web Vitals ?

Ce sont trois métriques avec lesquelles Google résume l’expérience réelle de chargement d’une page :

LCP (Largest Contentful Paint) : le temps nécessaire pour afficher le plus grand élément visible, généralement l’image ou le titre principal. Objectif : moins de 2,5 secondes.
INP (Interaction to Next Paint) : le temps que met la page à réagir quand l’utilisateur touche, clique ou tape au clavier. Objectif : moins de 200 millisecondes.
CLS (Cumulative Layout Shift) : l’ampleur des « sauts » de mise en page pendant le chargement. Objectif : moins de 0,1.

Le point essentiel : Google évalue des données d’utilisateurs réels (le rapport CrUX), pas seulement des tests en laboratoire. C’est pourquoi un site peut réussir sur votre ordinateur et échouer sur un téléphone milieu de gamme en connexion mobile.

Comment les mesurer gratuitement

Trois outils gratuits couvrent presque tout le diagnostic :

PageSpeed Insights affiche les données de terrain et un audit de laboratoire pour chaque URL.
Search Console (rapport « Signaux web essentiels ») regroupe les URL problématiques de tout le site.
Lighthouse dans Chrome DevTools permet de relancer les tests pendant que vous appliquez vos corrections.

Vous pouvez aussi lancer un audit depuis le terminal :

npx lighthouse https://votre-site.com --view

Trois corrections à impact immédiat

Optimisez l’image principale

Le LCP dépend presque toujours d’une image. Servez-la dans un format moderne (AVIF ou WebP), avec des dimensions explicites, et marquez-la avec fetchpriority="high". Tout ce qui se trouve sous la ligne de flottaison devrait utiliser loading="lazy".

Réduisez le JavaScript bloquant

Chaque kilooctet de JavaScript doit être téléchargé, interprété et exécuté avant que la page ne devienne fluide. Supprimez les bibliothèques inutilisées, découpez le code par route et différez les scripts tiers non essentiels au premier rendu.

Réservez l’espace des contenus tardifs

Le CLS apparaît quand des publicités, des images ou des polices déplacent le contenu. Définissez toujours width et height sur les images, réservez des conteneurs à hauteur fixe pour les emplacements publicitaires et utilisez font-display: swap avec une police de secours proche.

Conclusion

Ne courez pas après un score parfait de 100 : c’est un indicateur de laboratoire, pas l’objectif. Concentrez-vous sur le passage au vert des trois métriques de terrain pour les utilisateurs réels. Mesurez d’abord, corrigez l’image principale, allégez le JavaScript et stabilisez la mise en page ; sur la plupart des sites, cet ordre règle l’essentiel du problème.