Skip to content
- 1. Quickread
- 2. How carousels affect Core Web Vitals
- 3. UX Best Practices
- Navigation best practices
- Readability best practices
- Product best practices
- 4. Performance best practices
- Load carousel content using HTML
- Avoid layout shifts
- Use modern technology
- Optimize carousel content
Navigation best practices
a. Make navigation controls visible
Carousel navigation controls should be simple to operate and easily visible. Most carousels include navigation controls that are both small and subtle, which is something that is seldom done successfully. Remember that a single color or type of navigation control will almost never work in all scenarios. For example, an arrow that is easily visible against a dark background may be difficult to detect on a light background.
b. Indicate the current state of navigation
Carousel navigation controls should offer information about the overall number of slides as well as the user’s progress through them. This information allows the viewer to browse to a certain slide and determine which content has previously been viewed. In certain cases, offering a preview of forthcoming content—whether it’s an extract from the following slide or a list of thumbnails—can be beneficial and improve engagement.
c. Ensure mobile gestures are supported.
Swipe gestures, in addition to standard navigation controls, should be supported on mobile (such as on-screen buttons).
d. Provide other routes for navigation.
Because most users are unlikely to interact with all carousel material, the content that carousel slides connect to should be available via alternative navigation pathways.
You Might Be Interested In: Magento 2 Speed Optimization Services
Readability best practices
a. Use of autoplay is not recommended
The usage of autoplay causes two virtually contradictory issues: On-screen animations tend to distract viewers and divert their attention away from more essential content; at the same time, because people frequently connect animations with advertisements, they will disregard carousels that autoplay.
As a result, autoplay is rarely a suitable option. If the content is essential, not utilizing autoplay will increase its visibility; if the carousel content is not important, using autoplay will detract from more important information. Furthermore, autoplaying carousels might be difficult to understand (and annoying, too). People read at varying rates, thus it’s uncommon for a carousel to shift at the “correct” time for each user.
Ideally, slide navigation should be controlled by the user using navigation controls. If you must utilize autoplay, deactivate it on user hover. Furthermore, the slide transition rate should take slide content into account—the more text on a slide, the longer it should be presented on screen.
b. Separate the text and images.
Carousel text content is frequently “baked into” the associated image file rather than shown independently using HTML syntax. This method is harmful to accessibility, localization, and compression rates. Additionally, it promotes a one-size-fits-all approach to asset creation. The identical image and text layout, on the other hand, is rarely equally readable across desktop and mobile formats.
c. Be concise
You just have a fraction of a second to capture the attention of a user. A short, to-the-point copy will enhance the likelihood that your message is received.
Product best practices
Carousels are useful when there isn’t enough vertical room to present additional content. Carousels on product pages are frequently used to demonstrate this use case.
Carousels, on the other hand, are not always employed efficiently.
Carousels, on the other hand, are not always employed efficiently.
Carousel navigation controls should be simple to operate and easily visible. Most carousels include navigation controls that are both small and subtle, which is something that is seldom done successfully. Remember that a single color or type of navigation control will almost never work in all scenarios. For example, an arrow that is easily visible against a dark background may be difficult to detect on a light background.
- Users sometimes mistake carousels for advertising, especially if they feature promotions or move automatically. Advertisements are frequently ignored by users, a condition known as banner blindness.
- Carousels are frequently used to appease various departments and postpone making business-critical choices. As a result, carousels may easily become a repository for ineffective content.
a. Put your assumptions to the test
Carousels, particularly those on homepages, should be reviewed and tested for their commercial impact. Carousel clickthrough rates can help you assess how effective a carousel and its content are.
b. Be relevant
Carousels perform best when they feature engaging and relevant material given in a clear context. If content does not engage a user outside of a carousel, putting it in a carousel will not improve its performance. If you must utilize a carousel, prioritize information and ensure that each slide is relevant enough for a user to click through to the next screen.
4. Performance best practices
Load carousel content using HTML
Carousel material should be loaded via the page’s HTML markup so that the browser can find it early in the page load process. The single largest performance error to avoid when utilizing carousels is employing JavaScript to begin the loading of carousel content. This causes image loading to be delayed and can have a detrimental influence on LCP.
const slides = document.querySelector(“.slides”);
const newSlide = document.createElement(“img”);
newSlide.src = “htttp://example.com/cat1.jpg”;
slides.appendChild(newSlide);
const newSlide = document.createElement(“img”);
newSlide.src = “htttp://example.com/cat1.jpg”;
slides.appendChild(newSlide);
Consider loading the initial slide statically, then gradually improving it to incorporate navigation buttons and extra information for advanced carousel optimization. This method is particularly useful in situations where you have a user’s undivided attention—it allows the additional content time to load. Only loading a single image may be similarly efficient in contexts such as home pages, where viewers may only stay for a second or two.
Avoid layout shifts
The two most prevalent causes of layout shifts in carousels are slide transitions and navigation controls:
- Layout shifts during slide transitions are often generated by changing the layout-inducing attributes of DOM components. Some of these characteristics are as follows: left, top, width, and marginTop. Instead of using layout shifts, utilize the CSS transform property to transition these items. This example demonstrates how to use transform to create a simple carousel.
- Navigation controls: Depending on how these modifications are done, relocating or adding/removing carousel navigation controls from the DOM might cause layout adjustments. Carousels that display this feature usually do so in reaction to a user hover.
Use modern technology
To implement carousels, many websites employ third-party JavaScript libraries. If you are currently using outdated carousel tooling, upgrading to modern tooling may allow you to increase performance. Newer technologies have more efficient APIs and are less likely to require extra dependencies such as jQuery.
However, depending on the sort of carousel you are creating, JavaScript may not be required at all. The new Scroll Snap API allows you to create carousel-like transitions using only HTML and CSS.
Optimize carousel content
Carousels frequently include some of the biggest pictures on a site, so it may be worth your effort to ensure that these images are completely optimized. Utilizing an image CDN, choosing the proper image format and compression quality, and using srcset to provide multiple image versions are all ways that can minimize picture transfer size.
