Lazy Loading
Le lazy loading est une technique de chargement différé qui ne charge les images et les vidéos que lorsqu'elles entrent dans le viewport (zone visible de l'écran). Le lazy loading réduit le LCP de 20-40 % et le poids initial de la page de 50-80 % sur les pages longues.
Lazy Loading : définition complète
Implémentation native en HTML : loading="lazy" sur les balises <img> et <iframe>. En Next.js, le composant <Image> applique le lazy loading par défaut (sauf sur les images au-dessus de la ligne de flottaison, qui doivent avoir priority).
Règle : les images above the fold (héro, logo) ne doivent PAS être en lazy loading — elles doivent charger immédiatement pour optimiser le LCP. Seules les images below the fold bénéficient du lazy loading. Mal configuré, le lazy loading peut augmenter le CLS.
Exemple concret
Une page avec 15 images (8 MB total) : sans lazy loading, tout charge au premier rendu. Avec lazy loading, seules les 3 premières images (1,2 MB) chargent. LCP : 4,1s → 1,8s.
Concepts associés
LCP
Le LCP mesure le temps de rendu du plus grand élément visible dans le viewport (image héro, bloc de texte, vidéo).
TechniqueCLS
Le CLS mesure la stabilité visuelle d'une page : les décalages inattendus de contenu pendant le chargement (texte qui bouge, images qui poussent le contenu).
TechniquePageSpeed
PageSpeed est le score de performance d'une page web mesuré par Google (0-100).
TechniqueNext.js
Next.
TechniqueResponsive Design
Le responsive design est une approche de conception web qui adapte automatiquement la mise en page d'un site à la taille de l'écran (mobile, tablette, desktop).
Besoin d’aide pour votre stratégie digitale ?
Audit offert. Recommandations en 48h. Zéro engagement.