Lazy loading : ne chargez que ce que le visiteur voit
Le test #06 vérifie si les images et contenus embarqués se chargent uniquement quand le visiteur scrolle jusqu'à eux. Un gain de performance massif, natif dans les navigateurs modernes.
- Sans lazy loading, le navigateur télécharge TOUTES les images de la page au chargement — même celles invisibles en bas de page.
- Orilyt mesure la couverture : ≥ 50 % des images/iframes avec loading="lazy" = score 100, 0 % = score 30.
- L'attribut loading="lazy" est natif HTML — pas besoin de plugin, une ligne suffit.
Une page WordPress moyenne contient entre 10 et 40 images. Sans lazy loading, le navigateur les télécharge toutes dès l'ouverture de la page — y compris celles tout en bas, que le visiteur ne verra peut-être jamais.
Le résultat : des mégaoctets de données transférés pour rien, un premier affichage ralenti, et une expérience mobile dégradée. C'est du gaspillage pur.
Le test #06 d'Orilyt détecte ce problème et mesure la couverture du lazy loading. Voyons comment il fonctionne et comment transformer ses résultats en argument commercial.
Pourquoi charger des images invisibles est un problème
Sur un article de blog avec 15 images, le visiteur ne voit que 2 ou 3 images au premier écran. Sans lazy loading, le navigateur télécharge les 15 en parallèle, consommant de la bande passante et retardant l'affichage du contenu visible.
L'impact est sévère sur mobile : sur une connexion 4G, chaque image non différée ajoute des centaines de millisecondes au temps de chargement. Multipliez par 15 images et vous obtenez un site qui met 5 à 10 secondes à être pleinement chargé.
Google le sait : le Largest Contentful Paint (LCP) et le poids de page sont des facteurs de classement. Un site sans lazy loading se pénalise doublement — lenteur ET surconsommation de données.
Comment le test #06 fonctionne-t-il ?
Orilyt analyse le HTML de la page et compte deux choses :
- Le nombre total d'images (<img>) et d'iframes (<iframe>) sur la page.
- Le nombre de ces éléments qui utilisent l'attribut loading="lazy".
Le ratio entre les deux donne le taux de couverture. Le score est calculé ainsi :
Si aucune image ni iframe n'est détectée sur la page, le score est 50/100 (non mesurable — la page ne contient pas de candidats).
Le rapport détaillé affiche le nombre exact d'images, d'iframes, et le pourcentage de couverture. Vous savez immédiatement si le problème est critique ou mineur.
loading="lazy" : le lazy loading natif du navigateur
Depuis 2020, tous les navigateurs modernes supportent l'attribut HTML loading="lazy". Pas besoin de JavaScript, pas besoin de plugin — une simple modification de la balise <img> suffit :
<img src="photo.jpg" alt="Photo">
<img src="photo.jpg" alt="Photo" loading="lazy">
Le navigateur ne télécharge l'image que lorsque le visiteur s'approche de sa position dans la page. C'est transparent, sans impact sur le SEO (Google comprend loading="lazy"), et fonctionne avec les iframes aussi (vidéos YouTube, Google Maps).
Attention : les images visibles au premier écran (above the fold) ne doivent PAS être en lazy loading. Elles doivent se charger immédiatement pour un bon LCP. WordPress 5.9+ ajoute automatiquement loading="lazy" aux images, sauf la première.
Comment utiliser ce test dans vos propositions ?
Le lazy loading est un argument puissant : le client peut comprendre le problème en une phrase (« votre site télécharge 40 images au chargement alors que le visiteur n'en voit que 3 »).
Voici comment structurer votre recommandation avec la méthode FIA :
- Fait : « Votre page contient X images, mais seulement Y utilisent le chargement différé. Les Z autres sont téléchargées immédiatement, même invisibles. »
- Impact : « Le navigateur télécharge N Mo de données inutiles. Le temps de chargement mobile est doublé. Google pénalise les pages lentes. »
- Action : « Ajouter loading="lazy" à toutes les images sous le premier écran. Avec WordPress, activer le lazy loading natif ou utiliser un plugin (WP Rocket, Perfmatters). Temps estimé : 20 minutes. »
Le rapport Orilyt affiche le nombre exact d'images, le taux de couverture et un score clair — parfait pour illustrer le problème dans un devis.
Intégrer ce test dans votre workflow
Le test #06 s'intègre naturellement dans un diagnostic de performance global :
- Lancez l'audit Orilyt → le score « Chargement intelligent des images » apparaît dans la section Performance.
- Si le score est rouge (30/100), ouvrez le détail : vous verrez combien d'images et d'iframes sont sans lazy loading.
- Après correction, relancez l'audit et utilisez la comparaison avant/après pour montrer la réduction du poids de page au client.
Combiné aux tests poids de page (#28), images modernes (#05) et dimensions des images (#20), le lazy loading fait partie de la stratégie complète d'optimisation des médias.
Conclusion
Le lazy loading est l'un des leviers de performance les plus simples et les plus méconnus. Un attribut HTML natif, supporté par tous les navigateurs, qui peut réduire le poids initial de la page de 60 à 80 %.
Le test #06 d'Orilyt vous donne un diagnostic instantané : nombre d'images, couverture lazy loading, score clair. C'est un argument concret pour chaque proposition client.
Testez un site client maintenant — le ratio images totales vs images lazy-loaded réserve souvent des surprises.