tech

How to fix: Cumulative Layout Shift <=0.1

Why this matters

Cumulative Layout Shift measures unexpected layout shifts during page lifecycle — content jumping around as the page loads. <=0.1 is Good; >0.25 is Poor. Caused by images without dimensions, late-loading embeds, ads injecting after first paint.

Background

CLS measures unexpected layout shifts during page lifecycle — content jumping around as the page loads. Caused by images without dimensions, late-loading ads/embeds, banner injection. <=0.1 = Good; >0.25 = Poor.

References

web.dev/cls · Core Web Vitals (CLS)

How to fix

Code snippet for each stack we cover. Pick the one matching your server / framework.

nginx

No server config — markup change.

apache

Same.

cloudflare

Same.

wordpress

Add width+height to all <img> tags (most themes don't by default). Reserve space for ad slots + embeds (aspect-ratio CSS). Use `font-display: swap` with `size-adjust` for web fonts.

flask

Template audit: every <img>, <iframe>, <video> needs width+height attrs. CSS: use `aspect-ratio` for responsive embeds.

express

Same.

rails

image_tag accepts width: and height: — use them.

Verify it's working

https://pagespeed.web.dev/ — Mobile CLS should be <=0.1.

Want to know if your site has this issue?

Run a free 53-check audit — security, GDPR, NIS2, and technical SEO.

Audit my site →