Gratuit · dans votre navigateur

Vérificateur de lazy loading

Vérifiez que le chargement différé est bien placé : lazy sous la ligne de flottaison, jamais sur l'image principale, avec les bons attributs.

Code source HTML

Fonctionne dans votre navigateur. Rien de ce que vous saisissez n'est envoyé à nos serveurs.

Confidentialité et coût

Cet outil fonctionne dans votre navigateur. Ce que vous saisissez ou collez n'est pas envoyé à nos serveurs et l'utilisation est gratuite.

Comment ça marche

Collez le HTML de la page ; les <img> et <iframe> sont lus dans votre navigateur, en ignorant <noscript>.
L'outil estime l'image LCP (la première image non minuscule) et signale un loading="lazy" dessus, ainsi que les images du haut de page en différé.
Il contrôle aussi les valeurs de loading et fetchpriority, un lazy sans width/height, les motifs de lazy loading JavaScript et les iframes sans loading="lazy".
Vous obtenez un tableau image par image, exportable en CSV.

Exemple

Six images et une iframe YouTube : la première image (hero.jpg, 1200×600) est en loading="lazy", donc signalée comme risque LCP ; 3 images sont en lazy, 3 sans attribut ; deux images lointaines sans attribut peuvent passer en lazy ; la dernière est en lazy sans width/height ; l'iframe YouTube n'est pas différée. Résultat : 6 images, 3 lazy, 3 sans loading, 0 iframe différée sur 1.

Ce que signifie le résultat

Le chargement différé natif économise de la bande passante pour ce qui est hors écran, mais sur l'image principale visible dès l'ouverture il retarde le Largest Contentful Paint. L'outil devine cette image à partir du seul HTML ; c'est une estimation, car il ne connaît ni votre CSS ni la taille de l'écran. Vérifiez avec PageSpeed Insights ou Chrome DevTools.

Problèmes courants que cet outil aide à résoudre

loading="lazy" sur l'image du haut de page, qui retarde l'affichage du plus grand élément.
Des dizaines d'images chargées d'emblée alors qu'elles sont sous la ligne de flottaison.
Des images lazy sans width/height, qui décalent la mise en page à leur arrivée.
Des iframes YouTube ou de cartes chargées immédiatement, très lourdes pour ce qu'elles apportent.

Questions fréquentes

Faut-il mettre lazy sur toutes les images ?

Non. Réservez-le aux images placées sous la ligne de flottaison. L'image principale visible au chargement doit rester en chargement immédiat, idéalement avec fetchpriority="high".

Que fait fetchpriority="high" ?

Il indique au navigateur qu'une image est prioritaire pour la récupérer plus tôt. Il ne fonctionne bien que s'il reste rare : une ou deux images.

Le lazy loading natif fonctionne-t-il sur les iframes ?

Oui, loading="lazy" s'applique aussi aux iframes dans les navigateurs récents. C'est utile pour les vidéos et cartes intégrées placées plus bas.

Et si mon site utilise déjà un script de lazy loading ?

L'outil le signale (data-src, classe lazyload). Le loading="lazy" natif évite la dépendance à JavaScript et reste fonctionnel si le script échoue.