{"id":25682,"date":"2021-04-08T10:50:58","date_gmt":"2021-04-08T08:50:58","guid":{"rendered":"https:\/\/www.redacteur.com\/blog\/?p=25682"},"modified":"2021-04-08T10:50:58","modified_gmt":"2021-04-08T08:50:58","slug":"gestion-images-lazy-loading","status":"publish","type":"post","link":"https:\/\/www.redacteur.com\/blog\/gestion-images-lazy-loading\/","title":{"rendered":"Gestion des images dans la pratique du lazy loading"},"content":{"rendered":"

\u00c0 partir de mai 2021, Google change son algorithme de recherche en int\u00e9grant les Signaux Web Essentiels (Core Web Vitals). Ces nouvelles m\u00e9triques vont prendre en compte l\u2019interactivit\u00e9 de la page, l\u2019exp\u00e9rience de chargement et la stabilit\u00e9 visuelle de la mise en page. Autant vous dire que vos images vont devoir se faire tr\u00e8s l\u00e9g\u00e8res et \u00eatre stables si vous souhaitez garder votre position dans le moteur de recherche !<\/p>\n

Heureusement, il existe des techniques efficaces, dont la pratique du lazy loading<\/b> qui va vous permettre d\u2019optimiser vos performances en diff\u00e9rant le chargement de vos images.<\/p>\n

 <\/p>\n

Les int\u00e9r\u00eats du lazy loading des images pour votre temps de chargement<\/h2>\n

\"Loading<\/a><\/p>\n

La pratique du lazy loading<\/b><\/a> (ou d\u00e9layage) consiste \u00e0 retarder le chargement des visuels<\/b> qui sont \u00ab\u00a0hors \u00e9cran<\/b>\u00a0\u00bb jusqu\u2019\u00e0 ce que l\u2019utilisateur scroll dessus. Concr\u00e8tement, lorsque l\u2019internaute se connecte \u00e0 votre site, seules les images au-dessus de la ligne de flottaison<\/b> apparaissent imm\u00e9diatement. Les autres seront r\u00e9cup\u00e9r\u00e9es d\u00e8s le d\u00e9filement de la page. Cette technique, invisible pour l\u2019internaute, \u00e9vite ainsi de charger inutilement des images qui ne seraient pas consult\u00e9es.<\/p>\n

Le lazy loading<\/a> trouve surtout sa pertinence<\/b> sur les sites o\u00f9 les cat\u00e9gories de produits<\/b> sont nombreuses ou pour ceux dont les pages contiennent beaucoup de m\u00e9dias<\/b>.<\/p>\n

La cons\u00e9quence directe de la m\u00e9thode lazy load est que votre site internet s\u2019ouvre plus vite, c\u2019est bon pour votre r\u00e9f\u00e9rencement naturel<\/b> et pour l\u2019exp\u00e9rience utilisateur<\/b>\u00a0!<\/p>\n

Une page qui ne charge pas assez rapidement, surtout sur mobile, voit son taux de rebond<\/b> grimper en fl\u00e8che. Le taux de rebond est le pourcentage des utilisateurs \u00e0 quitter votre site d\u00e8s la premi\u00e8re page. Il peut atteindre les 90 % pour un temps de chargement de 5 secondes, passer \u00e0 106 % si votre page met 6 secondes \u00e0 charger, pour augmenter jusqu\u2019\u00e0 123 % au-del\u00e0 de 10 secondes ! <\/p><\/blockquote>\n

 <\/p>\n

Comment utiliser le lazy load pour \u00eatre correctement index\u00e9\u00a0?<\/h2>\n

Certains CMS int\u00e8grent le lazy loading<\/a> automatiquement. Pour v\u00e9rifier que vous en b\u00e9n\u00e9ficiez, t\u00e9l\u00e9chargez l\u2019extension Chrome Lighthouse<\/a>. Scannez une page de votre site (choisissez celle qui contient le plus d\u2019images) et v\u00e9rifiez que l\u2019option \u00ab\u00a0Defer offscreen images\u00a0\u00bb apparaisse dans la section \u00ab\u00a0Passed audits\u00a0\u00bb. Si l\u2019option ne s\u2019affiche pas, c\u2019est que votre site n\u2019utilise pas le lazy load.<\/p>\n

\"WP<\/a>
\u00a9WP Rocket<\/figcaption><\/figure>\n

Si votre site est sous WordPress, il existe de nombreux plug-ins<\/b> pour mettre en place le lazy load, comme WPRocket<\/b>. N\u00e9anmoins, vous allez devoir les configurer pour que vos images restent d\u00e9tectables par Google Bot. Auquel cas, vos visuels ne seraient purement et simplement pas index\u00e9s.<\/span><\/p>\n

Si vous utilisez une solution maison<\/b>, alors vous devrez installer un script<\/b> qui va vous permettre de mettre le lazy loading sur votre site. Voici un mod\u00e8le JavaScript qui supporte notamment les images \u00ab\u00a0responsives\u00a0\u00bb, donc pour mobile\u00a0:<\/span><\/p>\n

<img alt=\"A lazy image\" class=\"lazy\" data-src=\"lazy.jpg\" \/><\/span><\/span><\/code><\/pre>\n
 <\/p>\n
La m\u00e9thode native<\/h2>\n
La m\u00e9thode la plus simple pour int\u00e9grer le lazy load<\/strong> dans votre site est d’utiliser le lazy laoding natif<\/strong>. Aujourd’hui support\u00e9 par la plupart des navigateurs (Chrome, Firefox, Edge, Opera), elle permet au navigateur d’\u00e9viter de charger des biblioth\u00e8ques JavaScript <\/strong>suppl\u00e9mentaires et donc de diminuer encore les temps de chargement<\/a>. Pour int\u00e9grer le lazy loading natif \u00e0 votre site, il vous suffit d’ajouter ce script en incluant vos propres donn\u00e9es :<\/p>\n
1<\/code> <\/code><img src=\"exemple.png\" loading=\"lazy\" alt=\"\u2026\"><\/code> 2 <\/code><iframe src=\"https:\/\/exemple-domaine.fr\" loading=\"lazy\" alt=\"\u2026\"><\/iframe><\/code><\/pre>\n
 <\/p>\n
Les recommandations de Google pour int\u00e9grer le lazy loading \u00e0 votre site :<\/h3>\n
Si vous souhaitez int\u00e9grer le lazy loading sur votre site internet sans subir aucun impact sur votre r\u00e9f\u00e9rencement naturel<\/b>, le mieux est de suivre les conseils de Google lui-m\u00eame !<\/p>\n