Images pour un site plus rapide : pourquoi utiliser le lazy loading

Redimensionner et compresser correctement vos images avant leur téléchargement est impératif si vous voulez avoir une page web performante ; mais que se passe-t-il après le téléchargement des images ? Existe-t-il un moyen de les optimiser un peu plus et d’améliorer le temps de chargement des pages ?

La réponse est oui !

Dans cet article, nous allons nous pencher sur le principe du lazy loading, une technique bénéfique qui diffère le chargement des ressources non critiques (les images, dans notre cas), en les laissant “hors écran” jusqu’à ce que vous en ayez besoin.

Voyons comment ça marche !

Qu’est-ce que le lazy loading ?

L’idée de base du lazy loading est de charger des images ou des iframes uniquement lorsque les utilisateurs ont besoin de les afficher : ils n’auront pas à attendre que tous les éléments de la page soient chargés et pourront donc commencer à utiliser la page web plus tôt. 

Cela signifie que vos pages n’afficheront que des images au-dessus de la ligne de flottaison ; le reste viendra dès que l’utilisateur fera défiler la page.

Techniquement parlant, lazy load est un JavaScript qui vérifie la vue courante de vos visiteurs et ne charge que les contenus au-dessus de la ligne de flottaison, c’est-à-dire des images (presque) visibles pour les internautes. 

Ce script peut être appliqué à vos images via un plugin ou par programmation, et c’est un excellent moyen d’optimiser les performances perçues et réelles.

Comment une page Web se charge-t-elle habituellement ?

Chaque fois que vous demandez à votre navigateur d’ouvrir une URL, c’est ce qui se passe :

• Le clic sur un lien déclenche une demande
• La page est téléchargée avec toutes ses ressources (fichiers)
• Le navigateur Web construit la page en utilisant les ressources qu’elle contient.
• La page est maintenant affichée (rendue) à l’utilisateur

Concentrons-nous sur la deuxième étape du processus : quelles sont les ressources habituellement incluses dans une page ?

• HTML (d’environ 15 à 120 Ko de code)
• Fichiers JavaScript et CSS (de 5 à 200 Ko de code)
• Images et iframes (à partir de 200 KB – mais si vous avez lu nos tutoriels précédents sur le redimensionnement des images, vos images sont déjà sous contrôle, non ?)

Comme vous pouvez le voir, les images et les iframes sont généralement les dernières ressources à être téléchargées sur la page, et parfois la partie la plus importante.

Cela signifie que votre page ne sera pas pleinement opérationnelle tant que toutes les images n’auront pas été téléchargées.

Que se passe-t-il lorsque le lazy loading est appliqué à la place ?

Le lazy loading a été créé pour surmonter ce comportement, et modifier le processus, permettant aux utilisateurs de faire usage d’une page même si toutes ses images et iframes n’ont pas été téléchargées.

Lorsqu’un script de lazy loading est appliqué à vos images, c’est ce qui se passe lorsque vous arrivez sur une page :

1. Vous commencez à défiler en lisant le contenu de la page
2. Lorsqu’une image est censée apparaître dans la fenêtre d’affichage, une image du caractère générique sera visible à la place.
3. L’image originale remplacera rapidement l’image du caractère générique

Ainsi, lorsque les images sont chargées en lazy loading, elles sont stockées dans une page, mais elles sont recouvertes d’un emplacement transparent de la même taille que l’image originale.

Comme nous l’avons expliqué dans notre billet de blog Sauvez vos visiteurs de la frustration, vous pouvez considérer le script de lazy loading comme l’un de ces vieux albums photo où chaque photo est protégée par un voile de papier de soie.

Les images resteront sous le “voile de papier de soie” sous le pli jusqu’à ce que l’utilisateur décide de faire défiler la page et de les “dévoiler”.

Pourquoi devriez-vous utiliser le lazy loading pour vos images au lieu de les charger toutes en même temps ?

Il y a plusieurs raisons pour lesquelles vous devriez charger vos images à l’aide du lazy loading au lieu de les laisser charger toutes à la fois.

Voyons les plus importants d’entre elles :

1. Amélioration du temps de chargement perçu et réel de vos pages

Les longues pages riches en images sont plus longues à charger : comme nous l’avons vu, la quantité de données d’image doit être entièrement téléchargée avant que la page ne soit utilisable à 100%. Si nous chargeons nos images en lazy loading à la place, le problème sera résolu car seuls celles qui sont placées au-dessus de la ligne de flottaison seront chargées en première instance. Il en résultera une réduction réelle du temps de chargement de la page.

2. Réduction du travail pour le navigateur

Si les images sont chargées progressivement, votre navigateur n’aura pas besoin d’analyser ou de décoder les ressources jusqu’au moment où elles sont demandées en faisant défiler la page.

3. Diminution du nombre de requêtes HTTP lors du chargement de la page

En conséquence directe du point précédent, le nombre de requêtes HTTP sera lui aussi réduit.

4. Moins de données servies par le serveur ou le CDN

Sur la même ligne des points précédents, le serveur ou le CDN devra télécharger moins de données, d’où des factures moins chères pour vous !

5. Economie de données et de bande passante (en particulier à partir du mobile)

Si la partie la plus importante des données de vos pages – généralement sous forme d’images – n’est téléchargée qu’au moment du défilement, les utilisateurs qui visitent votre site à partir d’appareils mobiles seront très reconnaissants ! Les images chargées en lazy loading sauveront les données et la bande passante de vos lecteurs.

Le lazy loading est-il une mauvaise pratique pour le référencement naturel ?

Vous avez peut-être vu passer des opinions disant que le lazy loading pourrait être critique pour le référencement parce que Google pourrait exclure les images chargées progressivement de l’indexation.

Ce n’est pas vrai : Google et les moteurs de recherche peuvent traiter des images chargées en lazy loading, et nous pouvons dire que cette technique est sans aucun doute une bonne pratique pour le référencement.

Google en personne promeut l’utilisation du lazy loading dans son guide pour développeur :

As far as performance improvement techniques go, lazy loading is reasonably uncontroversial. If you have a lot of inline imagery in your site, it’s a perfectly fine way to cut down on unnecessary downloads. Your site’s users and project stakeholders will appreciate it!

Tout ce que vous devez savoir sur l’optimisation des images dans WordPress

Dans cet article, vous avez appris :

• Qu’est-ce que le lazy loading ?
• Comment une page se charge habituellement et ce qui change quand le lazy loading est appliqué
• Les avantages du lazy loading de vos images au lieu de les charger toutes en même temps
• Pourquoi vous devriez considérer le lazy loading comme une bonne pratique SEO

Maintenant que le lazy loading n’a plus de secrets pour vous, il est temps d’aller de l’avant et d’apprendre d’autres trucs sur l’optimisation des images :

• Comment réduire la taille du fichier image ?
• Comment compresser vos images ?
• Compresser une image en ligne
• Optimisation d’images avec Imagify : qu’est-ce que c’est et comment l’utiliser ?