Contenu au chargement différé pour améliorer votre performance

Si vous avez un blog ou un site avec beaucoup d’images il peut être intéressant de configurer du contenu au chargement différé. Les images ou vidéos peuvent se charger au fur et à mesure que l’utilisateur descendra dans la page web.

Contenu au chargement différé

La prise en charge au niveau du navigateur des images à chargement différé est désormais prise en charge sur le Web! Cette vidéo montre une démonstration de la fonctionnalité:

Le report du chargement de contenu non critique ou non visible au premier abord, également appelé “chargement différé”, est une technique courante destinée à optimiser l’expérience utilisateur. Pour en savoir plus, consultez le guide des images et des vidéos au chargement différé disponible sur le site Web Fundamentals.

Dans Chrome 76 et les versions ultérieures, vous pouvez utiliser l’attribut de chargement pour charger des images en différé sans avoir besoin d’écrire un code de chargement différé personnalisé ou d’utiliser une bibliothèque JavaScript distincte.

Compatibilité du navigateur

<img loading=lazy>

Le chargement différé est pris en charge par les navigateurs Chromium les plus courants (Chrome, Edge, Opera) et Firefox. L’implémentation de WebKit (Safari) est en cours. caniuse.com contient des informations détaillées sur la prise en charge de plusieurs navigateurs. Les navigateurs qui ne prennent pas en charge l’attribut de chargement l’ignorent simplement sans effets secondaires.

L’attribut de chargement différé

Aujourd’hui, Chrome charge déjà les images avec des priorités différentes en fonction de leur emplacement par rapport à la fenêtre d’affichage de l’appareil. Les images sous la fenêtre sont chargées avec une priorité inférieure, mais elles sont toujours récupérées dès que possible.

Dans Chrome 76+, vous pouvez utiliser l’attribut de chargement pour différer complètement le chargement des images hors écran qui peuvent être atteintes en faisant défiler :

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Voici les valeurs prises en charge pour l’attribut de chargement:

• auto : comportement de chargement différé par défaut du navigateur, qui équivaut à ne pas inclure l’attribut.
• lazy : reporte le chargement de la ressource jusqu’à ce qu’elle atteigne une distance calculée de la fenêtre.
• eager : chargez la ressource immédiatement, quel que soit son emplacement sur la page.