À partir de mai 2021, Google change son algorithme de recherche en intégrant les Signaux Web Essentiels (Core Web Vitals). Ces nouvelles métriques vont prendre en compte l’interactivité de la page, l’expérience de chargement et la stabilité visuelle de la mise en page. Autant vous dire que vos images vont devoir se faire très légères et être stables si vous souhaitez garder votre position dans le moteur de recherche !
Heureusement, il existe des techniques efficaces, dont la pratique du lazy loading qui va vous permettre d’optimiser vos performances en différant le chargement de vos images.
Les intérêts du lazy loading des images pour votre temps de chargement
La pratique du lazy loading (ou délayage) consiste à retarder le chargement des visuels qui sont « hors écran » jusqu’à ce que l’utilisateur scroll dessus. Concrètement, lorsque l’internaute se connecte à votre site, seules les images au-dessus de la ligne de flottaison apparaissent immédiatement. Les autres seront récupérées dès le défilement de la page. Cette technique, invisible pour l’internaute, évite ainsi de charger inutilement des images qui ne seraient pas consultées.
Le lazy loading trouve surtout sa pertinence sur les sites où les catégories de produits sont nombreuses ou pour ceux dont les pages contiennent beaucoup de médias.
La conséquence directe de la méthode lazy load est que votre site internet s’ouvre plus vite, c’est bon pour votre référencement naturel et pour l’expérience utilisateur !
Une page qui ne charge pas assez rapidement, surtout sur mobile, voit son taux de rebond grimper en flèche. Le taux de rebond est le pourcentage des utilisateurs à quitter votre site dès la première page. Il peut atteindre les 90 % pour un temps de chargement de 5 secondes, passer à 106 % si votre page met 6 secondes à charger, pour augmenter jusqu’à 123 % au-delà de 10 secondes !
Comment utiliser le lazy load pour être correctement indexé ?
Certains CMS intègrent le lazy loading automatiquement. Pour vérifier que vous en bénéficiez, téléchargez l’extension Chrome Lighthouse. Scannez une page de votre site (choisissez celle qui contient le plus d’images) et vérifiez que l’option « Defer offscreen images » apparaisse dans la section « Passed audits ». Si l’option ne s’affiche pas, c’est que votre site n’utilise pas le lazy load.
Si votre site est sous WordPress, il existe de nombreux plug-ins pour mettre en place le lazy load, comme WPRocket. Néanmoins, vous allez devoir les configurer pour que vos images restent détectables par Google Bot. Auquel cas, vos visuels ne seraient purement et simplement pas indexés.
Si vous utilisez une solution maison, alors vous devrez installer un script qui va vous permettre de mettre le lazy loading sur votre site. Voici un modèle JavaScript qui supporte notamment les images « responsives », donc pour mobile :
<img alt="A lazy image" class="lazy" data-src="lazy.jpg" />
La méthode native
La méthode la plus simple pour intégrer le lazy load dans votre site est d’utiliser le lazy laoding natif. Aujourd’hui supporté par la plupart des navigateurs (Chrome, Firefox, Edge, Opera), elle permet au navigateur d’éviter de charger des bibliothèques JavaScript supplémentaires et donc de diminuer encore les temps de chargement. Pour intégrer le lazy loading natif à votre site, il vous suffit d’ajouter ce script en incluant vos propres données :
1<img src="exemple.png" loading="lazy" alt="…">2<iframe src="https://exemple-domaine.fr" loading="lazy" alt="…"></iframe>
Les recommandations de Google pour intégrer le lazy loading à votre site :
Si vous souhaitez intégrer le lazy loading sur votre site internet sans subir aucun impact sur votre référencement naturel, le mieux est de suivre les conseils de Google lui-même !
- Commencez par vérifier votre code avec l’outil de Google « Test d’optimisation mobile ». Recherchez si chacune des balises HTML <img correspondent aux images de votre site.
- S’il manque des images, depuis votre site, ajoutez la balise <noscript> aux images concernées. Vous permettrez également aux internautes dont le navigateur ne supporte pas le JavaScript de pouvoir afficher facilement vos images.
- Re-testez votre site.
Si vous avez le moindre doute, ajouter la balise <noscript> à chacune de vos images. Ne vous inquiétez pas, vous ne serez aucunement pénalisé sur votre SEO, bien au contraire !
Conclusion
La gestion des images dans la pratique du lazy loading demande de connaître les scripts associés et de maîtriser le codage de son site web.
Si vous souhaitez augmenter l’expérience utilisateur de votre site, sans faire d’erreur de codage, nous vous conseillons fortement de faire appel aux experts SEO de Redacteur.com !
