Les Core Web Vitals sont un ensemble de métriques définies par Google pour mesurer l'expérience utilisateur d'une page web. Depuis 2021, ces métriques font partie des signaux de classement de Google — ce qui signifie qu'un mauvais score peut pénaliser votre référencement. Les images sont l'un des principaux facteurs qui influencent ces scores, en bien comme en mal.
Les trois métriques Core Web Vitals
Google mesure trois dimensions de l'expérience utilisateur via les Core Web Vitals :
| 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 secondes | 2,5 à 4 secondes |
| INP (Interaction to Next Paint) | Réactivité aux interactions utilisateur | ≤ 200 ms | 200 à 500 ms |
| CLS (Cumulative Layout Shift) | Stabilité visuelle de la mise en page | ≤ 0,1 | 0,1 à 0,25 |
LCP et les images : le lien direct
Le LCP (Largest Contentful Paint) mesure le temps nécessaire pour afficher le plus grand élément visible dans la fenêtre de navigation. Dans la grande majorité des pages web, cet élément est une image — image hero, bannière principale, photo produit. Une image lourde ou mal chargée est donc directement responsable d'un mauvais score LCP.
Pour améliorer le LCP lié aux images :
- Utiliser des formats modernes : WebP et AVIF sont significativement plus légers que JPEG et PNG à qualité visuelle équivalente
- Précharger l'image LCP : ajoutez un tag <link rel="preload"> dans le <head> pour forcer le navigateur à charger l'image hero en priorité
- Éviter le lazy loading sur l'image LCP : n'appliquez jamais loading="lazy" à l'image qui sera votre LCP — cela retarde précisément ce que Google mesure
- Servir les images depuis un CDN : la proximité géographique du serveur réduit le Time to First Byte (TTFB) qui impacte directement le LCP
- Dimensionner correctement les images : ne jamais servir une image de 3000px de large pour un affichage de 800px
Bon à savoir : vous pouvez identifier quelle image constitue votre LCP via les outils PageSpeed Insights ou Chrome DevTools (onglet Performance → cliquez sur le marqueur LCP). Cette identification est la première étape indispensable avant toute optimisation.
CLS et les images : les décalages de mise en page
Le CLS (Cumulative Layout Shift) mesure les décalages inattendus de la mise en page pendant le chargement. Les images sans dimensions définies sont l'une des causes les plus fréquentes d'un mauvais score CLS : le navigateur ne connaît pas la taille de l'image avant qu'elle soit chargée, ce qui provoque un "saut" de la page lorsqu'elle apparaît.
La solution est simple et universelle : toujours spécifier les attributs width et height sur les balises img. Cela permet au navigateur de réserver l'espace exact nécessaire avant même que l'image soit téléchargée.
INP et les images : un impact indirect
Le INP (Interaction to Next Paint) mesure la réactivité de la page aux interactions utilisateur (clics, saisies). Les images n'impactent pas directement l'INP, mais des images très lourdes qui monopolisent le thread principal du navigateur peuvent indirectement dégrader cette métrique en bloquant le traitement des événements JavaScript.
Le décodage d'images volumineux (PNG de plusieurs mégaoctets, TIFF haute résolution) peut provoquer des blocages du thread principal. L'attribut decoding="async" permet de différer ce décodage pour ne pas bloquer les interactions.
Les bonnes pratiques images pour les Core Web Vitals
- Format : privilégiez WebP ou AVIF pour toutes les images de contenu
- Dimensions : spécifiez toujours width et height sur toutes les balises img
- Lazy loading : utilisez loading="lazy" sur toutes les images hors écran, sauf l'image LCP
- Preload : préchargez uniquement l'image LCP avec <link rel="preload" as="image">
- Responsive images : utilisez l'attribut srcset pour servir la taille adaptée à chaque résolution d'écran
- Compression : compressez toutes les images avec un outil comme Squoosh, Sharp ou ImageMagick avant de les mettre en ligne
- CDN : hébergez vos images sur un CDN pour réduire la latence de chargement géographique
Bon à savoir : Google PageSpeed Insights et Lighthouse sont les outils de référence pour mesurer vos Core Web Vitals et identifier les images problématiques. La Search Console Google propose également un rapport Core Web Vitals basé sur des données réelles de vos visiteurs (CrUX — Chrome User Experience Report), plus fiable que les tests de laboratoire pour évaluer l'expérience réelle de vos utilisateurs.