Best practices for carousels  |  Articles  |  web.dev (2024)

Optimize carousels for performance and usability.

A carousel is a UX component that displays content in slideshow-like manner.Carousels can "autoplay" or be navigated manually by users. Although carouselscan be used elsewhere, they are most frequently used to display images,products, and promotions on homepages.

This article discusses performance and UX best practices for carousels.

Performance

A well-implemented carousel, in and of itself, should have very minimal or noimpact on performance. However, carousels often contain large media assets.Large assets can impact performance regardless of whether they are displayed ina carousel or elsewhere.

• LCP (Largest Contentful Paint)

  Large, above-the-fold carousels often contain the page's LCP element, andtherefore can have a significant impact on LCP. In these scenarios,optimizing the carousel may significantly improve LCP. For an in-depthexplanation of how LCP measurement works on pages containing carousels,refer to the LCP measurement for carouselssection.

• INP (Interaction to Next Paint)

  See Also

  More Alternatives to Using a Carousel on Your WebsiteHow to Create Carousel Ads for Social Media With Examples - DigivizerImage Carousel Widget | ElementorCarousel ad tips

  Carousels have minimal JavaScript requirements and therefore should notimpact page responsiveness. If you discover that your site's carousel haslong-running scripts, you should consider replacing your carousel tooling.

• CLS (Cumulative Layout Shift)

  A surprising number of carousels use janky, non-composited animations thatcan contribute to CLS. On pages with autoplaying carousels, this has thepotential to cause infinite CLS. This type of CLS typically isn't apparentto the human eye, which makes the issue easy to overlook. To avoid thisissue, avoid using non-composited animationsin your carousel (for example, during slide transitions).

Performance best practices

Load carousel content using HTML

Carousel content should be loaded via the page's HTML markup so that it isdiscoverable by the browser early in the page load process. Using JavaScript toinitiate the loading of carousel content is probably the single biggestperformance mistake to avoid when using carousels. This delays image loading andcan negatively impact 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);

For advanced carousel optimization, consider loading the first slide statically,then progressively enhancing it to include navigation controls and additionalcontent. This technique is most applicable to environments where you have auser's prolonged attention—this gives the additional content time to load. Inenvironments like home pages, where users may only stick around for a second ortwo, only loading a single image may be similarly effective.

Avoid layout shifts

Slide transitions and navigation controls are the two most common sources oflayout shifts in carousels:

• Slide transitions: Layout shifts that occur during slide transitions areusually caused by updating the layout-inducing properties of DOM elements.Examples of some of these properties include: left, top, width, andmarginTop. To avoid layout shifts, instead use the CSStransformproperty to transition these elements. Thisdemo shows how to use transform tobuild a basic carousel.

• Navigation controls: Moving or adding/removing carousel navigationcontrols from the DOM can cause layout shifts depending on how these changesare implemented. Carousels that exhibit this behavior typically do so inresponse to user hover.

These are some of the common points of confusion regarding CLS measurement forcarousels:

• Autoplay carousels: Slide transitions are the most common source ofcarousel-related layout shifts. In a non-autoplay carousel these layout shiftstypically occur within 500ms of a user interaction and therefore do not counttowards Cumulative Layout Shift(CLS). However,for autoplay carousels, not only can these layout shifts potentially counttowards CLS - but they can also repeat indefinitely. Thus, it is particularlyimportant to verify that an autoplay carousel is not a source of layoutshifts.

• Scrolling: Some carousels allow users to use scrolling to navigate throughcarousel slides. If an element's start position changes but its scroll offset(that is,scrollLeftorscrollTop)changes by the same amount (but in the opposite direction) this is notconsidered a layout shift provided that they occur in the same frame.

For more information on layout shifts, see Debug layoutshifts.

Use modern technology

Many sites use third-party JavaScript libraries toimplement carousels. If you currently use older carousel tooling, you may beable to improve performance by switching to newer tooling. Newer tools tend touse more efficient APIs and are less likely to require additional dependencieslike jQuery.

However, depending on the type of carousel you are building, you may not needJavaScript at all. The new ScrollSnap APImakes it possible to implement carousel-like transitions using only HTML andCSS.

Here are some resources on using scroll-snap that you may find helpful:

• Building a Stories component (web.dev)
• Next-generation web styling: scroll snap (web.dev)
• CSS-Only Carousel (CSS Tricks)
• How to Make a CSS-Only Carousel (CSS Tricks)

Optimize carousel content

Carousels often contain some of a site's largest images, so it can be worth yourtime to make sure that these images are fully optimized. Choosing the rightimage format and compression level, using an image CDN, andusing srcset to serve multiple imageversions areall techniques that can reduce the transfer size of images.

Performance measurement

This section discusses LCP measurement as it relates to carousels. Althoughcarousels are treated no differently than any other UX element during LCPcalculation, the mechanics of calculating LCP for autoplaying carousels is acommon point of confusion.

LCP measurement for carousels

These are the key points to understanding how LCP calculation works for carousels:

