Lazy-load au-dessus du fold

Le lazy-loading native (loading="lazy") demande au navigateur d'attendre que l'image entre dans la viewport pour la télécharger. Sur une image visible immédiatement (logo, hero, première illustration), ça retarde le LCP (Largest Contentful Paint, l'un des Core Web Vitals critiques). Google a documenté qu'un mauvais LCP coûte des positions en SERP. La règle : pas de lazy-load au-dessus du fold, lazy-load partout en-dessous.

Heuristique en 3 critères : (1) position dans le source order — les 5 premières images sont quasi-toujours above-the-fold sur desktop ; (2) contexte structurel — images dans <header>, <nav>, dans les 5 000 premiers caractères de <main> ; (3) noms de classe — hero, cover, banner, above-fold, jumbo, featured-img... Toute image en loading="lazy" matchant un de ces critères est flaggée.

Pour les images au-dessus du fold : loading="eager" (par défaut, à omettre) + fetchpriority="high" (force le navigateur à les télécharger en priorité, gain LCP de 200-500 ms typique). Pour les images en-dessous du fold : loading="lazy". Et toujours : width et height renseignés sur tous les <img> pour éviter le CLS (layout shift).

Tant que vos noms de classes contiennent les patterns SEO classiques (hero, cover, banner...), oui. Pour des frameworks plus exotiques (utilities-only sans nom sémantique), on retombe sur les heuristiques 1 et 2 (position + contexte structurel). Si toutes vos images sont nommées img-1, img-2, l'outil flag les 5 premières et celles dans le header — ça couvre 90% des vrais cas.