BP_4030_fr.md

Limiter le recours aux carrousels

Identifiants

GreenIT	V2	V3	V4

Catégories

Cycle de vie	Tiers	Responsable
2. Conception	Utilisateur/Terminal	UX/UI Designer

Indications

Degré de priorité	Mise en oeuvre	Impact écologique
4	4	4

Ressources Economisées
Processeur / Mémoire vive / Stockage / Réseau / Requêtes

Description

Le carrousel, souvent utilisé pour mettre en avant de multiples contenus, montrent rapidement ses limites en terme de conversion avec un impact négatif sur l'expérience utilisateur. Sa présence implique plusieurs points critiques :

• un alourdissement du poids des pages par la présence de CSS et JavaScript dédié mais également par le contenu présent sur chaque écran du carrousel ;
• une complexité en termes d'assurance qualité web et d'accessibilité numérique ;
• une utilisation plus importante des ressources processeurs dans le cas d'un carrousel automatique.

Exemple

Les balises <img /> possèdent 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 impliquent 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.

Solution alternative

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 ;
• préférez les animations impliquant une utilisation des ressources processeurs ;
• limiter le nombre d'écrans présents dans le carrousel.

Principe de validation

Le nombre ...	est inférieur ou égal à
d'écrans présents dans le carrousel	3
de carrousels par page	1