Comment, grâce à la mise en place simple et rapide du Lazy Loading, peut-on gagner en performance et donc en visibilité ? C’est le sujet que nous avons choisi d’aborder lors du dernier SEO Camp Lille. Retour sur notre présentation.
Pierre MONCLIN et Bastien MONTOIS ont eu le plaisir d’intervenir vendredi 11 janvier au SEO CAMP Day Lille 2019, un évènement où se rencontrent spécialistes du référencement et passionnés lors de conférences consacrées au SEO.
La présentation est également disponible directement sur SlideShare.
Rappel : le Lazy Loading, qu’est ce que c’est ?
Le Lazy Lading, ou chargement paresseux en français, est une technique qui permet de différer le chargement de contenus et ressources tant qu’ils ne sont pas nécessaires ou visibles à l’écran pour l’utilisateur.
Cette pratique peut être utilisée sur différentes ressources de la page. Si vous n’utilisez pas tout de suite un fichier JavaScript par exemple, il est préférable de le charger ultérieurement pour ainsi réduire le temps de chargement de la page et donc proposer une expérience utilisateur (UX) plus fluide.
On se concentre généralement sur les images car elles représentent un poids conséquent lors du chargement d’un site, mais les techniques évoquées par la suite peuvent également s’appliquer à différents types de resources (vidéo, iframe, fichier de style CSS, etc.)
Grâce à l’outil Lighthouse de Google, vous pouvez désormais identifier facilement les images qui sont susceptibles d’être chargées par défaut et donc que vous allez pouvoir optimiser.
Techniques et mise en place pour les images
La première étape consiste à empêcher le chargement des images à l’avance. Pour chaque image chargée grâce à la balise img, le navigateur utilise l’attribut src pour déclencher le chargement.
Placez d’abord l’URL de l’image dans un attribut autre que src. Nous utiliserons l’attribut data-src de la balise image.
Maintenant que src est vide, le navigateur ne déclenche pas le chargement de l’image.
Pour plus d’ergonomie et une meilleur expérience utilisateur, vous pouvez mettre une image de remplacement beaucoup plus petite dans l’attribut src de toutes vos images chargées de manière différée. Cela permettra de charger qu’une seule fois cette image réduite, et non plus l’ensemble de vos images.
Enfin, pour pouvoir identifier les images à charger de manière différée, nous leur incluons une classe à l’aide de l’attribut class. On utilisera ici lazy.
Il faut ensuite spécifier au navigateur quand charger l’image. Pour cela, nous allons devoir vérifier quand l’image entre dans l’espace visible de la fenêtre du navigateur. Deux méthodes sont disponibles.
Déclencher le chargement de l’image à l’aide d’événements Javascript
Dans cette technique, nous utilisons des écouteurs d’événement sur les événements scroll, resize et orientationChange dans le navigateur. Lorsque l’utilisateur fera défiler la page, modifiera la taille de la fenêtre ou pivotera son smartphone d’un portrait à paysage, on vérifiera les images qui sont visibles à l’écran et l’on déclenchera leur chargement.
Nous trouvons toutes les images sur la page qui doivent être affichées en différé et qui n’ont pas encore été chargées. A partir de ces images, nous vérifions celles qui sont maintenant dans la fenêtre d’affichage. Si elles sont entrées dans la fenêtre d’affichage, nous choisissons l’URL de l’attribut data-src et la mettons dans l’attribut src. Cela déclenche le chargement de l’image. Nous supprimons également la classe lazy qui identifie les images à charger pour les événements qui se déclenchent ultérieurement.
Utilisation de l’API Intersection Observer pour déclencher le chargement des images
Intersection Observer API est une API qui permet de détecter le moment où un élément entre dans la fenêtre d’affichage.
Vous trouverez ci-dessous un exemple d’utilisation de l’API Intersection Observer pour charger des images en différé. Nous attachons l’observateur sur toutes les images à charger en lazy load. Une fois que l’API détecte que l’élément est entré dans la fenêtre, en utilisant la propriété isIntersecting, nous sélectionnons l’URL de l’attribut data-src et la déplaçons dans l’attribut src pour que le navigateur déclenche le chargement de l’image. Une fois que cela est fait, nous supprimons la classe lazy de l’image et supprimons également l’observateur de cette image.
Cependant, comme les technologies des navigateurs évoluent sans cess, la prise en charge de l’API Intersection Observer n’est pas disponible sur tous les navigateurs. Vous pouvez tout de même utiliser un Polyfill pour les ceux qui ne le prennent pas en charge.
Les librairies utiles
Voici quelques librairies et plugins populaires pour vous permettre d’implémenter facilement le Lazy Loading sur votre site :
Petit conseil pour bien choisir votre librairie : regardez d’abord si elle est bien compatible avec les différents navigateurs et si elle est toujours maintenu. Un bon indicateur est le nombre d’étoiles (stars) sur Github.
D’autres librairies sont disponibles pour les principaux CMS sous forme de plugins, notamment Lazy Load by WP Rocket pour WordPress, Magento Lazy Image Loader sur Magento ou Lazy loading pour Prestashop.
Tester la bonne configuration SEO du Lazy Loading
Après avoir configuré votre Lazy Loading, vous devez absolument vous assurer que Google pourra bien parcourir l’intégralité des pages et médias de votre site.
Testez d’abord votre site via l’outil de test de compatibilité mobile de Google et vérifiez si toutes vos images sont bien dans le code de votre site en version mobile (recherchez le nombre d’occurences de balise HTML img).
La seconde vérification consiste à utiliser un script Puppeteer, une bibliothèque Node.js permettant de simuler une navigation sans passer par Chrome. Pour exécuter le script, vous aurez absolument besoin de Node.js.
La balise <noscript>
Si vous avez un doute concernant la visibilité de vos images par les moteurs de recherche, ajouter la balise<noscript>à toutes les images concernées par le Lazy Loading, cela permettra d’obtenir dans le code source de votre page un lien direct vers l’image même si le JavaScript n’est pas exécuté par le robot de crawl.
Pour aller plus loin…
Retrouvez tous nos exemples directement sur notre site démo.
- Guide de mise en place et bonne configuration du Lazy Loading par Google Search.
- Lazy Loading d’images et videos par Google Web Fundamentals.
- Rapport d’audit Google Chrome Lighthouse.
N’hésitez pas à partager si ça vous a plu, et également à commenter si vous avez des remarques ou des questions.