• LCP considers page elements as they are painted to the frame. New candidatesfor the LCP element are no longer considered once the user interacts (taps,scrolls, or keypresses) with the page. Thus, any slide in an autoplayingcarousel has the potential to be the final LCP element—whereas in a staticcarousel only the first slide would be a potential LCP candidate.
• If two equally sized images are rendered, the first image will be consideredthe LCP element. The LCP element is only updated when the LCP candidate islarger than the current LCP element. Thus, if all carousel elements areequally sized, the LCP element should be the first image that is displayed.
• When evaluating LCP candidates, LCP considers the "visible size or theintrinsic size, whichever is smaller." Thus, if an autoplayingcarousel displays images at a consistent size, but contains images ofvarying intrinsicsizesthat are smaller than the display size, the LCP element may change as newslides are displayed. In this case, if all images are displayed at the samesize, the image with the largest intrinsic size will be considered the LCPelement. To keep LCP low, you should ensure that all items in an autoplayingcarousel are the same intrinsic size.

Changes to LCP calculation for carousels in Chrome 88

As of Chrome88,images that are later removed from the DOM are considered as potential largestcontentful paints. Prior to Chrome 88, these images were excluded fromconsideration. For sites that use autoplaying carousels, this definition changewill either have a neutral or positive impact on LCP scores.

This change was made in response to theobservationthat many sites implement carousel transitions by removing the previouslydisplayed image from the DOM tree. Prior to Chrome 88, each time that a newslide was presented, the removal of the previous element would trigger an LCPupdate. This change only affects autoplaying carousels-by definition, potentiallargest contentful paints can only occur before a user first interacts with thepage.

Other considerations

This section discusses UX and product best practices that you should keep inmind when implementing carousels. Carousels should advance your business goalsand present content in a way that is easy to navigate and read.

Navigation best practices

Provide prominent navigation controls

Carousel navigation controls should be easy to click and highly visible. This issomething that is rarely done well-most carousels have navigation controls thatare both small and subtle. Keep in mind that a single color or style ofnavigation control will rarely work in all situations. For example, an arrowthat is clearly visible against a dark background might be difficult to seeagainst a light background.

Indicate navigation progress

Carousel navigation controls should provide context about the total number ofslides and the user's progress through them. This information makes it easierfor the user to navigate to a particular slide and understand which content hasalready been viewed. In some situations providing a preview of upcomingcontent—whether it be an excerpt of the next slide or a list of thumbnails-canalso be helpful and increase engagement.

Support mobile gestures

On mobile, swipe gestures should be supported in addition to traditionalnavigation controls (such as on screen buttons).

Provide alternate navigation paths

Because it's unlikely that most users will engage with all carousel content, thecontent that carousel slides link to should be accessible from other navigationpaths.

Readability best practices

Don't use autoplay

The use of autoplay creates two almost paradoxical problems: on-screenanimations tend to distract users and move the eyes away from more importantcontent; simultaneously, because users often associate animations with ads, theywill ignore carousels that autoplay.

Thus, it's rare that autoplay is a good choice. If content is important, notusing autoplay will maximize its exposure; if carousel content is not important,then the use of autoplay will detract from more important content. In addition,autoplaying carousels can be difficult to read (and annoying, too). People readat different speeds, so it's rare that a carousel consistently transitions atthe "right" time for different users.

Ideally, slide navigation should be user-directed via navigation controls. Ifyou must use autoplay, autoplay should be disabled on user hover. In addition,the slide transition rate should take slide content into account-the more textthat a slide contains, the longer it should be displayed on screen.

Keep text and images separate

Carousel text content is often "baked into" the corresponding image file, ratherthan displayed separately using HTML markup. This approach is bad foraccessibility, localization, and compression rates. It also encourages aone-size-fits-all approach to asset creation. However, the same image and textformatting is rarely equally readable across desktop and mobile formats.

Be concise

You only have a fraction of a second to catch a user's attention. Short,to-the-point copy will increase the odds that your message gets across.

Product best practices

Carousels work well in situations where using additional vertical space todisplay additional content is not an option. Carousels on product pages areoften a good example of this use case.

However, carousels are not always used effectively.

• Carousels, particularly if they contain promotions or advance automatically,are easily mistaken foradvertisem*nts by users. Users tend to ignore advertisem*nts—a phenomenonknown as bannerblindness.
• Carousels are often used to placate multiple departments and avoid makingdecisions about business priorities. As a result, carousels can easily turninto a dumping ground for ineffective content.

Test your assumptions

The business impact of carousels, particularly those on homepages, should beevaluated and tested. Carousel clickthrough rates can help you determine whethera carousel and its content is effective.

Be relevant

Carousels work best when they contain interesting and relevant content that ispresented with a clear context. If content wouldn't engage a user outside of acarousel—placing it in a carousel won't make it perform any better. If you mustuse a carousel, prioritize content and ensure that each slide is sufficientlyrelevant that a user would want to click through to the subsequent slide.