fbpx
Chargement différé des images avec loading="lazy"

Chargement différé des images avec loading="lazy"

Partager sur facebook
Partager sur linkedin
Partager sur twitter
Partager sur email

La Performance Web est constamment à la recherche d’optimisations pour le confort de navigation. Diminuer le temps d’attente de l’internaute est un facteur clé incontournable du succès des sites web modernes. Et ce n’est pas Google qui vous dira le contraire : Evaluating page experience for a better web.

La ligne de flottaison

De nombreuses techniques sont employées pour favoriser la performance perçue. L’une d’entres elles consiste à afficher en priorité tous les éléments situés au dessus de la Ligne de Flottaison.

La Ligne de Flottaison représente la partie visible d’une page web, directement atteignable sans nécessiter de scroller verticalement.

L’un des conseils emblématiques des outils de diagnostic des performances web est d’Éliminer les contenus (JavaScript, CSS, Polices) qui bloquent l’affichage du contenu au-dessus de la ligne de flottaison.

Un certain nombre de techniques couvrent déjà les domaines suivants :

JavaScript : Les attributs async et defer
CSS : Des outils pour éliminer les styles CSS bloquants
Polices de caractères : Les attributs rel=preload et font-display

Pour les images, soyez paresseux !

Concernant les images la technique du Lazy Loading, ou « Chargement Paresseux » (oui, ça passe mieux en anglais) permet de ne charger que les images situées au dessus de la ligne de flottaison. Les autres images ne sont alors chargées que lorsque cela devient nécessaire, au fur et à mesure que l’utilisateur scrolle (défile). On améliore ainsi le temps de chargement initial de la page.

Google Page Speed, nous conseille vivement de respecter cette consigne :

loading= »lazy » à la rescousse

Pendant longtemps réalisée via JavaScript, la méthode de lazy loading est dorénavant décrite au sein d’une spécification du WhatWG sous la forme d’un attribut HTML loading dont les valeurs sont les suivantes :

eager : l’image est chargée immédiatement, qu’elle soit située dans ou hors de la fenêtre visible (valeur par défaut),
lazy : le chargement est retardé jusqu’à ce que l’usager scrolle et s’approche du bas de la fenêtre du navigateur.

<img src= »image.jpg » loading= »lazy » width= »… » height= »… » alt= »… »>
<iframe src= »video-player.html » title= »… » loading= »lazy »></iframe>

Déjà compatible sur de nombreux navigateurs caniuse : Lazy loading via attribute for images & iframes, l’attribut loading est parfaitement envisageable en production. Pour un support plus large, sachez qu’il existe un polyfill (une émulation) de cet attribut HTML.

Pensez dès à présent à l’intégrer pour favoriser la performance perçue de vos visiteurs.

Publié par Alsacreations.com

Découvrez
nos autres articles

S'abonner à la newsletter.

pour être averti des nouveaux articles

Merci d'avoir répondu à ce questionnaire !

Nous allons pouvoir étudier votre projet puis nous vous enverrons un devis.

Votre demande de suppression des données personnelles a été envoyé avec succès.

Nous la traiterons dans les plus bref délais

Votre message a bien été envoyé !

Votre demande sera traité dans les plus bref délais

Merci pour votre inscription !

Félicitation ! Vous êtes désormais inscrit et vous recevrez votre première newsletter très bientôt