Cumulative Layout Shift (CLS)
CLS measures visual stability — how much your page content unexpectedly moves during load. Poor CLS causes misclicks, lost orders, and lower Google rankings.
Google's Thresholds
Cumulative Layout Shift quantifies visual instability. It measures every unexpected shift of visible content during the page's entire lifespan — not just during load, but throughout the session.
The CLS score is the product of the 'impact fraction' (how much of the viewport shifted) and the 'distance fraction' (how far content moved). A perfectly stable page scores 0. Google considers anything above 0.1 as 'Needs Improvement'.
For ecommerce sites, CLS is a direct revenue risk. A checkout button that jumps down when a promotional banner loads above it causes accidental taps on the wrong element, leading to abandoned checkouts and lost orders.
Common causes
When width and height attributes are missing, the browser allocates zero space for images before they load, causing a shift when they arrive.
Banners, cookie notices, and promotional toasts inserted by JavaScript after initial paint push existing content down — causing large layout shifts.
When a web font loads and replaces the fallback font, differences in metrics (character width, line height) cause text to reflow and surrounding elements to shift.
Ad slots that resize when the ad loads are one of the most common sources of high CLS on publisher and media sites.
Animating layout properties triggers full layout recalculations and causes shifts. Use CSS transform: translateY() instead.
How to fix it
Modern browsers use the width/height ratio to reserve space before images load. Adding these attributes to all <img> tags is the single most impactful CLS fix.
If a banner or ad will inject above existing content, pre-allocate its space with a container of the correct min-height before the content loads.
font-display: optional prevents the font swap entirely for users on slow connections. size-adjust normalises the fallback font to match the custom font's metrics, minimising shift when swapping.
Replace top/left/height animations with transform: translateY(). Transforms are compositor-only — they don't trigger layout and don't cause CLS.
The aspect-ratio property reserves the correct space for images, videos, and embeds before they load — preventing layout shift without needing explicit px dimensions.
FAQ
What is a good CLS score?
Google considers 0.1 or less as 'Good'. Between 0.1 and 0.25 is 'Needs Improvement'. Above 0.25 is 'Poor'. For revenue-critical pages, target 0.05 or below.
What causes CLS on ecommerce sites?
The most common causes are images without reserved dimensions on product grids, dynamically injected sale badges or promo banners, and cart or checkout widgets that load and resize after initial paint.
Does CLS affect Google rankings?
Yes — CLS is one of Google's three Core Web Vitals and has been a ranking signal since the Page Experience update in June 2021.
How do I measure CLS on my site?
Use Google PageSpeed Insights or AuditJet for lab CLS scores. For real-user CLS, use the web-vitals JavaScript library or AuditJet's RUM script. CrUX field data in Google Search Console shows the 75th percentile CLS from real Chrome users.
Monitor Core Web Vitals continuously
AuditJet tracks every metric on a schedule and alerts you when scores regress — with revenue impact in dollars and AI fix suggestions.
Start Monitoring Free