{"id":3994,"date":"2019-06-28T08:00:48","date_gmt":"2019-06-28T08:00:48","guid":{"rendered":"https:\/\/www.yateo.com\/blog\/?p=3994"},"modified":"2021-07-05T09:44:43","modified_gmt":"2021-07-05T07:44:43","slug":"lazy-loading-natif-les-navigateurs-chrome-et-firefox-optimisent-le-chargement-des-images","status":"publish","type":"post","link":"https:\/\/www.yateo.com\/blog\/lazy-loading-natif-les-navigateurs-chrome-et-firefox-optimisent-le-chargement-des-images","title":{"rendered":"Lazy-loading natif : les navigateurs Chrome et Firefox optimisent le chargement des images !"},"content":{"rendered":"

Le temps de chargement des pages<\/strong> est devenu\u00a0un enjeu majeur en termes de SEO<\/strong> : ce challenge inclut forc\u00e9ment la rapidit\u00e9 de chargement des images contenues dans les pages web. En effet, les internautes fuient les sites dont le temps de chargement est sup\u00e9rieur \u00e0 3 secondes. Il est donc essentiel d’optimiser la rapidit\u00e9 d’affichage en tout point.<\/strong> Pour aider les d\u00e9veloppeurs dans cette d\u00e9marche, Chrome et Firefox travaillent sur l’int\u00e9gration du lazy-loading natif.<\/strong> Explications.\u00a0<\/p>\n

Le lazy-loading, c’est quoi ?<\/h3>\n

Cette technologie permet aux webmasters de charger en priorit\u00e9 certaines images et scripts.\u00a0<\/strong><\/p>\n

Autrement dit, les premiers \u00e9l\u00e9ments visibles par les internautes se chargent en priorit\u00e9,<\/strong> permettant d’optimiser le temps d’affichage des pages. Les \u00e9l\u00e9ments restants se chargent au fur et \u00e0 mesure que l’internaute fait d\u00e9filer la page.<\/strong><\/p>\n

L’arriv\u00e9e du lazy-loading n’est pas seulement int\u00e9ressante du point de vue de l’exp\u00e9rience utilisateur. Elle est \u00e9galement b\u00e9n\u00e9fique pour le web en g\u00e9n\u00e9ral car cette technologie r\u00e9duit consid\u00e9rablement la consommation de la bande passante et l’utilisation de la m\u00e9moire.<\/strong><\/p>\n

la mont\u00e9e en puissance du lazy-loading<\/h3>\n

Offrir une exp\u00e9rience utilisateur toujours plus fluide<\/strong> : tel est le credo de tous les moteurs de recherche. Apporter des r\u00e9ponses pertinentes et rapides aux utilisateurs est leur objectif premier. En effet, si l’internaute ne trouve pas les informations recherch\u00e9es<\/strong> ou si le temps de chargement est trop long<\/strong>, celui-ci quittera la page. Cons\u00e9quence : le taux de rebond augmente et ce ph\u00e9nom\u00e8ne impacte n\u00e9gativement le SEO<\/strong>. Pour contrer cela, les navigateurs tentent d’aider les d\u00e9veloppeurs \u00e0 optimiser le temps de chargement des sites web.<\/a><\/p>\n

Notes de l’agence : l’affichage rapide des pages sur desktop et mobile doit \u00eatre une priorit\u00e9 absolue<\/strong> pour n’importe quel webmaster. Par ailleurs, avec la mont\u00e9e en puissance de l’Index Mobile First<\/a> et l’AMP, le temps de chargement des sites sur mobile prend de plus en plus d’importance<\/strong>. En effet, les sites non mobile-friendly seront \u00e0 long terme, sanctionn\u00e9s par les moteurs de recherche car ils ne favorisent pas l’exp\u00e9rience utilisateur.<\/p><\/blockquote>\n

Le lazy-loading permet de r\u00e9pondre en partie \u00e0 cette probl\u00e9matique et s’impose de plus en plus dans le domaine du d\u00e9veloppement web.<\/p>\n

\"D\u00e9veloppeurs<\/a><\/p>\n

impl\u00e9menter le lazy-loading en natif<\/h3>\n

Utiliser le lazy-loading n’est, en soi, pas une technique r\u00e9cente. Il \u00e9tait d\u00e9j\u00e0 possible de l’impl\u00e9menter pour son site. N\u00e9anmoins, de bonnes connaissances et une ma\u00eetrise dans le domaine du d\u00e9veloppement web sont requises.<\/p>\n

Notes de l’agence : les r\u00e9seaux sociaux<\/strong> \u00e9taient d\u00e9j\u00e0 de grands adeptes de cette m\u00e9thode.<\/p><\/blockquote>\n

En permettant aux navigateurs de supporter nativement cette technologie, son installation devient plus simple. Attention toutefois, le lazy-loading natif n’est pas \u00e0 la port\u00e9e de tous. Etre guid\u00e9 par une agence experte en d\u00e9veloppement de sites est conseill\u00e9.<\/strong><\/p>\n

l’attribut loading sur la balise img<\/h3>\n

\"Attribut<\/a>Vous l’aurez compris, le lazy-loading est votre alli\u00e9 en mati\u00e8re de webperf<\/strong>. D\u00e9sormais, un nouvel attribut HTML de la balise IMG loading<\/strong>\u00a0permet aux navigateurs d’activer plus facilement le lazy-loading. Il suffit de l’ajouter aux images. Celui-ci est compatible avec les balises IMG<\/strong> mais \u00e9galement PICTURE <\/strong>et IFRAME.<\/strong><\/p>\n

L’attribut loading supporte 3 valeurs<\/strong> :<\/p>\n