La plupart des pages web contiennent souvent un bon nombre d’images et les charger toutes en même temps ralenti la vitesse de chargement de celle-ci. En 2018, Google a dévoilé qu’une personne sur deux quitte un site avant même que celui-ci soit chargé s’il met plus de 3 secondes à s’afficher.
Le ralentissement de votre site aura pour conséquence une expérience utilisateur plus pauvre et impactera négativement le classement de votre site sur les moteurs de recherches car eux aussi sont sensibles à la vitesse de chargement. Hé oui, comme nous les machines n’aiment pas attendre.
D’accord maintenant qu’on a identifié le problème, quelle est la solution ? Pour combattre le ralentissement causé par les images on dispose de plusieurs techniques.
Avant tout, il est important de redimensionner et d’optimiser vos images afin que celles-ci soient adaptées à la taille qu’elles occupent sur l’écran ainsi que la résolution des écrans.
Il est aussi possible d’utiliser des images responsives. Il s’agit d’une série de plusieurs mêmes images mais à des tailles différentes ce qui permet de charger une petite image sur mobile et une grande sur un écran d’ordinateur. Il existe aussi des services en ligne qui s’occupent d’optimiser au mieux vos images sur internet et de proposer une image optimisée et la plus adaptée à chaque situation en temps réel.
Une fois que l’image est optimisée on va pouvoir mettre en place une technique qu’on appelle le « Lazy load » (le chargement fainéant en français).
Qu’est-ce que le lazy load des images ?
La majorité des images sur un site se trouvent sous la ligne de flottaison. Cela signifie qu’elles ne sont pas visibles au chargement de la page car elles se situent en dehors de la partie visible de l’écran. En d’autres mots, l’utilisateur devra scroller afin de voir ces images.
Cela signifie qu’on ralenti l’utilisateur pour quelque chose dont il n’aura pas accès immédiatement. Ce serait comme aller au restaurant et d’attendre que le chef ait cuisiné nos entrées, plats et desserts avant qu’on vienne nous servir l’apéro. Ça n’a pas de sens et c’est la même chose sur internet !
Le lazy load des images est une technique qui consiste à charger et afficher les images situées sous la ligne de flottaison que lorsque celles-ci entrent dans l’écran.
En résumé cette technique permet de charger uniquement les images que l’utilisateur peut voir à l’instant et de retarder celles qui ne sont pas nécessaires sur le moment afin de pouvoir profiter d’un gain de performance. Si l’utilisateur ne scroll pas jusqu’en bas de la page, il ne chargera pas inutilement les images qui s’y trouvent ce qu’ils leur permettront par d’épuiser plus lentement leur forfait 4g et allègera par la même occasion le nombre de requêtes faites à votre serveur.
Mettre en place la lazy load avec JavaScript
Okay, c’est très bien tout ça, mais comment mettons-nous cela en pratique ?
Jusqu’en Juillet 2019, la solution était d’utiliser JavaScript. Il fallait écrire un script ou utiliser une librairie tierce qui vérifie la position de chacune des images à chaque scroll de l’utilisateur.
Si une image située en dehors de la partie visible l’écran s’approche trop près de la ligne de flottaison, elle est aussitôt chargée et affichée. C’est un peu comme si le serveur de notre restaurant nous apportait le plat principal juste après que nous en avons fini avec l’entrée.
Voici un exemple de script utilisant l’api “IntersectionObserver” qui se charge du lazy load des images.
<img class="js-lazyImg" data-src="img_1.jpg" />
<img class="js-lazyImg" data-src="img_2.jpg" />
const imageIntersecObserver = new IntersectionObserver((entries, imgObserver) => {
entries.forEach((entry) => {
if(entry.isIntersecting) {
const lazyImage = entry.target
lazyImage.src = lazyImage.dataset.src
}
})
});
imageIntersecObserver.observe(document.querySelectorAll('.js-lazyImg'));
Le code ci-dessus permet de mieux comprendre techniquement la mise en place du lazy load mais souvent une librairie externe fera un bien meilleur travail. Certaines de ces librairies sont pensées pour être rétro-compatibles avec d’anciens navigateurs et parfois elles offrent même la possibilité de paramétrer certaines options tout en ajoutant des fonctionnalités en plus. Voici quelques-unes des plus populaires :
| Nom | Type d’image | Comptabilité | Taille |
| Lazysizes | Classique / Responsive / Animations | > IE 8 | 3.6 kb Gzipped |
| Lozad.js | Classique / Responsive | Browsers modernes sauf IE (utilise intersectionObserver) | 1.3 kb Gzipped |
| Blazy | Classique / Responsive / Animations | ≥ IE 7 | 2.2 kb Gzipped |
Utilisez le lazy load sans JavaScript
Depuis juillet 2019 pour Chrome et avril 2020 du côté de chez Firefox, il est possible de mettre en place le lazy load des images et des iframes avec une fonctionnalité native au navigateur. Cela signifie qu’on a plus besoin de JavaScript pour profiter des avantages du chargement différé des images. Cela signifie aussi moins de scripts chargés et exécutés ce qui impacte aussi la performance, un pierre deux coups !
D’après le site internet caniuse.com, à l’heure où j’écris ces lignes 63,6 % des gens utilisent un navigateur qui possède cette fonctionnalité nativement, ça signifie qu’avec un effort minimum on peut améliorer l’expérience de deux utilisateurs sur trois, alors pourquoi s’en priver ?
J’ai dit effort minimum mais qu’en est-il plus précisément ? Il suffit d’ajouter l’attribut loading avec la valeur lazy et le tour est joué.
Il existe trois valeurs pour l’attribut loading :
- Eager: Charge l’image immédiatement lorsque l’utilisateur se rend sur le site
- Lazy: Charge l’image seulement lorsque celle-ci s’approche de la ligne de flottaison
- Auto: Charge l’image de manière lazy que si l’utilisateur a activé cette option dans les paramètres de son navigateur.
Si vous voulez améliorer l’expérience des 36,4% utilisateurs qui n’ont pas un navigateur récent, vous pouvez les cibler et exécuter une librairie qui comblera l’absence de l’attribut loading. Et pourquoi pas pousser le l’idée un peu plus loin et charger cette librairie en lazy load grâce à un import dynamique ?
Pour cibler ces utilisateurs, vous pouvez vérifier si le prototype de l’élément “HTMLImageElement” possède l’attribut loading. S’il ne le possède pas, cela signifie que le navigateur ne possède pas nativement de quoi mettre en place le chargement différé. Voici un morceau de code qui vous permettra de cibler ces utilisateurs.
// Identifie si les élements img du navigateur de l'utilisateur
// possède l'attribut loading
if ( ! 'loading' in HTMLImageElement.prototype ) {
// Le navigateur ne possède pas la fonctionnalité native de lazy load
// Import d'une librairie de lazy load
// Executer la librairie
}
Si votre site possède déjà une librairie qui se charge du lazy load pour tous vos utilisateurs, vous pouvez utiliser le même bout de code ci-dessus et inclure l’attribut loading sur vos images pour commencer à utiliser le lazy load natif avec les visiteurs de votre site.
Conclusion
À votre tour de mettre cela en place. Que ce soit avec une librairie tierce ou avec les fonctionnalités natives du navigateur, tout le monde sera en sera gagnant.
