Depuis 2021, Google intègre les Core Web Vitals comme signal de classement. En 2025, leur poids est encore plus significatif. Un site lent ou instable est pénalisé dans les résultats de recherche — et perd des clients avant même qu'ils ne voient votre offre. Voici comment comprendre, mesurer et optimiser ces métriques.
Impact direct : Une amélioration de 100ms du temps de chargement augmente les conversions de 1%. Amazon a estimé qu'une seconde de délai supplémentaire leur coûte 1,6 milliard $ de ventes par an.
Les 3 métriques Core Web Vitals
Le LCP mesure le temps nécessaire pour afficher le plus grand élément visible dans le viewport : généralement une image hero, une vidéo ou un bloc de texte important. C'est l'indicateur de la perception de rapidité par l'utilisateur.
Comment améliorer le LCP
- Optimiser et compresser les images (format WebP ou AVIF)
- Ajouter l'attribut
fetchpriority="high"sur l'image hero - Utiliser un CDN pour rapprocher les ressources des utilisateurs
- Activer la compression Gzip/Brotli sur le serveur
- Précharger les polices critiques avec
rel="preload"
<img src="hero.webp" alt="Hero image" width="1200" height="600" fetchpriority="high" decoding="async" />
L'INP mesure le temps entre une interaction utilisateur (clic, frappe, tap) et la prochaine mise à jour visuelle. Contrairement à l'ancien FID, il mesure toutes les interactions tout au long de la session, pas seulement la première.
Comment améliorer l'INP
- Découper les tâches JavaScript longues en petits morceaux (code splitting)
- Différer le JavaScript non critique avec
deferouasync - Utiliser des Web Workers pour les calculs intensifs
- Éviter les gestionnaires d'événements lourds
- Minimiser les librairies JavaScript tierces
Utilisez l'onglet Performance de Chrome DevTools et recherchez les "Long Tasks" (tâches >50ms) sur le main thread. Ce sont vos candidats principaux à optimiser.
Le CLS mesure les déplacements inattendus de la mise en page pendant le chargement. Vous avez sûrement vécu ça : vous allez cliquer sur un bouton et à la dernière seconde, une publicité s'insère et vous cliquez sur le mauvais élément. C'est exactement ce que mesure le CLS.
Comment améliorer le CLS
- Toujours spécifier
widthetheightsur toutes les images et vidéos - Réserver l'espace pour les publicités et embeds avant leur chargement
- Éviter d'insérer du contenu au-dessus du contenu existant
- Précharger les polices pour éviter le FOUT (Flash Of Unstyled Text)
- Animer uniquement avec
transformetopacity
/* Technique du padding-top */
.img-wrapper {
position: relative;
padding-top: 56.25%; /* ratio 16:9 */
}
.img-wrapper img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
Score PageSpeed : objectif 90+
Les outils pour mesurer vos Core Web Vitals
Optimisations rapides à fort impact
- Images en WebP/AVIF : 30 à 50% plus légères que JPEG/PNG pour la même qualité
- Lazy loading natif :
loading="lazy"sur toutes les images hors viewport - Minification CSS/JS : supprimer les espaces, commentaires et code inutilisé
- HTTP/2 ou HTTP/3 : multiplexage des requêtes, réduction de la latence
- Cache navigateur : headers Cache-Control pour les ressources statiques (365 jours)
- Critical CSS inline : intégrer le CSS above-the-fold directement dans le HTML
Votre site mérite un score PageSpeed 90+
J'optimise les performances de votre site et améliore votre positionnement Google.
Optimiser mon site →