Lazy Loading

Définition du chargement différé

Le lazy loading, ou chargement différé, est une technique web qui consiste à ne charger les images et les ressources d’une page web qu’au moment où l’utilisateur en a besoin. Plutôt que de tout télécharger d’un coup, le navigateur attend que l’utilisateur fasse défiler la page pour charger les images situées plus bas. Les images visibles à l’écran, au-dessus de la ligne de flottaison, s’affichent immédiatement, tandis que le reste des images se charge ensuite. Ce chargement différé allège l’affichage initial.

Comment fonctionne le chargement différé des images

Le principe du lazy loading repose sur la distinction entre les images visibles à l’écran et celles qui ne le sont pas encore. Quand un utilisateur arrive sur une page web, seules les images au-dessus de la ligne de flottaison comptent pour l’affichage initial. Le navigateur peut donc différer le chargement des images situées plus bas. À mesure que l’utilisateur défile la page, ces images sont chargées juste avant d’entrer dans l’écran. Ce mécanisme s’applique aux images, aux vidéos et aux iframes, un fonctionnement détaillé dans notre fiche responsive design. Moins de ressources à charger au départ signifie un affichage de la page plus rapide.

L’attribut loading lazy en HTML

Depuis quelques années, les navigateurs proposent un lazy loading natif. Il suffit d’ajouter l’attribut loading= »lazy » à une balise img src pour activer ce chargement différé, sans script JavaScript. Par exemple, on écrit img src= »image.jpg » alt loading= »lazy » pour différer le chargement de l’image. L’attribut loading lazy fonctionne dans Google Chrome comme dans Firefox. Sur une iframe, le même attribut loading= »lazy » s’utilise de la même façon. Pensez à préciser les dimensions width height de chaque image afin d’éviter les décalages d’affichage. Une image au format jpg ou png accepte cet attribut loading lazy. Ce code natif reste simple à poser sur une page web, comme expliqué dans notre définition du HTML.

Lazy loading et LCP de la page

Différer le chargement des images allège la quantité de données transmise au premier affichage. Moins d’images à charger signifie une page web qui s’affiche plus vite pour l’utilisateur. Ce chargement différé influence directement le LCP, l’un des indicateurs surveillés par Google pour la vitesse. Attention toutefois à ne jamais différer l’image principale au-dessus de la ligne de flottaison, car cela dégraderait le LCP. Le bon réglage consiste à charger immédiatement les images visibles à l’écran et à différer le reste. Bien utilisé, le procédé améliore la performance ressentie sans nuire au LCP, l’une des métriques abordées dans notre fiche Core Web Vitals.

Mettre en place le chargement différé

Sur un CMS comme WordPress, le chargement différé est souvent actif par défaut, avec l’attribut loading lazy ajouté automatiquement à chaque balise img. Vous pouvez aussi le gérer via un plugin dédié ou en écrivant l’attribut loading= »lazy » directement dans le code HTML. Côté CSS, certaines images de fond demandent une approche spécifique car elles ne passent pas par la balise img src. Pour le contrôle, ouvrez la page, défilez et observez dans l’onglet réseau du navigateur quelles images se chargent au fil du défilement. Ce contrôle garantit que les images, vidéos et iframes se chargent au bon moment, juste avant d’apparaître à l’écran. Pour identifier les pages où ce réglage fait défaut, un audit SEO reste le point de départ le plus fiable.

Questions fréquentes

Bien posé, le chargement différé accélère vos pages sans rien sacrifier à l’expérience. Pour aller plus loin, faites auditer la stratégie de chargement de votre site par une agence de search marketing.