Bonnes pratiques concernant les carrousels

Optimisez les carrousels pour améliorer les performances et la facilité d'utilisation.

Katie Hempenius

Un carrousel est un composant d'UX qui affiche du contenu sous la forme d'un diaporama. Les carrousels peuvent être lus automatiquement ou être parcourus manuellement par les utilisateurs. Bien que les carrousels puissent être utilisés ailleurs, ils sont le plus souvent utilisés pour afficher des images, des produits et des promotions sur les pages d'accueil.

Cet article présente les bonnes pratiques en termes de performances et d'expérience utilisateur pour les carrousels.

Performances

Un carrousel bien implémenté doit, en soi, avoir un impact très faible, voire nul, sur les performances. Toutefois, les carrousels contiennent souvent de grands éléments multimédias. Les éléments volumineux peuvent avoir un impact sur les performances, qu'ils soient affichés dans un carrousel ou ailleurs.

• LCP (Largest Contentful Paint)

  Les carrousels volumineux au-dessus de la ligne de flottaison contiennent souvent l'élément LCP de la page et peuvent donc avoir un impact significatif sur le LCP. Dans ces scénarios, l'optimisation du carrousel peut considérablement améliorer le LCP. Pour une explication détaillée du fonctionnement de la mesure de la LCP sur les pages contenant des carrousels, consultez la section Mesure de la LCP pour les carrousels.

• Interaction to Next Paint (INP)

  Les carrousels ont des exigences JavaScript minimales et ne devraient donc pas avoir d'incidence sur la réactivité des pages. Si vous découvrez que le carrousel de votre site comporte des scripts de longue durée, envisagez de remplacer vos outils de carrousel.

• CLS (Cumulative Layout Shift)

  Un nombre surprenant de carrousels utilisent des animations lentes et non composées qui peuvent contribuer au CLS. Sur les pages avec des carrousels en lecture automatique, cela peut entraîner un CLS infini. Ce type de CLS n'est généralement pas visible par l'œil humain, ce qui fait que le problème est facile à négliger. Pour éviter ce problème, évitez d'utiliser des animations non composées dans votre carrousel (par exemple, lors des transitions de diapositives).

Bonnes pratiques en matière de performances

Charger le contenu du carrousel à l'aide du code HTML

Le contenu du carrousel doit être chargé via la balise HTML de la page afin qu'il soit détectable par le navigateur au début du processus de chargement de la page. L'utilisation de JavaScript pour lancer le chargement du contenu du carrousel est probablement la plus grande erreur de performances à éviter lorsque vous utilisez des carrousels. Cela retarde le chargement de l'image et peut avoir un impact négatif sur le LCP.

<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>

const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

Pour une optimisation avancée du carrousel, envisagez de charger la première diapositive de manière statique, puis de l'améliorer progressivement pour inclure des commandes de navigation et du contenu supplémentaire. Cette technique est particulièrement adaptée aux environnements où l'attention de l'utilisateur est prolongée. Cela permet au contenu supplémentaire de se charger. Dans des environnements tels que les pages d'accueil, où les utilisateurs ne restent peut-être qu'une seconde ou deux, le chargement d'une seule image peut être tout aussi efficace.

Éviter les changements de mise en page

Les transitions de diapositives et les commandes de navigation sont les deux sources les plus courantes de décalages de mise en page dans les carrousels:

• Transitions de diapositive:les décalages de mise en page qui se produisent pendant les transitions de diapositives sont généralement causés par la mise à jour des propriétés des éléments DOM. Voici quelques exemples de ces propriétés: left, top, width et marginTop. Pour éviter les décalages de mise en page, utilisez plutôt la propriété CSS transform pour effectuer la transition de ces éléments. Cette démonstration montre comment utiliser transform pour créer un carrousel de base.

• Commandes de navigation:déplacer, ajouter ou supprimer des commandes de navigation de carrousel du DOM peut entraîner des décalages de mise en page en fonction de la manière dont ces modifications sont implémentées. Les carrousels qui présentent ce comportement le font généralement en réponse à la position de l'utilisateur.

Voici quelques points de confusion courants concernant la mesure du CLS pour les carrousels:

• Carrousel en lecture automatique:les transitions de diapositives sont la source la plus courante de décalages de mise en page liés aux carrousels. Dans un carrousel sans lecture automatique, ces décalages de mise en page se produisent généralement dans les 500 ms d'une interaction utilisateur. Par conséquent, ils ne sont pas comptabilisés dans le CLS (Cumulative Layout Shift). Toutefois, pour les carrousels en lecture automatique, ces décalages de mise en page peuvent non seulement être comptabilisés dans le CLS, mais ils peuvent également se répéter indéfiniment. Il est donc particulièrement important de vérifier qu'un carrousel en lecture automatique n'est pas source de décalages de mise en page.

• Défilement:certains carrousels permettent aux utilisateurs de faire défiler les diapositives. Si la position de départ d'un élément change, mais que son décalage de défilement (c'est-à-dire scrollLeft ou scrollTop) change de la même quantité (mais dans la direction opposée), cela n'est pas considéré comme un décalage de mise en page, à condition qu'il se produise dans le même frame.

