Bonnes pratiques concernant les carrousels

Optimisez les performances et la facilité d'utilisation des carrousels.

Katie Hempenius

Un carrousel est un composant UX qui affiche du contenu sous la forme d'un diaporama. Les carrousels peuvent être lus automatiquement ou 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 traite des bonnes pratiques liées aux performances et à l'expérience utilisateur pour les carrousels.

Performances

Un carrousel bien implémenté ne devrait avoir qu'un impact très faible, voire nul, sur les performances. Toutefois, les carrousels contiennent souvent des éléments multimédias volumineux. 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 grands carrousels 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 améliorer considérablement le LCP. Pour une explication détaillée du fonctionnement de la mesure du LCP sur les pages contenant des carrousels, consultez la section Mesure du LCP pour les carrousels.

• INP (Interaction to Next Paint)

  Les carrousels ont des exigences minimales en JavaScript et ne devraient donc pas avoir d'impact sur la réactivité de la page. Si vous découvrez que le carrousel de votre site contient des scripts de longue durée, vous devez envisager de remplacer vos outils de carrousel.

• CLS (Cumulative Layout Shift)

  Un nombre surprenant de carrousels utilisent des animations irrégulières et non composées qui peuvent contribuer au CLS. Sur les pages comportant des carrousels à lecture automatique, cela peut entraîner un CLS infini. Ce type de CLS n'est généralement pas apparent à l'œil humain, ce qui rend le problème 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 en HTML

Le contenu du carrousel doit être chargé via le balisage HTML de la page afin qu'il soit visible par le navigateur dès le début du processus de chargement de la page. L'utilisation de JavaScript pour lancer le chargement du contenu des carrousels est probablement la plus grande erreur de performances à éviter lors de l'utilisation de 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 afin d'inclure des commandes de navigation et du contenu supplémentaire. Cette technique est particulièrement adaptée aux environnements qui suscitent une attention prolongée de la part de l'utilisateur. Ainsi, le contenu supplémentaire se charge plus rapidement. Dans des environnements tels que les pages d'accueil, où les utilisateurs ne peuvent rester qu'une seconde ou deux, charger une seule image peut être tout aussi efficace.

Éviter les décalages 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 lors des transitions de diapositive sont généralement causés par la mise à jour des propriétés induisant la mise en page 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:le déplacement ou l'ajout/la suppression de commandes de navigation de carrousel dans le DOM peut entraîner des décalages de mise en page selon la façon dont ces modifications sont implémentées. Les carrousels qui présentent ce comportement le font généralement en réponse au passage de la souris de l'utilisateur.

Voici quelques-uns des points de confusion courants concernant la mesure CLS pour les carrousels:

• Carrousels 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 et par conséquent, ne sont pas comptabilisés dans le CLS (Cumulative Layout Shift). Toutefois, pour les carrousels en lecture automatique, non seulement ces décalages de mise en page peuvent être comptabilisés dans le CLS, mais ils peuvent également se répéter indéfiniment. Par conséquent, il est particulièrement important de vérifier qu'un carrousel en lecture automatique n'est pas une source de décalages de mise en page.

• Défilement:certains carrousels permettent aux utilisateurs de se servir du défilement pour parcourir les diapositives du carrousel. Si la position de départ d'un élément change, mais que son décalage de défilement (scrollLeft ou scrollTop) change dans la même mesure (mais dans la direction opposée), cela n'est pas considéré comme un décalage de mise en page s'il se produit 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 des technologies modernes

De nombreux sites utilisent des bibliothèques JavaScript tierces pour implémenter les carrousels. Si vous utilisez actuellement d'anciens outils de carrousel, vous pourrez peut-être 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, telles que jQuery.

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

Voici quelques ressources qui pourraient vous être utiles concernant l'utilisation de scroll-snap:

• Créer un composant Stories (web.dev)
• Style Web nouvelle génération: ancrage du défilement (web.dev)
• Carrousel CSS uniquement (astuces CSS)
• Créer un carrousel CSS uniquement (astuces CSS)

Optimiser le contenu du carrousel

Les carrousels contiennent souvent certaines des images les plus grandes d'un site. Il peut donc être utile de vous assurer que ces images sont totalement optimisées. Le choix du format et le niveau de compression d'image appropriés, l'utilisation d'un CDN pour les images et l'utilisation de srcset pour diffuser plusieurs versions d'image sont autant de techniques permettant de réduire la taille de transfert des images.

Mesure des performances

Cette section traite de la mesure du LCP en ce qui concerne les carrousels. Bien que les carrousels soient traités de la même manière que tout autre élément d'expérience utilisateur lors du calcul du LCP, la mécanique de calcul du LCP pour les carrousels à lecture automatique est un point de confusion courant.

Mesure du LCP pour les carrousels

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

