⚡ CLS · Layout Stability

Layout Shift Finder

CLS killing your score? This scanner reads your page’s HTML and CSS and points at the exact culprits — images without dimensions, font swaps without fallback metrics, unreserved ad slots and JS-injected headers — with copy-paste fixes.

How does the Layout Shift Finder work?

It fetches your page’s HTML plus up to 6 stylesheets (same-origin and cross-origin CDNs) in your browser and runs a source-level audit for every known CLS cause: missing image dimensions, iframes without size, web-font loading strategy, @font-face without font-display, empty JS-injected placeholders with no reserved min-height, and CSS animations that physically move layout.

  1. Enter a URL — the homepage or any page that scores badly on CLS.
  2. Read the culprit list — each finding names the elements involved.
  3. Apply the CSS fixes — dimensions, min-height guards, font fallback metrics.
  4. Measure the real number with the Core Web Vitals Checker.
  5. Repeat until CLS ≤ 0.1 — Google’s “good” threshold.

What causes Cumulative Layout Shift?

Five things cause almost all CLS: images and iframes without width/height, web fonts swapping in at a different size, ads or embeds injected without reserved space, JS-built headers and widgets pushing content down, and CSS animations that move layout properties. Each has a one-line CSS fix shown below.

CLS causeThe fix
Images without dimensionsAdd width + height attributes (or CSS aspect-ratio)
Font swap resizing textdisplay=optional, or swap + size-adjust fallback (local("Roboto") first — Android has no Arial)
JS-injected header/footerReserve exact space: #site-header{min-height:65px} — measure, don’t guess
Ad slots / embedsmin-height on the slot container matching the ad size
Animations moving layoutAnimate transform/opacity only — never left/top/width/margin

Frequently asked questions

0.1 or less is Google’s “good” threshold, 0.1–0.25 needs improvement, and above 0.25 is poor. CLS is measured across the whole page lifetime, so even a late-loading widget can ruin an otherwise perfect page.
Mobile is a single narrow column, so one shifting element pushes everything below it — the same 8px header jump that’s harmless on desktop can score 0.15+ on mobile. Media-query values (like a header’s mobile height) also differ and are easy to get wrong.
When the web font finishes loading it replaces the fallback font; if their letter sizes differ, every paragraph reflows. Fix it with font-display:optional (the swap never happens) or a size-adjust fallback @font-face so both fonts occupy identical space.
No — it’s a source-level scanner that finds the causes. For the measured number, run the Core Web Vitals Checker (same Google Lighthouse engine as PageSpeed Insights); use both together: measure, find, fix, re-measure.
Yes — reserve the exact final height in CSS before the JS runs (e.g. min-height on the placeholder). Measure the rendered element including borders; a guessed value that’s off by a few pixels still shifts the page.
Yes — free, no login. Your URL is fetched via public CORS services directly from your browser and nothing is stored.

More creator tools