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 UX qui affiche le contenu sous la forme d'un diaporama. Les carrousels peuvent être lus automatiquement. ou être parcourues manuellement par les utilisateurs. Bien que les carrousels peuvent être utilisés ailleurs, le plus souvent pour afficher des images, produits et promotions sur les pages d'accueil.

Cet article traite des bonnes pratiques concernant les performances et l'expérience utilisateur pour les carrousels.

Performances

Un carrousel bien implémenté, en soi, doit avoir très peu ou pas de sur les performances. Cependant, les carrousels contiennent souvent des éléments multimédias volumineux. Les composants volumineux peuvent avoir un impact sur les performances, qu'ils soient affichés ou non 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 peut donc avoir un impact significatif sur le LCP. Dans ces scénarios, optimiser le carrousel peut considérablement améliorer le LCP. Pour une étude approfondie explication 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 JavaScript minimales et ne doivent donc pas impacter la réactivité de la page. Si vous découvrez que le carrousel de votre site comporte scripts de longue durée, envisagez de remplacer vos outils de carrousel.

• CLS (Cumulative Layout Shift)

  Un nombre surprenant de carrousels utilisent des animations non composées saccadées qui peuvent contribuer au CLS. Sur les pages avec des carrousels à lecture automatique, de provoquer 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 cela, é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 d'un code HTML

Le contenu du carrousel doit être chargé via le balisage HTML de la page pour qu'il soit par le navigateur au début du processus de chargement de la page. L'utilisation de JavaScript pour le chargement du contenu du carrousel est probablement les erreurs de performances à éviter lorsque vous utilisez des carrousels. Cela retarde le chargement des images peut avoir un impact négatif sur le LCP.

À faire

<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>

À éviter

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, pensez à charger la première diapositive en mode statique, puis l'améliorer progressivement pour inclure des commandes de navigation contenus. Cette technique s'applique particulièrement aux environnements dans lesquels vous disposez l'attention prolongée de l'utilisateur. Ainsi, le contenu supplémentaire a du temps à se charger. Dans des environnements tels que les pages d'accueil, où les utilisateurs ne restent parfois sur le site qu'une seconde ou 2, le chargement d'une seule image peut être tout aussi efficace.

Éviter les décalages de mise en page

Remarque : Dans les versions 88 à 90 de Chrome, plusieurs corrections de bugs liées au calcul des décalages de mise en page étaient disponibles. Bon nombre de ces corrections de bugs concernent les carrousels. En raison de ces correctifs, les sites devraient constater des scores de décalage de mise en page inférieurs liés au carrousel dans les versions ultérieures de Chrome.

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

• Transitions de diapositive:les décalages de mise en page survenant lors des transitions entre les diapositives généralement causées par la mise à jour des propriétés de 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 feuille de style CSS. transform pour effectuer la transition de ces éléments. Ce demo montre comment utiliser transform pour construire un carrousel de base.

• Commandes de navigation:déplacer ou ajouter/supprimer la navigation dans le carrousel du DOM peut entraîner des décalages de mise en page, selon la façon sont implémentées. Les carrousels qui montrent ce comportement le font généralement dans au passage de la souris de l'utilisateur.

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

• Carrousels à lecture automatique:les transitions entre les diapositives sont la source la plus courante de décalages de mise en page liés au carrousel. Dans un carrousel sans lecture automatique, ces décalages de mise en page se produisent généralement dans les 500 ms suivant une interaction de l'utilisateur ; elles ne comptent donc pas vers Cumulative Layout Shift (CLS). Toutefois, pour les carrousels en lecture automatique, non seulement ces décalages de mise en page vers le CLS, mais elles peuvent aussi être répétées indéfiniment. C'est pourquoi il est particulièrement important de vérifier qu'un carrousel en lecture automatique n'est pas une source de mise en page changements de direction.

• Défilement:certains carrousels permettent aux utilisateurs de faire défiler la page les diapositives du carrousel. Si la position de départ d'un élément change, mais son décalage de défilement (c'est-à-dire scrollLeft ou scrollTop) du même volume (mais dans le sens opposé), ce n'est pas considéré comme un décalage de mise en page à condition qu'ils se produisent dans le même cadre.

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

Utiliser une technologie moderne

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

Cependant, selon le type de carrousel que vous créez, vous n'aurez peut-être pas besoin en JavaScript. Le nouveau Défilement API Snap permet d'implémenter des transitions de type carrousel en n'utilisant que du code HTML et CSS

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

• Créer un composant Stories (web.dev)
• Styles Web nouvelle génération: Snap de 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 plus grandes images d'un site, ils peuvent donc en valoir la peine pour s'assurer que ces images sont totalement optimisées. Choisir le bon produit le format d'image et le niveau de compression en utilisant un CDN pour les images ; en utilisant srcset pour diffuser plusieurs images versions sont toutes les 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 sont traités comme n'importe quel autre élément UX pendant le LCP. le mécanisme de calcul du LCP pour les carrousels en lecture automatique ce point commun de confusion.

Mesure du LCP pour les carrousels

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

