Les sliders JavaScripts massacrent la performance web

Populaires depuis des années et désormais mal aimés, les sliders JavaScript (carrousels) présentent des inconvénients majeurs pour les sites web modernes : temps de chargement des scripts et des images (ressources), augmentation du LCP (Largest Contentful Paint) et pénalisation par Google à cause de la dégradation des performances.

Connus aussi pour être illisibles sur smartphones, est-il vraiment intéressant de les proposer encore aux utilisateurs mobiles ? Pour couronner le tout, les chiffres montrent que les internautes ignorent maintenant volontairement et naturellement certaines de ces bannières défilantes.

• Faut-il bannir les sliders ?
• Quelles alternatives existent ?

Faut-il complètement bannir les sliders JS de nos sites ?

Et bien pas tout à fait.
Il est judicieux d'afficher un slider s'il réuni un maximum de ces 4 conditions :

• Il a une raison d'exister essentielle pour les objectifs du projet,
• Il apporte une réelle plus-value à l'expérience utilisateur,
• Il est adapté au support qu'utilise l'internaute (ordinateur ou mobile),
• Aucune autre forme de design ne peut mieux répondre à ce besoin,

Des exemples de cas ou le slider JavaScript peut encore avoir sa place :

• Afficher plusieurs photos d'un produit,
• Expliquer un processus étape par étape,
• Présenter des produits associés ou des avis clients

Le pire cas d'utilisation d'un slider

Sans aucun doute, le slider qui s'affiche en haut de page 😵

Vous le connaissez bien celui la !
Beaucoup de sites utilisent encore un grand slider en tout début de page d'accueil. C'est certainement le pire compromis car le slider est situé au-dessus de la ligne de flottaison (visible dès le chargement de la page).

Les mauvais points de cette pratique :

• Pas d'optimisation du chargement possible : les ressources (scripts et images) ne peuvent avoir un chargement différés car ce sont les premiers éléments visibles sur la page,
• Le chargement en priorité de ressources lourdes : JavaScript et images notamment,
• Les autres ressources de la page sont bloquées dans la file d'attente : l'affichage des autres éléments de la page débute quand ce slider est terminé de charger,
• Perte d’intérêt de l'utilisateur : soyons honnêtes, les internautes n'en ont globalement "plus rien a carrer" de ce type de sliders

➡️ Bref, un joli cocktail de 💩 qui va nous donner un poids de mammouth au chargement de la page et des malus lors des tests de performances Google PageSpeed.

Les alternatives aux Sliders JavaScript

Pour améliorer l'expérience utilisateur et les performances d'un site internet tout en évitant les inconvénients des sliders JavaScript, plusieurs alternatives modernes et efficaces peuvent être envisagées.

Les grilles ou mosaïques (Grid Layouts)

Utiliser des grilles dynamiques ou des mises en page en mosaïque permet de présenter plusieurs éléments de contenu de manière organisée et attrayante sans nécessiter de scripts lourds. L'internaute a une vue d'ensemble de l'information sans le besoin de faire défiler ou de charger des images supplémentaires.

Sections cliquables ou à défilement (Scroll)

Au lieu de recourir à un slider, proposer une navigation basée sur un défilement fluide ou des sections cliquables permet à l'utilisateur de découvrir le contenu à son propre rythme, tout en conservant une expérience immersive et réactive. C'est une pratique parfaitement adaptée pour l'expérience mobile !

Images statiques ou en arrière-plan

Parfois, remplacer les sliders par des images statiques ou des arrière-plans animés (par exemple via CSS) peut suffire à attirer l'attention sans alourdir la page. Ces solutions sont généralement plus légères et plus rapides à charger.

Ces alternatives permettent de repenser l'usage des sliders dans le but de créer des sites plus rapides, plus réactifs et offrant une meilleure expérience utilisateur. En particulier pour les internautes sur mobiles.