Optimisez les carrousels pour améliorer les performances et la facilité d'utilisation.
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é, en soi, ne devrait avoir qu'un impact très minime ou 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 à ignorer. 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 des images 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 lors des transitions de diapositive sont généralement dus à la mise à jour des propriétés induisant la mise en page des éléments DOM. Exemples de ces propriétés:
left
,top
,width
etmarginTop
. Pour éviter les décalages de mise en page, utilisez plutôt la propriété CSStransform
pour effectuer la transition de ces éléments. Cette démonstration montre comment utilisertransform
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 non automatique, ces décalages de mise en page se produisent généralement dans les 500 ms suivant une interaction utilisateur et ne sont donc pas comptabilisés dans le décalage de mise en page cumulé (CLS). 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 du carrousel. Si la position de départ d'un élément change, mais que son décalage de défilement (c'est-à-dire
scrollLeft
ouscrollTop
) 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 semblables à un 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)
- Style Web de nouvelle génération: ancrage du 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 prend en compte les éléments de la page tels qu'ils sont peints dans le frame. 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 candidat LCP est plus grand que 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, la plus petite. 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 qui sont plus petites que 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 les plus grandes peintures à contenu. Avant Chrome 88, ces images n'étaient pas prises en compte. Pour les sites qui utilisent des carrousels en lecture automatique, cette modification 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 de la 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. 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 sont chargées avant d'être visibles dans le viewport. Cela signifie que le chargement des images est moins susceptible d'être remarqué par l'utilisateur, mais au prix de plus de téléchargements. Utilisez la démonstration du chargement paresseux horizontal pour comparer le comportement dans Chrome, 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 facile à parcourir et à lire.
Bonnes pratiques d'utilisation de Navigation
Fournir 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. N'oubliez pas 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 de naviguer plus facilement vers 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 de la 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, ne pas utiliser la lecture automatique maximisera son exposition. Si le contenu du carrousel n'est pas important, l'utilisation de la lecture automatique nuira aux contenus plus importants. De plus, les carrousels en lecture automatique peuvent être difficiles à lire (et ennuyeux aussi). Les utilisateurs lisent à des vitesses différentes. Il est donc rare qu'un carrousel passe de manière cohérente au "bon" moment pour différents utilisateurs.
Idéalement, la navigation dans les diapositives doit être contrôlé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. Il encourage également une approche universelle à la création d'assets. Toutefois, le même formatage d'image et de texte est rarement aussi lisible sur les ordinateurs que sur les appareils mobiles.
Ê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 que votre message soit compris.
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 avancent 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, priorisez le contenu et assurez-vous que chaque diapositive est suffisamment pertinente pour qu'un utilisateur veuille cliquer sur la diapositive suivante.