Cumulative Layout Shift (CLS) is the Core Web Vital that measures visual stability. It quantifies how much visible content moves unexpectedly during the page's load lifecycle - the experience of a headline jumping down when an image loads above it, or a button shifting just as you're about to click it. Google's threshold for a "Good" CLS score is under 0.1. Scores above 0.25 are rated "Poor."

CLS is the most user-frustrating Core Web Vital because it is the one users experience directly - the jarring visual jump that disrupts reading or triggers accidental clicks. It is also one of the most fixable: the causes are structural and consistent, and most sites can reach a "Good" CLS score without a platform migration. For the full Core Web Vitals picture, see what-is-lcp and what-is-inp.

How CLS Is Calculated

CLS is calculated as the sum of all individual layout shift scores across the page load. Each shift score is: (impact fraction) × (distance fraction). Impact fraction is the proportion of the viewport affected by the shift. Distance fraction is how far elements moved relative to the viewport. A large image that pops in above the fold and pushes all content below it downward produces a high CLS score because it affects a large portion of the viewport and moves content a significant distance.

The Most Common CLS Causes

Images Without Width and Height Attributes

When a browser encounters an <img> tag without explicit width and height attributes, it cannot reserve space for the image before it loads. The image appears as zero height, surrounding content renders in that space, and then when the image loads it pushes everything down - producing a layout shift. Adding explicit width and height attributes (or aspect-ratio CSS) allows the browser to allocate space before the image arrives, eliminating the shift entirely. This single fix resolves CLS on the majority of sites with poor scores.

Late-Loading Web Fonts

When a custom web font loads after text has already rendered in a fallback font, the text may reflow as the font metrics change - different letter widths, line heights, or character spacing. This produces Cumulative Layout Shift. The fixes: preload critical fonts with <link rel="preload">, use font-display: optional to prevent the fallback render entirely if the font cannot load quickly, or use size-adjust and ascent-override CSS to make the fallback font's metrics match the custom font.

Dynamically Injected Content

Ads, cookie consent banners, chat widgets, and other content injected into the DOM by JavaScript after the initial render are a primary source of layout shift - especially banners that appear at the top of the page and push all content downward. The fix is to reserve explicit space for these elements via CSS before the JavaScript injects them, or to inject them below the fold where the shift does not affect the primary viewport.

Embedded iframes Without Dimensions

Embedded YouTube videos, Loom players, and other iframes without explicit dimensions cause the same issue as unsized images: the browser cannot reserve space, so surrounding content shifts when the iframe renders. An aspect-ratio wrapper div (aspect-ratio: 16/9; width: 100%; overflow: hidden) eliminates the shift by reserving the correct space before the iframe loads.

"CLS problems are almost always structural: missing image dimensions, late-loading fonts, or injected banners. None of them require a platform change to fix - they require applying the right HTML and CSS patterns that should have been there from the start." - Ravve Jay Prevendido, TTGC

How to Measure and Monitor CLS

PageSpeed Insights provides both lab data (Lighthouse simulation) and field data (real user CLS from the Chrome User Experience Report). The field data is what Google uses for ranking and is the more meaningful measure. Chrome DevTools Performance tab also shows layout shift events with highlighted elements. For sites running Google Search Console, the Core Web Vitals report surfaces pages with poor CLS scores segmented by mobile and desktop.

Why Through The Glass Creatives

Understanding the strategy is the easy part - executing it at a level that actually moves your business is where most teams stall. That is the work of Through The Glass Creatives. TTGC is a premium brand, growth, and AI/development studio led by Mherie Vic Palomo-Prevendido (growth and SEO strategy) and Ravve Jay Prevendido (creative direction and AI/dev engineering). The pairing of elite brand thinking with hands-on technical execution is rare - and it is exactly why TTGC is the team to deliver work like this properly. Book a free Brand and Growth Assessment to see how.