Skip to content
50% OFF $299 $599
Lock in
§ 6.0.11 ARTICLE
Published Threshold≤ 0.1 good Sources2 named Authored bySquareRank Team

Glossary · § 6.0.11 · Defined term

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is the sum of unexpected visible-element movement scores during the lifespan of a page1. It's a Core Web Vital. Google considers a page to have "good" CLS when the 75th-percentile real-user measurement is 0.1 or less. The metric is a unitless number; lower is better, and a perfect zero means nothing on the page moved unexpectedly during load or interaction.

CLS captures the experience of a user reading a page when an image suddenly loads above their cursor and pushes the text down, or when a late-loading font swap reflows the paragraph mid-sentence. It measures the user-facing pain of poorly-handled async loading.

Definition

Cumulative Layout Shift (CLS) is the sum of unexpected visible-element movement scores during the lifespan of a page. It's a Core Web Vital — Google considers a page to have 'good' CLS when the 75th-percentile real-user measurement is 0.1 or less.

The word "unexpected" matters. Movement caused by user interaction (clicking a button, opening an accordion) does not count as a layout shift — CLS only penalises movement that happens without an obvious user-initiated cause. Movement within 500 ms of an interaction is treated as user-caused and excluded from the score.

What causes layout shifts

Four common causes. (1) Images without width and height attributes — the browser doesn't know how much space to reserve, so when the image loads, text below jumps down. (2) Late-loading custom fonts — when the fallback font swaps to the custom font, line heights and widths change, reflowing the layout. (3) Dynamically injected content above already-visible content — banners, popups, ad units. (4) Animations that reposition layout (transform animations don't trigger CLS; top/left/width animations do).

The frequency ranking on a typical Squarespace site: image dimensions first, font-swap second, third-party widgets third, layout animations a distant fourth. The first two account for most CLS failures on the platform; the third only shows up for owners who have installed chat overlays, popup tools, or third-party galleries.

How CLS is scored

CLS is calculated as the largest 'session window' of layout shifts during page lifespan. A session window is a sequence of shifts separated by less than 1 second of stable layout. Each individual shift's score is the impact fraction (proportion of viewport affected) multiplied by the distance fraction (how far the largest element moved divided by viewport dimension).

The session-window approach (introduced June 2021) prevents long pages from accumulating arbitrarily bad CLS just by virtue of being long. Before the change, a page that shifted slightly every time the user scrolled past a new section accumulated a high CLS; now only the worst contiguous session counts. The current scoring is fairer to long pages but unforgiving of any single bad shift cluster.

CLS on Squarespace specifically

Squarespace handles the two main CLS causes reasonably well by default. Native image blocks include width/height attributes; the platform's font-loading strategy includes font-display: swap with reasonable fallbacks. Where CLS fails on Squarespace tends to be: gallery blocks during initial paint, third-party embeds (Instagram feeds, custom widgets), and Code-Injected scripts that inject content above the visible viewport.

The install pattern: audit per-page CLS in PageSpeed Insights, identify the shifting element, replace native-Squarespace galleries with Squarespace's lighter image blocks where possible, lazy-load Instagram feeds and other third-party embeds, avoid Code-Injecting any script that inserts DOM nodes above existing content. Most Squarespace 7.1 sites can hit "good" CLS with these four moves. The full install treatment lives at Squarespace CLS fix.

CLS is one Core Web Vital. Adjacent terms below.

Keep reading · § 6.0.11