Qu'est-ce que le lazy loading ?

Le lazy loading est une technique qui retarde le chargement des ressources non critiques jusqu'à ce qu'elles soient réellement nécessaires. Au lieu de télécharger chaque image, iframe et vidéo d'une page dès l'analyse du HTML, le navigateur attend que ces éléments soient sur le point d'apparaître à l'écran. Cela signifie que le chargement initial de la page est plus rapide et plus léger, car le navigateur concentre sa bande passante sur ce que le visiteur voit en premier.

Comment fonctionne le lazy loading sous le capot

Il existe deux principales approches pour mettre en œuvre le lazy loading. La première est l'approche native du navigateur, qui repose sur l'attribut HTML loading="lazy". Lorsque le navigateur rencontre un élément avec cet attribut, il diffère la récupération de la ressource jusqu'à ce que l'élément atteigne une distance calculée par rapport au viewport. Chaque navigateur détermine ce seuil un peu différemment, mais l'objectif est le même : démarrer le téléchargement juste avant que l'utilisateur ne fasse défiler jusqu'à lui, afin que le contenu apparaisse de manière transparente.

La seconde approche utilise JavaScript, généralement via l'API Intersection Observer. Un petit script surveille la page et détecte quand des éléments d'espace réservé entrent dans le viewport. Une fois que c'est le cas, le script remplace la source d'image ou l'URL d'iframe réelle, déclenchant le téléchargement. Avant l'existence de l'API Intersection Observer, les développeurs s'appuyaient sur des écouteurs d'événements de défilement, qui étaient moins efficaces et pouvaient provoquer des saccades sur les appareils plus lents.

Ce qui peut être chargé en lazy

Le lazy loading s'applique à plusieurs types de ressources :

• Images : le cas d'usage le plus courant. Chaque balise <img> sous la ligne de flottaison est un bon candidat au lazy loading.
• Iframes : les vidéos YouTube intégrées, Google Maps et autres widgets tiers peuvent être lourds. Le lazy loading des iframes les empêche de bloquer le rendu initial de la page.
• Vidéos : les vidéos auto-hébergées avec la balise <video> peuvent utiliser preload="none" ou un lazy loading basé sur JavaScript pour différer le téléchargement.
• Images de fond : les images de fond CSS chargées via background-image ne peuvent pas utiliser l'attribut natif loading, elles nécessitent donc des solutions JavaScript ou une structuration CSS soignée.

Lazy loading natif du navigateur vs bibliothèques JavaScript

Le lazy loading natif est l'option la plus simple. Vous ajoutez loading="lazy" à votre balise <img> ou <iframe> et le navigateur s'occupe de tout. Pas de JavaScript nécessaire, pas de taille de fichier supplémentaire, pas de configuration. Cela fonctionne dans tous les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge.

<img src="photo.jpg" loading="lazy" width="800" height="600" alt="Description" />
<iframe src="https://www.youtube.com/embed/xyz" loading="lazy"></iframe>

Les bibliothèques JavaScript comme lazysizes, lozad.js ou vanilla-lazyload offrent plus de contrôle. Elles prennent en charge les images de fond, peuvent ajouter des animations de fondu et vous permettent de personnaliser le seuil de chargement. Cependant, elles ajoutent du JavaScript supplémentaire à votre page et nécessitent une initialisation correcte. Pour la plupart des sites WordPress, le lazy loading natif est le meilleur choix en raison de sa simplicité et de son absence de surcharge de performance.

WordPress et le lazy loading natif depuis la version 5.5

WordPress ajoute automatiquement loading="lazy" aux images depuis la version 5.5, sortie en août 2020. Cela s'applique aux images dans le contenu des articles, aux images mises en avant et aux autres images émises par les fonctions du cœur. WordPress ajoute également loading="lazy" aux iframes intégrées dans le contenu. Depuis WordPress 5.9, la première image du contenu (celle qui se trouve le plus probablement au-dessus de la ligne de flottaison) est automatiquement exclue du lazy loading pour éviter de nuire aux scores LCP.

