Updated April 18, 2026

What causes high Cumulative Layout Shift (CLS)?

High CLS comes from elements rendering at unpredictable sizes — most often images and embeds without explicit width/height attributes, fonts loading after first paint and reflowing text, or late-injected elements (banners, ads, cookie notices) pushing content down. Set explicit dimensions on every visual element and reserve space for asynchronous content to keep CLS under 0.1.

https://
FreeNo signup~1 minute

The fix is almost always explicit dimensions

Modern browsers compute layout space from the width/height attributes on images and iframes. If those attributes are missing, the browser allocates 0 pixels until the resource loads, then reflows everything beneath when the actual size becomes known. Adding explicit dimensions to every image and embed eliminates this in one pass.

Font loading and FOUT

Web fonts that load asynchronously cause "Flash of Unstyled Text" — text renders in a fallback font, then reflows when the web font loads. Use font-display: optional or preload critical fonts to minimize this. The CLS impact is often invisible to humans but counts against your Core Web Vitals score.

Late-injected elements

Cookie consent banners, notification bars, and ads that inject after page load shift everything beneath them — sometimes catastrophically. Reserve fixed space for these elements (with min-height) so the layout doesn't move when they appear. Run PageSpeed and look at the "Avoid large layout shifts" diagnostic for specific elements to fix.

Go deeper

Related questions

Browse all questions →

See how your page scores

Free 8-dimension analysis. About a minute. No signup.

https://