Les images sont généralement les octets les plus lourds d'une page, donc les optimiser est le plus grand gain LCP. Trois leviers : les formats modernes, le dimensionnement responsive et la priorité de chargement.
AVIF et WebP compressent bien plus qu'un JPEG/PNG à qualité égale (l'AVIF est souvent 50 % plus petit que le JPEG). Servez-les avec un fallback pour que les vieux navigateurs continuent de fonctionner :
N'envoyez pas une image de 2000 px à un téléphone de 400 px. srcset laisse le navigateur choisir la bonne taille pour l'appareil :
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
sizes indique au navigateur la largeur d'affichage de l'image afin qu'il choisisse la plus petite source suffisante.
fetchpriority="high", loading="eager", et envisagez un preload.loading="lazy" pour qu'elle ne soit récupérée qu'au besoin.Conservez toujours width/height pour prévenir le CLS.
Un LCP lent n'est le plus souvent qu'une image hero surdimensionnée. Connaître les formats (AVIF/WebP), srcset pour la bonne résolution et la priorité correcte — sans lazy-loader l'image LCP — est la boîte à outils pratique que les recruteurs attendent, et c'est généralement le changement le plus impactant sur un site réel.
Une bibliothèque de questions d'entretien IT avec des réponses détaillées — du Junior au Senior.
Faire un don