What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift quantifies visual stability, that is how often elements jump after the page has begun to render. In a commerce context, CLS is the metric that captures the frustration of mis-tapping a promo banner because a product tile shifted at the last moment. It is unitless, scored on the 75th percentile of real user sessions and part of the Core Web Vitals.

Definition

CLS sums the impact-fraction times the distance-fraction of every unexpected layout shift between page load and full unload, aggregated in session windows. A good score is below 0.1, poor is above 0.25. Typical triggers include images without width and height attributes, late-loading web fonts that cause text reflow, third-party banners loaded after first paint, A/B-test scripts injecting new DOM nodes and badges that arrive asynchronously from a personalization service. CLS is a runtime metric, so server-rendered HTML alone cannot solve it; the client behavior matters just as much.

Why it matters

Layout shifts erode trust and directly increase mis-clicks on add-to-cart and checkout CTAs. CLS is particularly damaging on PDPs where pricing, stock messaging and trust badges often arrive from separate services. As part of the page-experience signal, it influences search-engine-optimization-seo. For composable storefronts with heavy ab-testing and personalization, CLS exposes how disciplined the front-end is about reserving space for asynchronous content. It is also the easiest Vital to regress when teams move fast on conversion-rate-optimization-cro experiments.

Use cases

Teams using Next.js, Nuxt or Astro fix CLS by setting explicit width and height on images, declaring aspect-ratio CSS, preloading critical fonts and using font-display:optional to avoid late text reflow. Banner slots from a content-management-system-cms are rendered with placeholder boxes so personalized content drops into reserved space. Edge Rendering and ISR reduce variance by serving stable initial HTML, while client-side experiment frameworks are configured to mutate only inside containers with fixed dimensions. RUM dashboards segment CLS by template to catch regressions tied to new merchandising modules or hyperpersonalization rollouts.

Related

Explore Performance and Core Web Vitals · Composable Headless Frontend.