What is CLS?
CLS measures visual instability — how much page content unexpectedly moves during and after loading. It is one of Google's three Core Web Vitals and directly impacts user trust, misclick rates, and conversion on product and checkout pages.
Google's CLS thresholds
Good
≤ 0.1
Needs improvement
0.1 – 0.25
Poor
> 0.25
What Cumulative Layout Shift (CLS) means
Cumulative Layout Shift (CLS) quantifies how visually unstable a page is. It measures the sum of all unexpected layout shift scores that occur while the page is loading — and continues measuring for the entire session, including shifts triggered by lazy-loaded images, dynamically injected banners, or web font swaps.
The CLS score is calculated by multiplying the 'impact fraction' (how much of the viewport moved) by the 'distance fraction' (how far it moved). A score of 0 means no shifts. A score above 0.1 means users are experiencing visible content jumps. At 0.25+, shifts are severe enough to cause misclicks, accidental purchases, or form submission errors.
For ecommerce sites, CLS is a revenue problem as much as an SEO problem. A product grid that shifts when images load, or a checkout page where the 'Place Order' button jumps down when a promo banner injects above it, directly causes mis-taps and abandoned sessions. Google's Page Experience research links poor CLS to measurable drops in both conversions and rankings.
Common causes of poor CLS
- Images without explicit width and height attributes — browser reserves zero space until the image loads
- Ads, embeds, or iframes without reserved dimensions
- Dynamically injected content (banners, badges, toasts) that pushes existing content down
- Web fonts that load after the initial render and shift surrounding text
- Animations that change an element's top, left, margin, or height (use transforms instead)
- Third-party widgets (chat, cookie banners) that inject above the fold
How to improve CLS
- Set explicit width and height on all images, or use CSS aspect-ratio to reserve space
- Pre-allocate space for dynamic content (banners, ad slots) with min-height containers
- Never inject promotional content above the fold after the initial paint
- Use next/font with size-adjust to minimise font-swap layout shifts
- Move cookie consent banners to fixed positioning so they don't affect document flow
- Use CSS transform instead of top/left/margin for animations
Frequently asked questions about CLS
What is a good CLS score?
Google considers a CLS score of 0.1 or less as 'Good'. Scores between 0.1 and 0.25 are 'Needs Improvement', and above 0.25 is 'Poor'. Aim for 0.05 or below on revenue-critical pages to keep shifts imperceptible to users.
What causes CLS on ecommerce product pages?
The most common causes are: product images loading without reserved dimensions, dynamically injected sale badges or stock labels, promotional banners inserted by JavaScript after initial paint, and web fonts causing text to reflow when they swap in.
Does CLS affect Google rankings?
Yes. CLS is one of Google's three Core Web Vitals and is used as a ranking signal in the Page Experience update. Pages with 'Poor' CLS (above 0.25) may rank lower than equivalent pages with stable layouts, especially in competitive verticals.
How is CLS different from a layout shift I can see?
Not all layout shifts are penalised. CLS only counts unexpected shifts — those not caused by user interaction. A tooltip that appears after a click is not penalised. A banner that injects above the fold 2 seconds after page load, with no user action, is penalised in full.
How does AuditJet detect CLS issues?
AuditJet runs Google Lighthouse on a schedule and surfaces CLS scores alongside the specific elements that caused layout shifts — including shifted element selectors and shift amounts. When CLS regresses between audits, AuditJet sends an alert so your team can identify the injection that caused the shift before it affects rankings.
Monitor CLS continuously.
AuditJet tracks CLS across all your pages on a scheduled basis and alerts your team the moment it regresses.