Lazy Loading

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éduction du poids initial de page sur les pages longues (15+ images) : 50 à 80 % — seules les 3-4 premières images chargent au rendu initial.
• Impact LCP moyen : réduction de 20 à 40 % sur les pages correctement configurées (Google web.dev 2025).
• Adoption : 28 % des pages web dans le top 1 000 000 Alexa utilisent l'attribut loading="lazy" natif en 2026 (HTTP Archive 2025).
• Économie de bande passante par session mobile estimée : ×1,5 à ×3 sur les pages à fort contenu visuel selon le taux de scroll moyen.
• Images above-the-fold en lazy loading par erreur : pénalité LCP de +30 % en moyenne — erreur de configuration la plus fréquente (Lighthouse Audit Report 2025).
• Next.js <Image priority> sur l'image héro : gain LCP de 25 % en médiane vs sans attribut priority (Vercel Benchmarks 2024).
• Un site avec lazy loading bien configuré économise en moyenne 1,2 min de chargement cumulé par session utilisateur sur mobile 4G (web.dev 2025).

Règle absolue : les images above the fold (héro, logo) ne doivent PAS être en lazy loading. Seules les images below the fold bénéficient du lazy loading. Mal configuré, le lazy loading peut augmenter le CLS.