CLS - Cumulative Layout Shift

What is CLS?

Cumulative Layout Shift (CLS) measures the visual stability of your webpage. It tracks how much visible content unexpectedly shifts position while the page is loading. If you’ve ever tried to click a button that suddenly moved because an image or ad loaded over it—then you’ve experienced a 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
• Poor: CLS above 0.25 — significant unexpected movement

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

Common causes of CLS in online stores

• Images without dimensions: If images do not have width/height attributes in the HTML, the browser does not reserve space, and the content below the image shifts when the image loads.
• Dynamic content: Banners, ads, or product recommendations that load after the page’s initial rendering and push content down.
• Web fonts: Fonts that load late and are a different size than the fallback font (FOUT—Flash of Unstyled Text) can shift content.
• Cookies/consent banners: Cookie consent banners that appear after the page loads and push content down.
• Lazy-loaded content: Elements that are lazy-loaded without having space reserved for them.

How to Improve CLS

• Set dimensions for images: Always specify the width and height of 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 it with `preload` for the optimal balance.
• Place cookie banners as overlays: Use `position:fixed` so they don’t push page content out of view.
• Prefetch important resources: Use `<link rel="preload">` for critical fonts, images, and CSS.

CLS and Shoporama

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

Measurement tools

• Google PageSpeed Insights: Displays CLS for both mobile and desktop, highlighting specific elements that contribute to shifts.
• Chrome DevTools (Lighthouse): Run a Lighthouse audit to view 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: Displays CLS and other Core Web Vitals in real time while you browse.