Best practices for carousels with respect to Core Web Vitals

June 29, 2021 | 8 min read

Best practices for carousels with respect to Core Web Vitals

1. QuickRead

A carousel is a user interface component that presents the material in a slideshow-like fashion. Carousels can be set to “autoplay” or manually browsed by users. Carousels may be used in a variety of ways, but they are most commonly used on homepages to display photos, items, and promotions.
This article addresses carousel performance and UX best practices.

2. How carousels affect Core Web Vitals

A well-implemented carousel should have little or no effect on performance in and of itself. Carousels, on the other hand, frequently contain huge media assets. Large assets can have an influence on performance whether they are shown in a carousel or elsewhere.

LCP (Largest Contentful Paint)

Large, above-the-fold carousels frequently include the page’s LCP element and, as a result, can have a substantial influence on LCP. In certain cases, improving the carousel may enhance LCP substantially.

FID (First Input Delay)

Carousels have low JavaScript needs and thus should not interfere with website interaction. If you notice that your site’s carousel has long-running scripts, you should consider changing your carousel tooling.

CLS (Cumulative Layout Shift)

A surprising amount of carousels make use of janky, non-composited animations, which can contribute to CLS. This has the potential to create endless CLS on pages with auto-playing carousels. This form of CLS is generally invisible to the naked eye, making the problem simple to miss. Avoid utilizing non-composited animations in your carousel to avoid this problem (for example, during slide transitions).

3. UX Best Practices

This section addresses UX and product recommended practices to remember while creating carousels. Carousels should advance your business goals while also presenting content in an easy-to-navigate and readable format.

Top Reads

Contact Us

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.
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.
Do
<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>
Don’t
const slides = document.querySelector(“.slides”);
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.

Top Reads

Contact Us

Jun 29th, 2021|
This website or its third party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the privacy policy . By tapping on "I accept" you agree to the use of cookies.