Impact sur les Core Web Vitals et considérations LCP

Le lazy loading a une relation directe avec les Core Web Vitals, en particulier le Largest Contentful Paint (LCP). Bien fait, le lazy loading améliore le LCP car le navigateur peut prioriser le téléchargement du plus grand élément visible sans rivaliser pour la bande passante avec les images sous la ligne de flottaison. Cependant, si vous chargez accidentellement en lazy l'élément LCP lui-même (souvent l'image hero ou une grande bannière au-dessus de la ligne de flottaison), vous aggraverez le LCP. Le navigateur attendra de récupérer cette image jusqu'à ce qu'il calcule la proximité du viewport, ajoutant un délai inutile.

Pour les images qui ne sont pas chargées en lazy mais qui sont critiques, envisagez d'ajouter fetchpriority="high" pour indiquer au navigateur de prioriser ce téléchargement :

<img src="hero.jpg" fetchpriority="high" width="1200" height="600" alt="Hero banner" />

Quand NE PAS faire de lazy loading

Toutes les images ne devraient pas être chargées en lazy. Il y a des exceptions claires :

• Images hero : la bannière principale ou l'image vedette qui apparaît immédiatement au chargement de la page ne doit jamais être chargée en lazy.
• Logo et images d'identité du site : elles se trouvent généralement dans l'en-tête et sont visibles sans défilement.
• Première image de contenu visible : toute image qui apparaît dans le viewport initial doit être chargée immédiatement.
• Candidats LCP : si une image est le plus grand élément visible lors du premier rendu de la page, la charger en lazy nuira directement à votre score LCP.

Pour ces images, utilisez loading="eager" (le comportement par défaut) ou ajoutez explicitement fetchpriority="high" afin que le navigateur les télécharge le plus rapidement possible.

Extensions WordPress pour le lazy loading

Bien que WordPress gère nativement le lazy loading de base, plusieurs extensions offrent des fonctionnalités étendues :

• WP Rocket : inclut le lazy loading pour les images, iframes et vidéos dans le cadre de sa suite plus large d'optimisation des performances. Il peut également remplacer les vidéos YouTube intégrées par une vignette légère qui ne charge le lecteur réel qu'au clic.
• Autoptimize : principalement une extension d'optimisation CSS/JS, mais inclut le lazy loading des images via l'attribut natif ou un repli JavaScript.
• a3 Lazy Load : une extension dédiée au lazy loading avec un contrôle granulaire sur les éléments chargés en lazy, y compris la prise en charge des images de fond et des sélecteurs personnalisés.
• Perfmatters : une extension de performance légère qui inclut le lazy loading aux côtés d'autres optimisations comme la gestion des scripts et le nettoyage de la base de données.

Lazy loading et SEO

Le robot de Google (Googlebot) effectue le rendu du JavaScript, il peut donc voir les images chargées en lazy tant qu'elles finissent par se charger pendant le rendu. Cependant, s'appuyer sur du lazy loading basé sur JavaScript signifie que Googlebot doit exécuter vos scripts pour découvrir ces images. Le lazy loading natif avec loading="lazy" est plus sûr pour le SEO car l'attribut src réel est présent dans le HTML dès le départ. Les moteurs de recherche peuvent trouver l'URL de l'image sans exécuter de JavaScript. Assurez-vous toujours que vos images ont des attributs alt appropriés, quelle que soit la méthode de lazy loading que vous choisissez.

Ce que vérifie InspectWP

InspectWP analyse les images de votre page et indique si l'attribut loading="lazy" est présent sur chaque image. Cela vous aide à vérifier que le lazy loading est correctement implémenté sur l'ensemble de votre site WordPress et à identifier les images qui pourraient manquer cet attribut ou être incorrectement chargées en lazy alors qu'elles devraient être chargées immédiatement.