Lazy Loading : Définition, Implémentation et Bonnes Pratiques

Comment fonctionne le Lazy Loading ?

Par défaut, un navigateur charge toutes les ressources référencées dans le HTML dès l'ouverture de la page, y compris les images situées tout en bas. Le lazy loading modifie ce comportement : les ressources hors de la fenêtre visible (viewport) ne sont chargées que lorsque l'utilisateur s'en approche en faisant défiler la page.

Il existe deux méthodes principales d'implémentation :

• Lazy loading natif (HTML) — L'attribut loading="lazy" sur les balises <img> et <iframe>. Supporté par tous les navigateurs modernes (Chrome, Firefox, Edge, Safari).
• Lazy loading JavaScript (IntersectionObserver) — L'API IntersectionObserver détecte quand un élément entre dans le viewport et déclenche alors son chargement. Plus flexible, permet de charger n'importe quel type de contenu.

Eager Loading vs Lazy Loading : quelle approche choisir ?

Quand utiliser (et ne pas utiliser) le Lazy Loading ?

Le lazy loading est extrêmement efficace, mais son utilisation inappropriée peut nuire au LCP et à l'expérience utilisateur. Voici les règles fondamentales :

Implémentation du Lazy Loading natif

L'implémentation la plus simple utilise l'attribut HTML natif. Aucune bibliothèque JavaScript n'est nécessaire :

• Images — <img src="photo.webp" loading="lazy" width="800" height="600" alt="Description">
• Iframes — <iframe src="video.html" loading="lazy" width="560" height="315"></iframe>

Pour les images au-dessus de la ligne de flottaison, utilisez explicitement loading="eager" (ou omettez l'attribut) et ajoutez fetchpriority="high" pour signaler leur importance au navigateur.

6 bonnes pratiques pour un Lazy Loading efficace

1. Ne jamais appliquer lazy loading à l'image LCP — L'image principale (hero, bannière) doit se charger immédiatement. Utilisez fetchpriority="high" pour la prioriser.
2. Toujours définir width et height — Évitez les décalages de mise en page (CLS) en réservant l'espace avant le chargement de l'image.
3. Utilisez des placeholders de basse qualité (LQIP) — Affichez une version floue en attendant le chargement de l'image haute résolution.
4. Préférez le format WebP ou AVIF — Combinez lazy loading avec des formats modernes pour un gain de performance maximal.
5. Testez avec un réseau lent — Simulez une connexion 3G dans Chrome DevTools pour vérifier que le chargement différé ne crée pas de "sauts" visibles.
6. Auditez avec Lighthouse — Le diagnostic "Defer offscreen images" vous indique les images qui bénéficieraient du lazy loading.