Pour en savoir plus sur les décalages de mise en page, consultez Déboguer les décalages de mise en page.

Utiliser une technologie moderne

De nombreux sites utilisent des bibliothèques JavaScript tierces pour implémenter des carrousels. Si vous utilisez actuellement des outils de carrousel plus anciens, vous pouvez améliorer les performances en passant à des outils plus récents. Les outils plus récents ont tendance à utiliser des API plus efficaces et sont moins susceptibles de nécessiter des dépendances supplémentaires, comme jQuery.

Toutefois, selon le type de carrousel que vous créez, vous n'aurez peut-être pas besoin de JavaScript du tout. La nouvelle API Scroll Snap permet d'implémenter des transitions de type carrousel en utilisant uniquement HTML et CSS.

Voici quelques ressources qui pourraient vous être utiles pour utiliser scroll-snap:

• Créer un composant Stories (web.dev)
• Styles Web nouvelle génération: Snap de défilement (web.dev)
• Carrousel CSS uniquement (CSS Tricks)
• How to Make a CSS-Only Carousel (CSS Tricks)

Optimiser le contenu du carrousel

Les carrousels contiennent souvent certaines des plus grandes images d'un site. Il peut donc être utile de vous assurer qu'elles sont entièrement optimisées. Choisir le bon format et le bon niveau de compression d'image, utiliser un CDN d'images et utiliser srcset pour diffuser plusieurs versions d'images sont autant de techniques qui peuvent réduire la taille de transfert des images.

Mesure des performances

Cette section explique comment mesurer le LCP pour les carrousels. Bien que les carrousels ne soient pas traités différemment de tout autre élément d'expérience utilisateur lors du calcul du LCP, le mécanisme de calcul du LCP pour les carrousels en lecture automatique est souvent source de confusion.

Mesure du LCP pour les carrousels

Voici les points clés à retenir pour comprendre le calcul du LCP pour les carrousels:

• Le LCP tient compte des éléments de la page lorsqu'ils sont peints dans le cadre. Les nouveaux candidats pour l'élément LCP ne sont plus pris en compte une fois que l'utilisateur interagit avec la page (appuis, défilement ou frappes sur les touches). Par conséquent, n'importe quelle diapositive d'un carrousel en lecture automatique peut être l'élément LCP final, tandis que dans un carrousel statique, seule la première diapositive peut être un candidat potentiel au LCP.
• Si deux images de taille égale sont affichées, la première est considérée comme l'élément LCP. L'élément LCP n'est mis à jour que lorsque le LCP candidat est supérieur à l'élément LCP actuel. Par conséquent, si tous les éléments du carrousel sont de la même taille, l'élément LCP doit être la première image affichée.
• Lors de l'évaluation des candidats au LCP, le LCP prend en compte "la taille visible ou la taille intrinsèque, selon la plus petite des deux." Par conséquent, si un carrousel en lecture automatique affiche des images de taille cohérente, mais qu'il contient des images de tailles intrinsèques variables inférieures à la taille d'affichage, l'élément LCP peut changer à mesure que de nouvelles diapositives s'affichent. Dans ce cas, si toutes les images sont affichées à la même taille, l'image ayant la plus grande taille intrinsèque sera considérée comme l'élément LCP. Pour que le LCP reste faible, vous devez vous assurer que tous les éléments d'un carrousel en lecture automatique ont la même taille intrinsèque.

Modifications apportées au calcul du LCP pour les carrousels dans Chrome 88

À partir de Chrome 88, les images qui sont ensuite supprimées du DOM sont considérées comme des peintures potentiellement plus riches en contenu. Avant Chrome 88, ces images n'étaient pas prises en compte. Pour les sites qui utilisent des carrousels à lecture automatique, ce changement de définition aura un impact neutre ou positif sur les scores LCP.

Ce changement a été effectué en réponse à l'observation que de nombreux sites implémentent des transitions de carrousel en supprimant l'image précédemment affichée de l'arborescence DOM. Avant Chrome 88, chaque fois qu'une nouvelle diapositive était présentée, la suppression de l'élément précédent déclenchait une mise à jour du LCP. Ce changement ne concerne que les carrousels en lecture automatique. Par définition, les plus grandes peintures à contenu potentiel ne peuvent se produire qu'avant qu'un utilisateur n'interagisse pour la première fois avec la page.

Modifications apportées aux seuils dans Chrome 121

Chrome 121 a modifié le comportement des images à défilement horizontal, comme les carrousels. Elles utilisent désormais les mêmes seuils que le défilement vertical. Cela signifie que, pour le cas d'utilisation du carrousel, les images sont chargées avant d'être visibles dans le viewport. Le chargement de l'image est donc moins susceptible d'être perceptible pour l'utilisateur, mais au prix d'un plus grand nombre de téléchargements. Utilisez la démonstration du chargement différé horizontal pour comparer le comportement dans Chrome par rapport à Safari et Firefox.

Autres points à noter

