Impact des images sur les Core Web Vitals
Google mesure la performance via les Core Web Vitals, dont le LCP (Largest Contentful Paint) qui mesure le temps d'affichage du plus grand élément visible. L'image hero (bannière principale) est souvent l'élément LCP. Un LCP supérieur à 2.5 secondes pénalise votre référencement. Pour l'améliorer : préchauffer l'image LCP avec <link rel="preload">, utiliser WebP/AVIF, éviter le lazy loading sur l'image LCP, et optimiser la compression.
Lazy loading : une optimisation universelle
Le lazy loading (chargement différé) permet de ne charger les images que lorsqu'elles entrent dans la zone visible de l'écran. Depuis 2019, HTML supporte nativement l'attribut loading="lazy" sur les balises <img> et <iframe>. C'est l'une des optimisations les plus simples à mettre en place, avec un impact significatif sur le temps de chargement initial et la consommation de données mobiles. Important : ne jamais appliquer lazy loading à l'image above-the-fold (première zone visible), notamment l'image LCP.
CDN de transformation d'images
Les CDN modernes comme Cloudinary, Imgix ou Vercel Image Optimization peuvent transformer vos images à la volée : redimensionnement, conversion en WebP/AVIF, optimisation de la qualité, recadrage intelligent. Il suffit de modifier les paramètres de l'URL pour obtenir différentes versions. Combinés avec le cache long terme (Cache-Control: max-age=31536000), ils offrent les meilleures performances possibles pour vos images.