• Le LCP tient compte des éléments de la page au fur et à mesure qu'ils sont peints dans le cadre. Nouveaux candidats pour l'élément LCP ne sont plus pris en compte une fois que l'utilisateur interagit (appuyer, les défilements ou les pressions de touche) sur la page. Ainsi, toute diapositive d'une lecture automatique le carrousel peut constituer l'élément LCP final, alors que dans un modèle statique seule la première diapositive serait un candidat 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 plus grand que l'élément LCP actuel. Ainsi, si tous les éléments du carrousel de taille égale, l'élément LCP doit être la première image qui s'affiche.
• Lors de l'évaluation des candidats au LCP, le LCP tient compte de la "taille visible ou du sa taille intrinsèque, selon la plus petite des deux." Ainsi, si une lecture automatique le carrousel affiche des images de taille cohérente, mais contient des images de intrinsèque varié tailles d'écran plus petite que la taille d'affichage, l'élément LCP peut changer diapositives s'affichent. Dans ce cas, si toutes les images s'affichent en même temps l'image ayant la plus grande taille intrinsèque sera considérée comme le LCP . Pour maintenir un LCP faible, assurez-vous que tous les éléments d'un ont la même taille intrinsèque.

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

À compter du Chrome 88, Les images qui sont ensuite supprimées du DOM sont considérées comme les plus grandes Contentful Paints. Avant Chrome 88, ces images étaient exclues de la considération. Pour les sites qui utilisent des carrousels à lecture automatique, cette définition change aura un impact neutre ou positif sur les scores LCP.

Cette modification a été effectuée en réponse à la l'observation que de nombreux sites mettent en œuvre des transitions de carrousel en supprimant les éléments à partir de l'arborescence DOM. Avant Chrome 88, chaque fois qu'une nouvelle diapositive a été présentée, la suppression de l'élément précédent déclencherait un LCP mise à jour. Cette modification n'affecte que la lecture automatique des carrousels, par définition, les peintures de plus grande taille ne peuvent apparaître qu'avant qu'un utilisateur n'interagisse pour la première fois avec .

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 dans le cas d'utilisation du carrousel, les images sont chargées avant d'être visibles dans la fenêtre d'affichage. 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 à prendre en compte

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

Bonnes pratiques d'utilisation de Navigation

Afficher des commandes de navigation bien visibles

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

Indiquer 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 dans celles-ci. Ces informations permettent de faciliter permettant à l'utilisateur d'accéder à une diapositive particulière et de comprendre quel contenu a a déjà été consultée. Dans certains cas, l'affichage d'un aperçu qu'il s'agisse d'un extrait de la diapositive suivante ou d'une liste de miniatures, également être utile et augmenter l’engagement.

Prendre en charge les gestes mobiles

Sur mobile, les gestes de balayage doivent être pris en charge en plus des gestes les commandes de navigation (comme les boutons sur 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 le contenu vers lequel renvoient les diapositives du carrousel doit être accessible depuis d'autres outils de navigation chemins d'accès.

Bonnes pratiques concernant la lisibilité

Ne pas utiliser la lecture automatique

L'utilisation de la lecture automatique crée deux problèmes presque paradoxaux: l'affichage à l'écran. les animations ont tendance à distraire les utilisateurs et à éloigner les yeux des éléments plus importants content; Comme les utilisateurs associent souvent des animations aux annonces, ignore les carrousels en lecture automatique.

Il est donc rare que la lecture automatique soit un choix judicieux. Si le contenu est important, pas la lecture automatique maximisera son exposition. si le contenu du carrousel n'est pas important, l'utilisation de la lecture automatique détourne l'attention des spectateurs pour les contenus plus importants. De plus, Les carrousels à lecture automatique peuvent être difficiles à lire (et ennuyeux également). Lu par des utilisateurs à des vitesses différentes, il est donc rare qu'un carrousel passe de manière cohérente la "droite" en fonction des 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, celle-ci doit être désactivée lorsque l'utilisateur pointe dessus. De plus, Le taux de transition des diapositives doit tenir compte du contenu des diapositives. Plus il y a de texte, d'une diapositive, plus elle doit s'afficher longtemps à l'écran.

Séparez le texte et les images

Le contenu du texte du carrousel est souvent intégré le fichier image correspondant, que ceux affichés séparément à l'aide du balisage HTML. Cette approche est mauvaise pour l'accessibilité, la localisation et les taux de compression. Cela favorise également une approche générique pour créer des assets. Cependant, la même image et le même texte la mise en forme est rarement lisible aussi bien sur ordinateur que sur mobile.

Être concise

Vous n'avez qu'une fraction de seconde pour attirer l'attention d'un utilisateur. Court, une copie précise augmentera les chances de faire passer votre message.

Bonnes pratiques concernant les produits

Les carrousels fonctionnent bien lorsqu'ils utilisent un espace vertical supplémentaire pour afficher du contenu supplémentaire n'est pas une option. Les carrousels sur les pages de produits sont est 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 avancent automatiquement, peuvent facilement être confondus avec des publicités par les utilisateurs. Les utilisateurs ont tendance à ignorer les publicités : un phénomène appelé bannière aveugle.
• Les carrousels sont souvent utilisés pour apaiser plusieurs services et éviter de faire les décisions concernant les priorités de l’entreprise. Par conséquent, les carrousels peuvent facilement tourner en une décharge en raison de contenus inefficaces.

Tester vos hypothèses

L'impact commercial des carrousels, en particulier ceux des pages d'accueil, devrait être évalués et testés. Les taux de clics du carrousel peuvent vous aider à déterminer un carrousel et que son contenu est efficace.

Pour les rendre pertinentes

Les carrousels fonctionnent mieux lorsqu'ils contiennent du contenu intéressant et pertinent, présenté avec un contexte clair. Si le contenu n'engagerait pas un utilisateur en dehors carrousel, le placer dans un carrousel ne n'améliorera pas ses performances. Si vous devez utiliser un carrousel, hiérarchiser le contenu et s’assurer que chaque diapositive est suffisamment sur laquelle l'utilisateur voudrait cliquer pour accéder à la diapositive suivante.