Cette section présente les bonnes pratiques UX et produit à garder à l'esprit lors de l'implémentation de carrousels. Les carrousels doivent contribuer à atteindre vos objectifs commerciaux et présenter le contenu de manière à faciliter la navigation et la lecture.

Bonnes pratiques d'utilisation de Navigation

Afficher des commandes de navigation bien visibles

Les commandes de navigation du carrousel doivent être faciles à cliquer et très visibles. C'est quelque chose qui est rarement bien fait : la plupart des carrousels comportent des commandes de navigation à la fois petites et subtiles. Gardez à l'esprit qu'une seule couleur ou un seul style de commande de navigation ne fonctionnera rarement dans toutes les situations. Par exemple, une flèche clairement visible sur un arrière-plan sombre peut être difficile à voir sur un arrière-plan clair.

Indique la progression de la navigation

Les commandes de navigation du carrousel doivent fournir du contexte sur le nombre total de diapositives et la progression de l'utilisateur. Ces informations permettent à l'utilisateur d'accéder plus facilement à une diapositive spécifique et de comprendre quels contenus ont déjà été consultés. Dans certains cas, fournir un aperçu du contenu à venir (qu'il s'agisse d'un extrait de la diapositive suivante ou d'une liste de miniatures) peut également être utile et augmenter l'engagement.

Prendre en charge les gestes sur mobile

Sur mobile, les gestes de balayage doivent être pris en charge en plus des commandes de navigation traditionnelles (telles que les boutons à l'écran).

Fournir d'autres chemins de navigation

Étant donné qu'il est peu probable que la plupart des utilisateurs interagissent avec l'ensemble du contenu du carrousel, le contenu auquel les diapositives du carrousel renvoient doit être accessible via d'autres chemins de navigation.

Bonnes pratiques en matière de lisibilité

Ne pas utiliser la lecture automatique

L'utilisation du mode lecture automatique crée deux problèmes presque paradoxaux: les animations à l'écran ont tendance à distraire les utilisateurs et à détourner leur attention du contenu plus important ; en même temps, comme les utilisateurs associent souvent les animations aux annonces, ils ignorent les carrousels en lecture automatique.

Il est donc rare que la lecture automatique soit un bon choix. Si le contenu est important, le fait de ne pas utiliser la lecture automatique optimisera son exposition. Si le contenu du carrousel n'est pas important, l'utilisation de la lecture automatique détourne l'attention du contenu plus important. De plus, les carrousels en lecture automatique peuvent être difficiles à lire (et ennuyeux aussi). Les gens lisent à des vitesses différentes. Il est donc rare qu'un carrousel passe systématiquement au "bon" moment pour différents utilisateurs.

Idéalement, la navigation dans les diapositives doit être dirigée par l'utilisateur via des commandes de navigation. Si vous devez utiliser la lecture automatique, elle doit être désactivée lorsque l'utilisateur pointe sur l'élément. De plus, le taux de transition des diapositives doit tenir compte du contenu de la diapositive : plus une diapositive contient de texte, plus elle doit rester à l'écran.

Séparer le texte et les images

Le contenu textuel du carrousel est souvent intégré au fichier image correspondant, plutôt que d'être affiché séparément à l'aide de balisage HTML. Cette approche est mauvaise pour l'accessibilité, la localisation et les taux de compression. Elle encourage également une approche unique pour créer des assets. Toutefois, le même formatage d'image et de texte est rarement aussi lisible sur ordinateur que sur mobile.

Être concis

Vous n'avez qu'une fraction de seconde pour attirer l'attention d'un utilisateur. Un texte court et précis augmente les chances de faire passer votre message.

Bonnes pratiques concernant les produits

Les carrousels fonctionnent bien lorsque l'utilisation d'espace vertical supplémentaire pour afficher du contenu supplémentaire n'est pas une option. Les carrousels sur les pages produit sont souvent un bon exemple de ce cas d'utilisation.

Toutefois, les carrousels ne sont pas toujours utilisés efficacement.

• Les carrousels, en particulier s'ils contiennent des promotions ou défilent automatiquement, sont facilement confondus avec des annonces par les utilisateurs. Les utilisateurs ont tendance à ignorer les annonces, un phénomène appelé cécité des bannières.
• Les carrousels sont souvent utilisés pour apaiser plusieurs services et éviter de prendre des décisions concernant les priorités commerciales. Par conséquent, les carrousels peuvent facilement se transformer en décharge de contenus inefficaces.

Tester vos hypothèses

L'impact commercial des carrousels, en particulier ceux des pages d'accueil, doit être évalué et testé. Les taux de clics sur les carrousels peuvent vous aider à déterminer si un carrousel et son contenu sont efficaces.

Pour les rendre pertinentes

Les carrousels fonctionnent mieux lorsqu'ils contiennent du contenu intéressant et pertinent présenté dans un contexte clair. Si un contenu ne suscite pas l'intérêt d'un utilisateur en dehors d'un carrousel, le placer dans un carrousel n'améliorera pas ses performances. Si vous devez utiliser un carrousel, donnez la priorité au contenu et assurez-vous que chaque diapositive est suffisamment pertinente pour que l'utilisateur puisse cliquer dessus pour accéder à la diapositive suivante.