CLS - Cumulative Layout Shift

What is CLS?

Cumulative Layout Shift (CLS) measures the visual stability of your website. It detects how much visible content unexpectedly shifts position during loading. If you've ever clicked on a button that suddenly moved because an image or ad loaded above it - you've experienced layout shift.

CLS is one of Google's three Core Web Vitals and is used as a ranking factor in search results.

How is CLS measured?

CLS is calculated as the sum of all individual layout shifts that occur without user interaction:

• Good: CLS below 0.1 - minimal or no visible movement
• Needs improvement: CLS between 0.1 and 0.25
• Bad: CLS above 0.25 - significant unexpected movement

Only layout shifts that happen without user interaction (scroll, click) are counted. If a user clicks a button and the content changes, this is expected and does not count.

Typical causes of CLS in eCommerce

• Images without dimensions: If images don't have width/height attributes in the HTML, the browser doesn't reserve space and the content below the image jumps when the image is loaded.
• Dynamic content: Banners, ads or product recommendations that load after the initial rendering of the page and push content down.
• Web fonts: Fonts that load late and have a different size than the fallback font (FOUT - Flash of Unstyled Text) can move content.
• Cookies/consent banners: Cookie-consent bars that pop up after loading and push content down.
• Lazy-loaded content: Elements that lazy-load without having space reserved.

How to improve CLS

• Set dimensions on images: Always set width and height on all <img> elements so the browser can reserve space before the image loads.
• Reserve space for dynamic content: Use CSS (min-height or aspect-ratio) to reserve space for banners, ads and other elements that load dynamically.
• Use font-display: swap; this prevents invisible text but can cause FOUT. Combine with preload for optimal balance.
• Place cookie banners as overlay: Use position:fixed so they don't push page content.
• Prefetch important resources: Use <link rel="preload"> for critical fonts, images and CSS.

CLS and Shoporama

Shoporama themes are designed with performance in mind. For the best CLS score, ensure that all product images have correct dimensions and that external content (chatbots, tracking scripts) loads without affecting the layout.

Measurement tools

• Google PageSpeed Insights: Shows CLS for both mobile and desktop with specific elements that contribute to shift.
• Chrome DevTools (Lighthouse): Run a Lighthouse audit to see CLS and other Core Web Vitals.
• Google Search Console: The Core Web Vitals report shows CLS performance for your entire site based on real user data (CrUX).
• Web Vitals Chrome Extension: Shows CLS and other Core Web Vitals in real-time while browsing.