Charger les images plus rapidement sur son site : Lazy load images, le guide complet #webperf

Lorsque l’on s’attaque à l’optimisation des pages, on tombe forcement sur ce qui est bloquant pour l’expérience utilisateur : la lourdeur des images.

Il est possible d’alléger le poids des images dans un 1er temps, mais on peut le combiner avec une autre technique : le Lazy loading.

Alléger les pages en ne chargeant pas celles qui sont hors-écran (above the fold)

En effet, lorsque vous chargez une page web, le navigateur va tout d’abord charger toutes les ressources (structure html, javascript, images, etc…), même si ces ressources ne sont pas affichées à l’écran, et une fois que ces ressources sont chargées, la page apparaît.

Il faut tricher un peu pour afficher rapidement la structure (DOM) de la page et charger uniquement les ressources visible, par une technique dite de Lazy loading (spoil : les images sont chargée par javascript). Avant d’en arriver là, on peut faire quelques optimisations techniques au niveau du serveur.

Comment charger plus rapidement les images ?

L’impression de l’utilisateur est que la page est longue à charger, il faut donc trouver des astuces pour afficher le plus rapidement quelque chose, pour que sa perception soit la rapidité du site tout en masquant que le reste est en cours de chargement, on devrait employer http/2 et https et le lazy loading. Vérifiez que votre hébergeur web vous mettent a disposition http2.

Comment le http/2 et le https accélèrent le chargement des images ?

Techniquement http/2 et https couplé ensemble parralélisent le chargement des ressources, et au lieu d’envoyer les fichiers en chargement au navigateur par blocs de 10, tous les fichiers se chargent en même temps.

La 1ere chose a faire, est de mettre en place le http2 avec le https. Les images ainsi que les autres ressources vont se charger en parallèle.

Exemple, on est passé d’une page qui mettait 2,6 secondes a charger à 0,6 secondes pour une page de 1mo. (Soyons honnête il y a quand même un cache varnish qui a été vidé juste avant le test 😉 )

Optimiser le http2 et https pour accelerer le chargement

Le temps de chargement est donc maintenant conditionné par le chargement de votre image la plus lourde.

Comment mettre en place le lazy loading ?

Si cette fameuse image se trouve plus bas dans votre contenu, on pourrait ne pas la charger dès le premier chargement, mais le différer parcqu’elle n’est pas visible. C’est là que le lazy loading rentre en jeu.

La technique du lazy loading sert à ça : charger dynamiquement les images au fur et à mesure que l’utilisateur scroll.

Par contre pour une meilleur expérience utilisateur, pas toutes les images ne doivent être en lazy loading.

Il existe des plugins pour chaque CMS que je ne detaillerais pas dans cet article.

Comment vérifier que le lazy loading fonctionne ?

Allez dans l’inspecteur d’élément, onglet Network > Images.

Quand vous rafraichissez la page vous voyez les images au chargement de votre page. Des images manquent ? Alors cela fonctionne. Descendez et les autres images s’ajouteront.

 

Afficher une couleur dominante à l’emplacement de la photo comme pinterest

Une des technique employée par pinterest est d’afficher un bloc de calage avec la couleur dominante (placeholder) avant de charger le reste des images.

Cela consiste à récupérer un pixel avzc la couleur dominante de l’image et remplir le bloc.

Vous trouverez toutes les techniques de lazy loading d’image dans cet article de css-trick avec des codes sources.

Vous y decouvrirez que l’ont peut utiliser un service imagekit pour envoyer une image basse qualité avant de la remplacer par la vraie image. Ou une image floue.

La seule chose qui me gêne c’est que cela rajoute quand même un temps de latence d’accès au service (résolution dns)

https://css-tricks.com/the-complete-guide-to-lazy-loading-images/

Charger les images plus rapidement sur son site : Lazy load images, le guide complet #webperf
3 (60%) 1 vote
0 réponses

Répondre

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *