Comment les images affectent les Core Web Vitals - et comment corriger
Les images sont responsables de la plupart des échecs LCP (Largest Contentful Paint). Si vos Core Web Vitals sont rouges, vos images en sont probablement la cause. Voici exactement comment corriger.
Essayez maintenant - gratuit, sans inscription.
Smart Compress Images →Images et LCP (Largest Contentful Paint)
Le LCP mesure quand le plus grand élément visible finit de charger. Pour la plupart des pages, c'est une image. Google veut un LCP sous 2,5 secondes.
Comment corriger le LCP :
- Utilisez WebP/AVIF : 25-50% de fichiers plus petits = téléchargement plus rapide. Convertir maintenant.
- Redimensionnez : Servez la bonne taille pour le conteneur. Redimensionner ici.
- Préchargez les images hero :
<link rel="preload" as="image" href="hero.webp"> - Utilisez un CDN : Servez les images depuis des serveurs edge proches des utilisateurs.
- Définissez fetchpriority :
<img fetchpriority="high">pour les images au-dessus du pli.
Images et CLS (Cumulative Layout Shift)
Le CLS mesure les mouvements de mise en page inattendus. Les images sans dimensions font sauter la page quand elles chargent.
Comment corriger le CLS :
- Toujours définir width et height :
<img width="800" height="600"> - Utilisez aspect-ratio CSS :
aspect-ratio: 16/9;comme alternative moderne - Évitez le lazy loading au-dessus du pli : N'ajoutez pas
loading="lazy"à votre image hero
La checklist rapide
- Smart Compress toutes les images
- Redimensionner aux dimensions d'affichage réelles
- Ajouter les attributs width/height à toutes les balises
<img> - Précharger votre image LCP
- Lazy load tout sous le pli
- Re-tester dans PageSpeed Insights
FAQ
Qu'est-ce qu'un bon score LCP ?
Moins de 2,5 secondes est « Bon » (vert). 2,5-4 secondes est « À améliorer » (jaune). Plus de 4 secondes est « Mauvais » (rouge). L'optimisation des images seule peut souvent vous faire passer du rouge au vert.
Dois-je lazy loader toutes les images ?
Non ! Ne lazy loadez pas les images au-dessus du pli (surtout votre image hero/LCP). Ne lazy loadez que les images initialement hors écran. Le sur-lazy-loading nuit en fait au LCP.
Prêt ? 100% gratuit, fonctionne dans votre navigateur.
Smart Compress Images →