Depuis mai 2021, Google a officiellement intégré les Core Web Vitals dans ses critères de classement. Cet ensemble de 3 métriques mesure l'expérience utilisateur : LCP (vitesse de chargement), FID/INP (interactivité), et CLS (stabilité de mise en page). Les images affectent directement 2 de ces 3 métriques.
LCP (Largest Contentful Paint) — Les Images sont la Cause n°1
LCP mesure le temps pour que le plus grand élément dans le viewport se rende. Dans 75% des cas, cet élément est une image (hero image, photo produit, bannière). Google exige un LCP inférieur à 2,5 secondes pour un score "Good".
Selon le Web Almanac 2025, les images sont l'élément LCP sur 72% des pages web. Le format d'image est le facteur unique ayant le plus grand impact sur les scores LCP — passer de JPG à WebP améliore typiquement le LCP de 0,3 à 0,8 seconde.
Optimisation du LCP via les Images
- ▸Utilisez WebP : Réduit la taille de 25–35%, charge notablement plus vite
- ▸Préchargez l'image hero : Ajoutez `<link rel="preload" as="image">` pour votre élément LCP
- ▸Ne faites pas de lazy load des images hero : Les images hero doivent charger immédiatement
- ▸Images responsives : Utilisez `srcset` pour servir la bonne taille pour chaque écran
- ▸Compressez correctement : Qualité WebP 80–85% est le point d'équilibre idéal
- ▸CDN : Servez les images depuis des serveurs proches de vos utilisateurs
CLS (Cumulative Layout Shift) — Images Sans Dimensions
CLS mesure les décalages de mise en page non souhaités. Les images sans attributs explicites `width` et `height` sont la cause la plus courante de CLS élevé — le navigateur ne connaît pas les dimensions à l'avance.
Flux de Travail d'Optimisation Images pour Core Web Vitals
- 1Lancez PageSpeed Insights — notez tous les avertissements liés aux images
- 2Utilisez SEO Image Pro pour convertir toutes les images en WebP (qualité 82%)
- 3Ré-uploadez les images, mettez à jour les URL si nécessaire
- 4Ajoutez les attributs width/height à toutes les balises img
- 5Préchargez l'image hero avec un resource hint
- 6Relancez PageSpeed — comparez les scores avant/après