Lazy Loading, des pages web plus rapides sans risque SEO

Les images sont au cœur de votre site web ? Si vous prenez la performance de votre site au sérieux, vous les avez probablement optimisées.

Mais avez-vous pensé à les charger en Lazy Load ? Le Lazy Load des images améliore l’expérience utilisateur en libérant de la bande passante pour le contenu important.

Certains rejettent la technique pour des questions de SEO. Mais un Lazy Load de vos images ne les empêche pas d’être indexées. Voyons pourquoi vous devriez implémenter un Lazy Load d’images et comment vous assurer qu’il soit compatible avec votre SEO.

Lazy loading : optimiser les images de votre site Web

Les images sont partout sur le Web, mais servir l’image la plus adaptée au contexte courant peut s’avérer très difficile. L’image doit être optimisée, adaptée à sa zone de rendu et chargée uniquement si nécessaire.

Le Lazy Loading d’images est un ensemble de techniques conçues pour répondre à ce dernier besoin en différant le téléchargement de chaque image jusqu’au moment où elle est nécessaire : après une interaction spécifique, à la suite d’un défilement… ou jamais. L’occasion de préserver de précieux octets sur les forfaits de vos visiteurs (dans certains pays, les forfaits sont très limités en volume de données), mais aussi d’économiser de nombreuses requêtes vers vos serveurs. Une optimisation bienvenue quand vous préparez vos infrastructures à gérer des pics de trafic.

Quelques cas d’usage du Lazy Loading

Il y a de nombreux cas concrets du Lazy Loading. Prenons quelques minutes pour citer quelques exemples.

Résultats de recherche E-commerce (mais pas que)

Ces pages contiennent souvent tellement de résultats que beaucoup de produits se trouvent en dehors de la fenêtre. Est-il utile de télécharger leurs images ? Avec le Lazy Loading, vous pouvez retarder leur chargement jusqu’à ce que la page soit déroulée.

Les carrousels

Pourquoi l’utilisateur devrait-il charger toutes les images alors qu’il ne visualise que la première pendant quelques secondes ? Utilisez le Lazy Loading afin que seule la première image soit chargée au plus vite, et lancez le téléchargement de l’image suivante en arrière-plan, quelques secondes avant l’animation du carrousel. Et ainsi de suite.

Menus et onglets

Les images contenues dans un menu ou un onglet sont souvent masquées, affichées seulement après un clic. Avec le Lazy Loading, vous pouvez retarder le chargement de ces images jusqu’à ce que le bouton affichant l’élément soit survolé ou cliqué.

… et bien d’autres situations

Suivant la nature de votre page, d’autres cas sont envisageables. Aucune image ne devrait être incluse à vos pages sans que vous ne vous soyez posé la question d’en retarder le téléchargement jusqu’à un moment pertinent. Car à la clé, il y a d’importants gains de performance.

Il en faut peu pour être heureux

En retardant le chargement des images qui ne sont pas immédiatement nécessaires (ou, dans certains cas, en ne les chargeant pas du tout), le navigateur économise des ressources (bande passante aussi bien que CPU). Les ressources préservées peuvent être affectées au contenu plus critique : la page se charge plus rapidement et l’expérience utilisateur est améliorée.

Les gains sont aussi présents côté serveur : le processeur et la bande passante nécessaires pour fournir les ressources sont moins sollicités, réduisant les coûts d’hébergement et/ou de CDN.

Comme indiqué dans l’introduction, utiliser du Lazy Loading n’empêche pas vos images d’être indexées par les moteurs de recherche. Mais suivant les techniques utilisées, cela peut être compliqué.

Pour préserver votre référencement naturel et offrir une bonne expérience utilisateur, il est donc essentiel de comprendre comment le Lazy Loading fonctionne, et comment l’utiliser sans risque.

Le Lazy Loading natif pour les images et les iframes

Depuis quelques années, HTML propose un attribut “loading” qui indique au navigateur s’il doit récupérer une image (ou une iframe) immédiatement ou différer son chargement jusqu’à ce que certaines conditions soient remplies.Prenons une image décorative (notez que par souci d’accessibilité, nous plaçons une alternative vide pour que l’image soit ignorée par les outils de restitution) :

Trois cas de figure se présentent alors :

1. Si cette image n’est pas dans la partie visible de la page et que nous souhaitons en accélérer le chargement, nous pouvons utiliser la valeur “eager” de l’attribut “loading” :

2. Si cette image n’est pas dans la partie visible de la page et que nous souhaitons indiquer au navigateur d’utiliser du Lazy Loading, nous pouvons utiliser la valeur “lazy” de l’attribut “loading” :

3. Si cette image est dans la partie visible de la page, ne faites rien ! Le navigateur fonctionnera comme il le fait par défaut, et s’occupera de télécharger l’image de la meilleure manière possible.

Ce dernier point est particulièrement important : vous n’avez pas besoin –et ne devriez pas– appliquer un Lazy Loading aux images situées dans la partie visible de la page. Le résultat sera moins performant que si vous n’aviez rien fait.

Cette erreur est pourtant très commune ! D’après le Web Almanac 2021, sur 9.3% des pages, l’image la plus visible et la plus importante (qui sert notamment à mesurer le Largest Contentful Paint) est porteuse d’un attribut “loading=”lazy”, ce qui pénalise son téléchargement.**** AVEC CONTENTSQUARE

Besoin de déterminer quels sont les éléments visibles au chargement d’une page chez vos utilisateurs ? Chaque navigateur ayant une taille qui dépend du matériel utilisé, la question est légitime. Avec Contentsquare Zoning Analysis, la réponse vous sera accessible en quelques secondes via l’indication visuelle “Ligne de Flottaison”.

***

Lazy Loading natif, une solution magique ?

Le Lazy Loading natif est une solution simple à implémenter, bien supportée et sans conséquence sur les navigateurs qui ne le supportent pas (qui chargeront les images comme avant). Son périmètre de fonctionnement s’étend aux iframes, ce qui en fait également un très bon outil pour différer le chargement de contenus web embarqués.

Cependant, son implémentation est grandement portée par le navigateur, qui choisit seul la quantité d’images à charger immédiatement et la manière de le faire.Par exemple, pour éviter une expérience déceptive lors du défilement, Chrome télécharge davantage d’images sur une connexion plus lente que sur une connexion plus rapide.

Sur une connexion 4G et supérieure, Chrome télécharge dès le chargement initial de la page toutes les images visibles, les images en “eager” mais aussi –et c’est plus surprenant– toutes les images en “lazy” située jusqu’à 1250 pixels du haut de la page. Sur une connexion 3G ou inférieur, Chrome considérera les images jusqu’à 2500 pixels du haut de la page.

La manière de télécharger les images est très simple : aucun élément visuel n’est affiché en lieu et place de l’image afin de permettre à l’utilisateur de comprendre qu’un téléchargement est en cours. Le téléchargement de l’image se produit quand le navigateur le souhaite et quand l’image est disponible, elle est affichée instantanément sans animation particulière.

Enfin, la Lazy Loading natif ne s’applique qu’aux éléments