Carousels. You'll see them everywhere. Like those fairground rides with the horses on poles. They go around and around and around and around. Scrolling content sounds like a great idea - displaying more content in a smaller area, consolidating essential information - right?
Research consistently indicates that users generally don't interact with carousels. Even when they do, they typically only click on the first item. Additionally, many carousels lack accessibility, hindering a significant portion of your audience from digesting and understanding the content, let alone determining if it's worth exploring further.
From a performance perspective, it's advisable to steer clear of them. JavaScript plugins designed to smooth out differences between mouse and touch users, mobile, tablet, and desktop access can significantly impact your page's performance.
For example, Swiper, billed as 'The most modern mobile touch slider,' is 148KB compressed. This size doesn't include the additional 18KB compressed for styles to make a Swiper carousel visually appealing.
Consider this for a moment: the entire page you're reading is under 280KB to download to your browser. Implementing a basic Swiper carousel with no content, you'll download around 170KB of code (148KB JavaScript, 18KB CSS, and a bit of HTML). That doesn't even include the rest of the page needed before anything looks and functions correctly. That's impractical.
In my experience, the primary reasons for using a carousel include:
- Adding movement, interaction, and something 'different' to a page.
- Uncertainty about what to replace it with.
- There was an argument about the importance and priority of content and nobody won.
- Page overcrowding, and a desire to improve aesthetics.
- Acknowledgment of its adverse impact on page performance but still choosing to use it.
However, simple counter-arguments prevail:
-
Unnecessary movement can reduce page accessibility and cause issues for visitors with vestibular disorders, or are triggered by visual stimuli.
Even if a carousel is deemed necessary, an alternative must be considered for users who cannot interact with it as expected.
-
To enhance page aesthetics without overwhelming content, consider alternatives like creating more breathing space, using pull quotes, or employing useful images.
Cluttered pages and walls of text can trigger users with ADHD or Autism Spectrum Disorder, and can be very difficult to digest for Dyslexic users, people with low vision or blindess too.
-
Importance of content is a real bugbear for me. If a lot of content is the most important, then none of it is the most important. Whatever your content is, a single something has absolutely got to be the most important. That's just a fact. Something still has to be the first thing, even in a carousel. And if you can decide on that, then you can certainly decide on sacking your carousel off for something else.
-
You really should care about page performance.
- The more you load, the more data users consume, potentially incurring additional costs.
- Slower pages increase the likelihood of users abandoning your site in favor of competitors.
- Poor page performance contributes to a negative environmental impact. Consider the carbon footprint.
- Search engine rankings are influenced by page performance, with Google actively promoting website efficiency.
If you're still unsure, you should ask yourself the question: Should I use a carousel?. And hopefully you'll come to the same conclusion.