• Le LCP tient compte des éléments de la page tels qu'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 (appui, défilement ou pression sur les touches). Ainsi, toute 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 est un LCP potentiel.
• Si deux images de taille égale sont affichées, la première image sera considérée comme l'élément LCP. L'élément LCP n'est mis à jour que lorsque le LCP candidat est plus grand que l'élément LCP actuel. Ainsi, si tous les éléments du carrousel ont la même taille, l'élément LCP doit être la première image à afficher.
• Lors de l'évaluation des candidats au LCP, il tient compte de "la taille visible ou la taille intrinsèque, selon la plus petite". Ainsi, si un carrousel en lecture automatique affiche des images à une taille cohérente, mais contient des images de tailles intrinsèques variables et plus petites que la taille d'affichage, l'élément LCP peut changer à mesure que de nouvelles diapositives sont affichées. 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 maintenir un LCP 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

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

Cette modification a été effectuée en réponse à l'observation selon laquelle de nombreux sites implémentent des transitions de carrousel en supprimant de l'arborescence DOM l'image précédemment affichée. 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 n'affecte que la lecture automatique des carrousels par définition. Les affichages les plus larges potentiels 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 du défilement horizontal des images à défilement horizontal, comme les carrousels. Ils utilisent désormais les mêmes seuils que le défilement vertical. Cela signifie que pour le cas d'utilisation du carrousel, les images seront chargées avant d'être visibles dans la fenêtre d'affichage. Cela signifie que le chargement de l'image a moins de chances d'être perceptible par 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, dans Safari et dans Firefox.

Autres points à prendre en compte

Cette section traite des bonnes pratiques concernant l'expérience utilisateur et les produits, que vous devez garder à l'esprit lorsque vous implémentez des carrousels. Les carrousels doivent atteindre vos objectifs commerciaux et présenter le contenu d’une manière facile à parcourir et à lire.

Bonnes pratiques d'utilisation de Navigation

Mettre en avant les commandes de navigation

Les commandes de navigation du carrousel doivent être faciles à cliquer et être bien visibles. C'est quelque chose qui est rarement utilisé. La plupart des carrousels ont des commandes de navigation à la fois petites et subtiles. N'oubliez pas qu'une seule couleur ou un seul style de commande de navigation fonctionne 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.

Indiquer la progression de la navigation

Les commandes de navigation du carrousel doivent fournir un 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 particulière et de comprendre quel contenu a déjà été consulté. Dans certains cas, le fait de proposer 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 s'avérer utile et accroître 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 (comme les boutons à l'écran).

Fournir d'autres chemins de navigation

Comme il est peu probable que la plupart des utilisateurs interagissent avec tout le contenu du carrousel, le contenu vers lequel les diapositives du carrousel renvoie doit être accessible à partir d'autres chemins de navigation.

Bonnes pratiques concernant la lisibilité

Ne pas utiliser la lecture automatique

L'utilisation de la lecture automatique pose deux problèmes presque paradoxaux: les animations à l'écran ont tendance à distraire les utilisateurs et à détourner les yeux des contenus plus importants. Parallèlement, comme les utilisateurs associent souvent des animations à des annonces, ils ignorent les carrousels qui sont lus automatiquement.

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

Dans l'idéal, la navigation dans les diapositives doit être dirigée par l'utilisateur via des commandes de navigation. Si vous devez utiliser la lecture automatique, celle-ci doit être désactivée lorsque l'utilisateur pointe dessus. En outre, le taux de transition des diapositives doit tenir compte du contenu de la diapositive. Plus une diapositive contient de texte, plus elle doit s'afficher longtemps à l'écran.

Séparer le texte et les images

Le contenu texte du carrousel est souvent intégré au fichier image correspondant, plutôt que affiché séparément à l'aide du balisage HTML. Cette approche est mauvaise pour l'accessibilité, la localisation et les taux de compression. Il encourage également une approche unique de la création d'éléments. Cependant, la même mise en forme des images et du texte est rarement également lisible sur ordinateur et sur mobile.

Soyez 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'un espace vertical supplémentaire pour afficher du contenu supplémentaire n'est pas possible. Les carrousels sur les pages de produits sont souvent un bon exemple de ce cas d'utilisation.

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

• Les carrousels, en particulier s'ils contiennent des promotions ou s'ils font défiler l'écran automatiquement, peuvent facilement être confondus avec les annonces des utilisateurs. Les utilisateurs ont tendance à ignorer les publicités, un phénomène connu sous le nom de dynamique des bannières.
• Les carrousels sont souvent utilisés pour aménager plusieurs services et éviter de prendre des décisions sur les priorités de l'entreprise. Par conséquent, les carrousels peuvent facilement devenir une décharge pour les contenus inefficaces.

Tester vos hypothèses

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

Pour les rendre pertinentes

Les carrousels fonctionnent mieux s'ils présentent du contenu intéressant et pertinent dans un contexte clair. Si le contenu n'engage pas un utilisateur en dehors d'un carrousel, il ne sera pas plus performant si vous le placez dans un carrousel. Si vous devez utiliser un carrousel, hiérarchisez le contenu et assurez-vous que chaque diapositive est suffisamment pertinente pour qu'un utilisateur puisse cliquer sur la diapositive suivante.