Why carousels affect Core Web Vitals

A carousel that is built well should have little to no direct impact on performance. In practice, however, carousels frequently contain the page's largest media assets, and those assets carry the same weight whether they sit inside a carousel or anywhere else on the page.

The three Core Web Vitals metrics each intersect with carousels in distinct ways:

  • LCP (Largest Contentful Paint): A large carousel positioned above the fold often contains the page's LCP element. In that scenario, careful optimization of the carousel can produce meaningful LCP improvements. The way LCP is calculated for autoplaying carousels is a common source of confusion, covered below.

  • INP (Interaction to Next Paint): Carousels have minimal JavaScript requirements and generally should not affect page responsiveness. If a carousel does run long scripts, the tooling itself is the likely culprit and should be replaced.

  • CLS (Cumulative Layout Shift): A surprising number of carousels rely on janky, non-composited animations that can contribute to CLS. On pages with autoplaying carousels, this can produce effectively infinite CLS. The shifts are typically not visible to the human eye, which makes the issue easy to miss. Avoid non-composited animations—for example, during slide transitions—to prevent this.

Put carousel content in the HTML

Carousel content should be present in the page's HTML so the browser discovers it early in the page load process. Kicking off carousel loading from JavaScript is probably the single largest performance mistake made with carousels: it delays image loading and can drag down LCP.

This pattern is recommended:

<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>

This pattern is not:

const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

For more advanced optimization, load the first slide statically and then progressively enhance it to add navigation controls and further slides. This technique works best in contexts where you hold the user's attention long enough for that additional content to load. On homepages, where users may leave within a second or two, showing only one image can be just as effective.

Prevent layout shifts

Slide transitions and navigation controls are the two most common sources of layout shifts inside carousels:

  • Slide transitions: Shifts usually come from updating layout-inducing properties on DOM elements, such as left, top, width, or marginTop. Use the CSS transform property instead to transition slides without triggering layout.

  • Navigation controls: Adding, removing, or moving controls in the DOM can cause shifts depending on how the change is implemented. This behavior often appears in response to user hover.

Two points about CLS measurement for carousels tend to confuse people:

  • Autoplay carousels: Slide transitions are the most common origin of carousel-related layout shift. In manually navigated carousels, those shifts typically occur within 500 ms of a user interaction and therefore do not count toward CLS. For an autoplaying carousel, the same shifts may count—and they can repeat indefinitely. Verifying that an autoplaying carousel is not a source of layout shift is especially important.

  • Scrolling: Some carousels support scroll-based navigation. If an element's start position changes but its scroll offset (scrollLeft or scrollTop) changes by the same amount in the opposite direction within the same frame, it is not counted as a layout shift.

Modern tooling, or no tooling at all

Many sites use third-party JavaScript libraries to build carousels. Older tooling often relies on outdated APIs and extra dependencies like jQuery, so switching to newer libraries can improve performance. Newer libraries use more efficient APIs and are less likely to carry additional dependencies.

For some carousels, you may not need JavaScript at all. The CSS Scroll Snap API lets you build carousel-like transitions with only HTML and CSS.

Optimize the media itself

Since carousels often contain some of the largest images on a site, treating those images as first-class optimization targets is worthwhile. Choosing the right format and compression level, using an image CDN, and serving multiple versions via srcset all reduce the bytes the browser has to transfer.

How LCP measurement works for carousels

Carousels are treated no differently from any other element in LCP calculation, but the mechanics for autoplaying carousels warrant a closer look:

  • LCP considers elements as they are painted to the frame. Once the user interacts with the page (tap, scroll, or keypress), no new LCP candidates are considered. In an autoplaying carousel, any slide can become the final LCP element; in a static carousel, only the first slide is ever a candidate.
  • When two equally sized images are rendered, the first one is treated as the LCP element. The LCP element is only replaced when a candidate is larger. So if all slides render at the same size, the first image shown is the LCP element.
  • LCP compares the visible size against the intrinsic size and uses whichever is smaller. When an autoplaying carousel displays images at a fixed size but those images have varying intrinsic sizes that are smaller than the display size, the LCP element can change as slides advance. In that case, the image with the largest intrinsic size wins. Keeping all slides at a consistent intrinsic size keeps LCP low.

Chrome 88 changed the rules for removed images

Since Chrome 88, images that are later removed from the DOM count as potential largest contentful paints; before that version they were excluded. For autoplaying carousels, the change is neutral or positive for LCP scores.

The change responded to the observation that many sites implement carousel transitions by taking the previously displayed image out of the DOM. Before Chrome 88, each new slide triggered an LCP update when the previous element was removed. The change only affects autoplaying carousels, since potential LCP paints can only occur prior to the user's first interaction with the page.

Chrome 121 aligned horizontal scrolling with vertical

Chrome 121 changed behavior for horizontal-scrolling images such as carousels, applying the same thresholds used for vertical scrolling. For the carousel use case, images now load before they scroll into the viewport. That means image loading is less likely to be perceptible to the user, at the cost of additional downloads.

Carousels should support clear navigation and readable content. Navigation controls need to be easy to click and highly visible; this is rarely done well, as most carousels feature controls that are both small and subtle. A single color or style of control will not work in all situations—an arrow visible against a dark background may be hard to see on a light one.

Controls should also show the total number of slides and the user's position within them. This context makes it easier to jump to a specific slide and to know which content has already been seen. In some cases, previewing upcoming content—such as a text excerpt or thumbnail list—can improve engagement. On mobile, swipe gestures should be supported alongside on-screen buttons. Since most users will not interact with every slide, the content each slide links to should also be reachable through other navigation paths.

Readability considerations

Autoplay should be avoided. It creates two conflicting problems: motion tends to distract users from more important content, and users often associate animation with ads, causing them to ignore autoplaying carousels. If a slide is important, not using autoplay maximizes its exposure; if it is not, autoplay detracts from content that matters. Reading speeds vary, so no fixed transition rate will suit all users.

Navigation should be user-directed. If autoplay is unavoidable, it must stop on hover, and the transition rate should reflect slide content—more text means a longer display time.

Text should not be baked into image files. This practice harms accessibility, localization, and compression, and it forces a single asset to serve both desktop and mobile layouts where the same formatting is rarely equally readable. Copy should be short and direct, as users decide within a fraction of a second whether to engage.

Product fit and business goals

Carousels are appropriate when vertical space for additional content is limited, such as on product pages. But they are often misused: auto-advancing or promotional carousels are easily mistaken for ads, and users tend to ignore them (a pattern known as banner blindness). Carousels are also sometimes used to satisfy multiple departments without making priority decisions, turning them into a resting place for ineffective content.

Carousel impact, especially on homepages, should be measured. Clickthrough rates reveal whether the component and its content are working. Carousels perform best with interesting, relevant content presented with clear context. If a slide would not engage a user on its own, placing it in a carousel will not help. Prioritize content so each slide is relevant enough that a viewer would want to proceed to the next.