Images et Core Web Vitals : LCP, CLS et FID
Depuis mai 2021, Google intègre les Core Web Vitals dans son algorithme de classement. Ces métriques mesurent l'expérience utilisateur réelle sur votre site, et les images en sont souvent la première cause de mauvais scores. Comprendre ce lien est aujourd'hui indispensable pour tout site cherchant à bien se positionner dans les résultats de recherche.
Les Core Web Vitals : les trois métriques
Google mesure trois métriques principales, calculées sur les données réelles de terrain (CrUX. Chrome User Experience Report) :
| Métrique | Ce qu'elle mesure | Seuil "bon" | Seuil "à améliorer" |
|---|---|---|---|
| LCP. Largest Contentful Paint | Temps de chargement du plus grand élément visible | ≤ 2,5 s | 2,5 – 4 s |
| CLS. Cumulative Layout Shift | Stabilité visuelle (décalages de mise en page) | ≤ 0,1 | 0,1 – 0,25 |
| INP. Interaction to Next Paint | Réactivité aux interactions utilisateur | ≤ 200 ms | 200 – 500 ms |
LCP : l'image hero est souvent l'élément critique
Le LCP identifie l'élément visible le plus grand dans le viewport au moment du chargement de la page. Dans la grande majorité des pages web, cet élément est :
- Une image hero (bannière, visuel principal en haut de page)
- Une image de fond CSS appliquée à un bloc hero
- Plus rarement, un grand bloc de texte (heading principal)
Un LCP supérieur à 2,5 secondes signifie que votre visiteur attend plus de 2,5 secondes avant de voir l'élément principal de votre page. C'est trop long, et Google le sait via les données CrUX de Chrome.
1. Preload de l'image LCP
Informez le navigateur qu'il doit charger cette image en priorité absolue, avant même d'analyser le reste du HTML :
<!-- Dans le <head> de la page -->
<link rel="preload" as="image" href="/images/hero.webp"
fetchpriority="high" type="image/webp">2. fetchpriority="high" sur la balise img
L'attribut fetchpriority="high" (standardisé en 2023) indique au navigateur de hisser cette ressource en tête de la file de téléchargement :
<img
src="hero.webp"
alt="Visuel principal"
width="1920"
height="1080"
fetchpriority="high">3. Ne jamais lazy-loader l'image LCP
L'attribut loading="lazy" retarde délibérément le chargement de l'image jusqu'à ce qu'elle approche du viewport. Sur l'image LCP, qui est déjà dans le viewport, c'est catastrophique pour le score. Réservez le lazy loading aux images below-the-fold.
4. Optimiser le poids de l'image hero
Une image hero en WebP bien compressée charge 2 à 4 fois plus vite qu'un JPEG non optimisé de même dimension. Cibles recommandées :
- Image hero 1920 px large : moins de 150 Ko en WebP, moins de 100 Ko en AVIF
- Vignette produit 600 px : moins de 40 Ko en WebP
- Thumbnail 300 px : moins de 20 Ko
5. Servir l'image hero depuis un CDN
La latence réseau compte autant que le poids du fichier. Un CDN place votre image sur des serveurs géographiquement proches de vos visiteurs, réduisant le Time To First Byte (TTFB) de l'image de 100 à 400 ms selon la localisation.
CLS : toujours spécifier width et height
Le CLS mesure les décalages visuels inattendus pendant le chargement de la page. Imaginez lire un article et, au moment de cliquer sur un lien, une image se charge et pousse tout le contenu vers le bas, votre clic arrive sur le mauvais élément. C'est un layout shift.
Pourquoi les images causent-elles du CLS ?
Sans dimensions explicites, le navigateur ne connaît pas la taille d'une image avant de l'avoir téléchargée. Il alloue 0 pixel d'espace, puis redimensionne brutalement la mise en page à l'arrivée de l'image. Résultat : tout le contenu en dessous se déplace brusquement.
La solution : toujours spécifier width et height
<!-- Mauvais : pas de dimensions, CLS garanti -->
<img src="photo.webp" alt="Photo de produit">
<!-- Bon : dimensions explicites, espace réservé dès le départ -->
<img src="photo.webp" alt="Photo de produit" width="800" height="600">Avec width et height définis, le navigateur calcule le ratio d'aspect avant de charger l'image et réserve l'espace exact. Grâce à la propriété CSS aspect-ratio: auto appliquée automatiquement depuis Chrome 79+, ce comportement est préservé même sur les images responsives (max-width: 100%) :
<!-- Image responsive sans CLS : spécifiez les dimensions intrinsèques -->
<img
src="photo.webp"
alt="Photo de produit"
width="800"
height="600"
style="width: 100%; height: auto;">padding-bottom ou la propriété CSS aspect-ratio avant l'injection.
INP et images : l'impact indirect
L'INP (Interaction to Next Paint) mesure la réactivité de la page aux interactions utilisateur (clic, saisie, tap). Les images n'impactent pas directement l'INP, mais elles peuvent y contribuer indirectement :
- Images non optimisées et décodage coûteux : le décodage de très grandes images JPEG peut saturer le thread principal et retarder les interactions
- Trop d'images dans le DOM : des centaines de balises
<img>sans lazy loading chargent et décodent en parallèle, consommant CPU et mémoire - Images de fond en CSS complexes : les images CSS appliquées avec
filterou des effets GPU peuvent provoquer des repaints coûteux
Checklist complète : images et Core Web Vitals
Pour un LCP vert (≤ 2,5 s)
- Identifier l'élément LCP avec PageSpeed Insights ou Chrome DevTools
- Ajouter
<link rel="preload">dans le<head>pour l'image LCP - Utiliser
fetchpriority="high"sur la balise<img>de l'image LCP - Ne jamais utiliser
loading="lazy"sur l'image LCP - Convertir en WebP ou AVIF, viser moins de 150 Ko pour une image hero
- Servir depuis un CDN avec mise en cache longue durée
- Éviter les redirections sur l'URL de l'image
Pour un CLS vert (≤ 0,1)
- Toujours spécifier
widthetheightsur chaque balise<img> - Appliquer
height: autoen CSS pour les images responsives, mais garder les dimensions HTML - Utiliser des conteneurs à ratio fixe pour les images chargées dynamiquement
- Éviter d'insérer des images au-dessus du contenu déjà affiché via JavaScript
- Précharger les images de fond critiques utilisées en CSS
Outils pour mesurer les Core Web Vitals
PageSpeed Insights
L'outil officiel Google (pagespeed.web.dev) fournit à la fois les données de terrain réelles (CrUX) et les données de laboratoire (Lighthouse). C'est l'outil de référence : il identifie directement l'élément LCP, quantifie le CLS par élément et propose des recommandations concrètes.
Chrome DevTools, onglet Performance
L'enregistrement de performance dans Chrome DevTools permet de visualiser précisément le moment où l'élément LCP est peint, identifier les images qui causent des repaints et mesurer le temps de décodage de chaque image. L'onglet Lighthouse (F12) offre un score synthétique de 0 à 100.
Google Search Console
Le rapport "Expérience de page" dans Search Console agrège les données CrUX par groupe d'URL et signale les pages sous les seuils. C'est ici que vous mesurez l'impact réel sur votre positionnement SEO, car Google utilise ces données de terrain, pas les données de laboratoire, pour le classement.
Web Vitals Chrome Extension
Cette extension Google affiche en temps réel les valeurs LCP, CLS et INP pendant que vous naviguez sur n'importe quelle page. Pratique pour un diagnostic rapide sans quitter le navigateur, notamment sur les pages de staging non encore indexées.
Essayez les outils imgpact
Compressez vos images hero en WebP, redimensionnez-les aux bonnes dimensions et améliorez votre score LCP dès aujourd'hui, directement dans votre navigateur, sans inscription.