What is CLS? Complete Guide to Cumulative Layout Shift

What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) is one of Google's three Core Web Vitals metrics. It measures visual stability by quantifying how much unexpected layout shift occurs during the entire lifespan of a page.

CLS captures user frustration when page elements move unexpectedly. Have you ever tried to click a button, only to have it shift and click something else? That's what CLS measures.

A layout shift occurs whenever a visible element changes its start position from one rendered frame to the next. CLS is calculated by multiplying the impact fraction (how much of the viewport shifted) by the distance fraction (how far elements moved).

• CLS measures unexpected movement of page elements
• Good CLS: under 0.1 | Needs improvement: 0.1-0.25 | Poor: over 0.25
• Only unexpected shifts count - user-initiated movements are excluded
• CLS is measured throughout the page's entire lifecycle, not just initial load

Why CLS matters for SEO and user experience

CLS directly impacts user trust and conversion rates. When pages jump around unexpectedly, users feel the site is unreliable or broken. Studies show high CLS correlates with higher bounce rates.

Google includes CLS in Core Web Vitals because it reflects real user frustration. Poor CLS can lead to accidental clicks on ads or wrong links, creating terrible user experiences.

E-commerce sites are especially vulnerable to CLS issues. Imagine a user ready to click 'Add to Cart' when a promotional banner pushes the button down, causing them to click 'Remove from Wishlist' instead.

Common causes of layout shifts

Images and videos without dimensions are the most common CLS culprit. When the browser doesn't know the size of media in advance, it first renders with zero height, then shifts content when the media loads.

Web fonts that load after text has rendered cause FOIT (Flash of Invisible Text) or FOUT (Flash of Unstyled Text), both of which create layout shifts as text re-renders with different dimensions.

Dynamically injected content like ads, embeds, or iframes often cause massive shifts because space isn't reserved for them in advance.

• Images and videos without width/height attributes
• Web fonts causing FOIT/FOUT
• Ads, embeds, and iframes without reserved space
• Dynamically injected content (cookie banners, notifications)
• Content loading above existing content
• Animations that trigger layout recalculations

How to fix CLS issues

Always include width and height attributes on images and videos. Modern browsers use these to calculate aspect ratios before the media loads, reserving the correct space.

Use CSS aspect-ratio or padding-bottom hacks to reserve space for dynamic content like ads and embeds. If an ad slot is 300x250, reserve that space even before the ad loads.

Preload web fonts and use font-display: optional or font-display: swap with fallback fonts that have similar metrics to minimize text reflowing.

CLS optimization checklist

Follow this systematic approach to eliminate layout shifts. Test your changes in Chrome DevTools Performance panel, which highlights layout shifts in red.

Use MakeWebsite.fast to monitor your CLS score over time. Field data in Chrome User Experience Report shows real-world CLS, which may differ from lab tests.

• Add width and height to all <img> and <video> elements
• Use CSS aspect-ratio for responsive images
• Reserve space for ads with min-height on containers
• Preload web fonts with font-display: swap
• Don't insert content above existing content
• Use transform animations instead of layout-triggering properties
• Add skeleton loaders that match final content dimensions
• Test with slow 3G to see all layout shifts