Quand activer le lazy loading sur les images de votre site ?

Pourquoi charger d’un coup les trente images d’une page alors que le visiteur n’en voit que deux à l’arrivée ? Le « lazy loading » (chargement paresseux) répond à cette question : il ne charge chaque image qu’au moment où elle approche de l’écran. Bien utilisé, il accélère votre page. Mal utilisé, il peut faire disparaître vos images de Google.

Le principe : ne charger que ce qu’on voit

Le lazy loading consiste à différer le chargement des images (et autres éléments) qui ne sont pas encore visibles. Tant que le visiteur n’a pas fait défiler la page jusqu’à elles, ces images attendent. C’est, selon Google, une bonne pratique courante de performance et d’expérience utilisateur.

Pourquoi c’est bon pour la vitesse

En ne chargeant au départ que les images visibles, la page initiale est beaucoup plus légère et s’affiche plus vite. Le visiteur voit le contenu utile sans attendre que des images du bas de page, qu’il ne regardera peut-être jamais, finissent de se télécharger. C’est tout bénéfice, en particulier sur mobile et connexions lentes.

La règle d’or : pas les images du haut de page

Voici l’erreur à ne surtout pas commettre. Il ne faut jamais appliquer le lazy loading aux images immédiatement visibles à l’arrivée — l’image principale (le « hero »), le haut de page. Les différer retarderait l’affichage de ce que le visiteur voit en premier, ce qui dégrade la vitesse perçue. Le lazy loading est fait pour ce qui est plus bas, hors écran.

La méthode simple : loading="lazy"

Inutile de bricoler du code compliqué. L’attribut loading="lazy", intégré nativement au HTML, suffit : ajouté à une image, il dit au navigateur de la charger paresseusement. Il est supporté par tous les navigateurs modernes et par le robot de Google, et se comporte de façon prévisible. C’est la solution recommandée.

Le risque si c’est mal fait : images non indexées

Attention toutefois : si le lazy loading est mal implémenté (par exemple via des scripts qui ne se déclenchent qu’au défilement), Google peut ne pas « voir » vos images au moment où il analyse la page — et donc ne pas les indexer. Pour des images de produits, cela peut peser sur la visibilité de la page. D’où l’importance de vérifier.

Comment vérifier que c’est bien fait

Google recommande l’outil d’inspection d’URL de la Search Console : il montre la page telle que Google la voit après chargement. Si vos images apparaissent bien dans le code rendu, votre lazy loading fonctionne. C’est le test de référence.

Pourquoi parfois « un coup de main »

Sur beaucoup de CMS récents, le lazy loading est automatique et bien configuré — vous n’avez rien à faire. Mais il arrive qu’un réglage soit nécessaire, notamment pour exclure l’image principale du chargement paresseux, ou pour corriger une implémentation maison défaillante. Ces ajustements relèvent parfois d’un développeur — d’où le « parfois avec un coup de main ».

Comment savoir si c’est actif

Limpi indique si le lazy loading est en place sur vos pages. C’est un bon point de départ pour savoir si le sujet est déjà géré (souvent le cas) ou s’il mérite qu’on s’y penche, en gardant en tête la règle d’or sur les images du haut de page.

Le lazy loading, c’est servir les plats au fur et à mesure plutôt que tout poser d’un coup : plus léger, plus rapide — à condition de servir l’entrée tout de suite.

Pensez aussi aux dimensions de l’image

Un complément qui va de pair avec le lazy loading : indiquer la largeur et la hauteur de vos images dans le code. Pourquoi ? Parce qu’une image qui se charge en différé arrive « après » le reste de la page ; si le navigateur ne connaît pas sa taille à l’avance, il ne lui réserve pas de place, et le contenu déjà affiché peut sauter brutalement au moment où l’image apparaît. C’est désagréable pour le visiteur (on clique parfois au mauvais endroit) et c’est aussi un défaut de stabilité que Google mesure. En précisant les dimensions, vous réservez l’espace dès le départ : l’image se glisse à sa place sans bousculer la page. La plupart des CMS le font automatiquement, mais c’est un point à vérifier si vos pages « sautent » au chargement.

En résumé

Le lazy loading ne charge les images qu’à l’approche du scroll : la page initiale est plus légère et s’affiche plus vite. La règle d’or : ne jamais l’appliquer aux images visibles d’emblée (le hero, le haut de page). La méthode simple et fiable est l’attribut natif loading="lazy". Vérifiez ensuite, via l’inspection d’URL de la Search Console, que Google voit bien vos images.

Questions fréquentes

C’est quoi le lazy loading ?

Une technique qui ne charge les images qu’au moment où elles approchent de l’écran, allégeant la page au départ.

Est-ce bon pour le SEO ?

Oui, bien fait : la page se charge plus vite. Mal fait — notamment sur les images du haut de page — ça peut nuire.

Faut-il l’appliquer à toutes les images ?

Non. Jamais aux images visibles dès l’arrivée (hero, haut de page) : elles doivent se charger immédiatement.

Comment l’activer simplement ?

Avec l’attribut natif loading="lazy", supporté par les navigateurs modernes et par le robot de Google.

Comment vérifier qu’il fonctionne ?

Avec l’outil d’inspection d’URL de la Search Console, qui montre si Google voit bien vos images — ou via Limpi qui indique s’il est actif.

Sources et références

1. Google Search Central — Gérer le contenu chargé en lazy-loading (mis à jour déc. 2025)
2. MDN Web Docs (Mozilla) — L’élément <img> (attribut loading)