BP 3.09Éviter l'utilisation de carrousels
Sujet
Le carrousel, souvent utilisé pour mettre en avant de multiples contenus, montre rapidement ses limites en matière de conversion1, avec un impact négatif sur l'expérience utilisateur. Sa présence implique plusieurs points critiques :
- Un alourdissement du poids des pages pour la présence de CSS et JavaScript dédié, mais également par le contenu présent sur chaque écran du carrousel2 ;
- Une complexité en termes d'assurance qualité web3 et d'accessibilité numérique4 ;
- Une utilisation plus importante des ressources processeurs dans le cas d'un carrousel automatique.
GreenIT vous conseille
Limiter au maximum l'utilisation des carrousels en privilégiant du contenu statique mis à jour régulièrement.
Dans le cas contraire :
- Mettre en place un contrôle simple et complet du composant (arrêt, écran suivant/précédent)
- Préférez un chargement progressif des images présentes dans les différents écrans (Privilégier le chargement différé des images)
- Préférez les animations impliquant une utilisation des ressources processeurs (Éviter les animations)
- Limiter le nombre d'écrans présents dans le carrousel.
Exemple
Les balises <img /> possède un attribut HTML loading qui permet nativement un chargement progressif des images.
<img src="mon_image.webp" alt="" loading="lazy" />Les animations de certains attributs CSS implique un repaint/reflow des navigateurs qui demande des ressources machines, pour limiter cela préférez les animations des carrousels par la propriété CSS transform.
Principe de validation
| Le nombre | est inférieur ou égal à |
|---|---|
| de carrousel par site | 1 |