Vérificateur de lazy loading
Les bonnes images au bon moment
Ce vérificateur de lazy loading lit chaque image et chaque cadre d’une page dans l’ordre et juge quand chacun se charge. Il repère les images plus bas qui chargent trop tôt, les images principales qui attendent trop et les images sans espace réservé.
- GratuitPrix
- LCP, CLSMesure
- AucuneInscription
- RienConservé
Vérificateur de lazy loading
Quelles images attendent le défilement, lesquelles chargent trop tôt et lesquelles retardent le plus grand affichage
- Images et cadres
- 0
- Attendent le défilement
- 0
- Chargent tout de suite
- 0
- À améliorer
- 0
- Déjà correctes
- 0
| # | Élément | Chargement | Verdict | Que faire |
|---|---|---|---|---|
| Collez une adresse ci-dessus et l’ordre de chargement arrive ici. | ||||
La position est lue dans l’ordre du code, car une page récupérée sur un serveur n’est jamais mise en page. Les premières images sont traitées comme celles qu’un visiteur voit d’abord, ce qui est vrai sur presque toutes les mises en page et mérite un coup d’œil sur la vôtre.
Prêt. Collez une adresse publique et ce serveur lit ses images une fois.
Le lazy loading a deux faces
Le lazy loading demande au navigateur de ne télécharger une image que lorsqu’elle va apparaître à l’écran.
Utilisé sur les images plus bas, il économise des données et fait arriver le haut de la page plus tôt. En revanche, utilisé sur la première image, il fait l’inverse.
La première grande image est en général ce que les Core Web Vitals mesurent comme Largest Contentful Paint. Si elle attend le défilement, toute la page est jugée lente.
Donc la bonne réponse dépend de la place de chaque image et du moment où elle est utile. C’est la question que ce vérificateur pose à chacune d’elles.
Quelles images doivent attendre
Tout ce qu’un visiteur doit faire défiler pour atteindre. Les galeries, les images au fond d’un article, les logos du pied de page et les vidéos intégrées en font partie.
Les iframes demandent un soin à part. Une vidéo ou une carte intégrée charge toute une seconde page, donc loading="lazy" sur un iframe économise souvent plus que sur n’importe quelle image.
Quelles images ne doivent pas attendre
L’image principale, la photo produit en haut et le logo de l’en-tête doivent tous se charger tout de suite.
En fait, la plus grande image en haut peut aller plus loin. fetchpriority="high" demande au navigateur de la télécharger avant les autres, ce qui améliore souvent nettement le Largest Contentful Paint.
Demander une priorité haute et un chargement différé sur la même image est une contradiction, c’est pourquoi le vérificateur la signale.
Pourquoi width et height comptent ici
Une image sans width ni height n’a pas d’espace réservé. Quand elle arrive enfin, tout ce qui est dessous saute, et les Core Web Vitals le comptent comme un décalage de mise en page.
Les images différées aggravent cela, car elles arrivent pendant que le lecteur fait déjà défiler. Par conséquent, le vérificateur traite l’absence de dimensions comme une erreur sur chaque image.
Donnez aux attributs les proportions réelles de l’image. Le CSS responsive peut quand même la redimensionner, car le navigateur n’a besoin que du ratio.
Lazy loading natif ou par script
Les anciennes extensions cachent la vraie adresse dans data-src et la remplacent par un script. Cela marche pour les visiteurs, mais les robots et quiconque n’a pas JavaScript ne voient qu’un espace réservé.
L’attribut loading="lazy" ne demande aucun script et tous les navigateurs actuels le prennent en charge. C’est pourquoi le vérificateur le recommande partout où il trouve l’ancien schéma.
Comment la position est jugée
Une page lue sur un serveur n’est jamais mise en page, donc le vérificateur utilise l’ordre du code. Les trois premières images comptent comme le premier écran, ce qui est vrai sur presque toutes les mises en page, même si un coup d’œil sur la vôtre s’impose.
Sur cette page
- L’outil
- Le lazy loading a deux faces
- Comment utiliser le vérificateur de lazy loading
- Ce qui distingue ce vérificateur de lazy loading
- Règles pour le lazy loading des images
- Six erreurs de lazy loading qui ralentissent les pages
- Les questions fréquentes sur le lazy loading
- Outils pour des images plus rapides
Continuer
Comment utiliser le vérificateur de lazy loading
Une adresse en entrée ; toutes les images et tous les cadres en sortie, dans l’ordre de la page.
- 1
Indiquez l’URL à examiner
Prenez la page qui compte le plus pour vous, souvent l’accueil ou une page d’atterrissage importante.
- 2
Observez les trois lignes du haut
Ce sont les images qu’un visiteur voit d’abord. Aucune ne devrait donc attendre le défilement.
- 3
Puis lisez plus bas
Sous le premier écran, chaque image et chaque cadre devraient porter loading="lazy".
- 4
Corrigez les tailles en dernier
Ajoutez width et height là où ils manquent, puis relancez la vérification.
Ce qui distingue ce vérificateur de lazy loading
Compter loading="lazy" est facile. En revanche, savoir où il aide et où il nuit, c’est la partie utile.
La position d’abord
Chaque image est jugée selon sa place, donc une image principale différée est une erreur et non une réussite.
Le plus grand affichage protégé
Les premières images qui attendent, et la priorité haute mêlée au lazy loading, sont signalées comme les corrections les plus urgentes.
Le décalage de mise en page vérifié
L’absence de width et height est repérée sur chaque image, car les images différées aggravent le saut.
Les chargeurs par script repérés
Les espaces réservés data-src que les robots ne voient jamais sont nommés, avec l’attribut natif à utiliser à la place.
Les cadres aussi
Les vidéos et cartes intégrées sont vérifiées avec les images, car elles sont souvent l’élément le plus lourd de la page.
Export en un clic
Copiez le rapport ou téléchargez-le en CSV pour la personne qui construit la page.
Règles pour le lazy loading des images
Huit habitudes qui font du lazy loading un gain plutôt qu’une pénalité.
- Ne différez jamais l’image principale. La première grande image est ce que mesure le Largest Contentful Paint, donc elle doit commencer à se télécharger tout de suite.
- Donnez une priorité haute à l’image principale. fetchpriority="high" sur cette seule image la place en tête de file.
- Différez tout ce qui est sous le premier écran. Les images et cadres qu’il faut faire défiler pour atteindre devraient porter loading="lazy".
- N’oubliez jamais les attributs width et height. Ils réservent l’espace, ainsi rien ne saute quand l’image arrive.
- Préférez l’attribut natif. loading="lazy" ne demande aucun script, fonctionne dans tous les navigateurs actuels, et les robots voient la vraie adresse.
- Différez d’abord les intégrations. Un cadre vidéo ou carte peut peser plus que toutes les images de la page réunies.
- Surveillez les réglages du thème. Beaucoup de thèmes ajoutent loading="lazy" à toutes les images, y compris la première. Désactivez-le donc pour l’image principale.
- Testez sur un téléphone. Le premier écran d’un téléphone montre moins d’images qu’un ordinateur, alors vérifiez lesquelles apparaissent vraiment en premier.
Six erreurs de lazy loading qui ralentissent les pages
Chacune ressemble à une optimisation et, pourtant, coûte de la vitesse en silence.
Mettre loading=lazy jusque sur l’image principale
Y compris la première, ce qui retarde le plus grand affichage à chaque visite.
Une priorité haute sur une image différée
Les deux instructions s’annulent, et le navigateur ne peut en suivre qu’une.
Ni width ni height
La page saute à l’arrivée de chaque image, ce qui est exactement ce que mesure le décalage de mise en page.
Le lazy loading uniquement par script
Les robots et les visiteurs sans JavaScript voient un espace vide au lieu de l’image.
Oublier les intégrations
Un cadre vidéo en bas d’un article charge quand même son lecteur tout de suite sans loading="lazy".
Un plugin de lazy loading par-dessus le chargement natif
Si une extension et un thème s’en chargent tous les deux, les images peuvent attendre deux fois, ou ne jamais se charger.
Les questions fréquentes sur le lazy loading
Que fait exactement le chargement différé sur une page web ?
Il retarde le téléchargement d’une image ou d’un cadre jusqu’à ce qu’il soit sur le point d’apparaître à l’écran, ainsi le haut de la page charge plus vite.
Le lazy loading aide-t-il le SEO ?
Indirectement. Les pages plus rapides obtiennent de meilleurs Core Web Vitals. Cependant, appliquer le lazy loading à la mauvaise image dégrade le score.
Faut-il charger la première image en différé ?
Non. La première grande image est en général l’élément Largest Contentful Paint, donc elle doit se charger tout de suite, idéalement avec fetchpriority="high".
loading="lazy" est-il pris en charge partout ?
Tous les navigateurs actuels le prennent en charge pour les images, et de plus les principaux le font aussi pour les iframes.
Google voit-il les images en lazy loading ?
Avec loading="lazy", oui, car la vraie adresse reste dans src. En revanche, avec des chargeurs uniquement en script, cela dépend du script, c’est pourquoi l’attribut natif est plus sûr.
Pourquoi le vérificateur veut-il width et height ?
Sans eux, le navigateur ne peut pas réserver l’espace, donc la page bouge quand l’image arrive. Le CSS peut pourtant redimensionner l’image.
Comment le vérificateur sait-il ce qui est au-dessus de la ligne de flottaison ?
Il utilise l’ordre du code, car une page lue sur un serveur n’a pas de mise en page. Ainsi, les trois premières images sont traitées comme le premier écran.
Pourquoi le rapport n’affiche-t-il pas toutes les images ?
Les images ajoutées ensuite par un script, ou définies en fond CSS, ne sont pas dans la page envoyée par le serveur, donc elles n’apparaissent pas.
Faut-il charger les iframes en différé ?
Oui, dès qu’ils se trouvent sous le premier écran. Un cadre de vidéo ou de carte est souvent l’élément le plus lourd de la page.
La page vérifiée est-elle stockée ?
Non. L’adresse sert à une seule lecture puis disparaît, et rien n’en est conservé.
Outils pour des images plus rapides
L’ordre de chargement n’est qu’une partie de la vitesse des images. Voici les réponses aux autres cas.
Convertissez les images lourdes en WebP ou AVIF sans les envoyer.
Ouvrir l’outil →Vérificateur de texte alternatif des images
Un verdict sur le texte alternatif de chaque image d’une page.
Ouvrir l’outil →Compression, cache et les huit en-têtes de sécurité, avec le correctif.
Ouvrir l’outil →
Prêt à vérifier votre ordre de chargement ?
Collez une adresse et voyez quand chaque image se charge. Le vérificateur de lazy loading est gratuit, sans compte, et ne garde aucune trace de la page.