CLS Checker & Learning Tool
See how the Cumulative Layout Shift score is calculated and run through a best-practice checklist.
Visual Instability Simulator
Article Headline
This content shifts down when the element above "loads" without reserved space.
Layout shifts cause accidental clicks and a poor user experience.
Heuristic Audit
Complete the audit to see your stability score.
Cumulative Layout Shift (CLS) is the Core Web Vital that measures unexpected movement of content while a page loads. This tool helps you understand and reduce it: enter the two factors that make up a shift to see the resulting score, watch a live demonstration of an element shifting late, and work through a checklist of the common causes. It's an educational and planning aid — read the note below on what it can and can't tell you.
How the score is built
Each layout shift is scored as impact fraction × distance fraction. The impact fraction is how much of the visible screen the moving content covers; the distance fraction is how far it travels, as a share of the viewport. Enter both and the tool multiplies them to a score with three decimals. Google's widely-cited thresholds are good ≤ 0.1, needs improvement ≤ 0.25, and poor above that — so a small element moving a short way scores well, while a large banner jumping down the page scores badly.
What this tool is (and isn't)
This is a calculator and checklist for understanding CLS, not a measurement of your live site. It cannot see your pages, so it won't return your real CLS — that comes from field data (the Chrome User Experience Report, or a real-user monitoring tool) and from lab tools like Lighthouse or PageSpeed Insights. Use this to learn the formula, sanity-check a single hypothetical shift, and tick off the usual fixes: set width and height on images and video, reserve space for ads and embeds, avoid inserting content above existing content, and preload fonts to prevent late reflow.
Frequently Asked Questions
Does this measure my website's real CLS?
No. It cannot access your pages. It calculates a single shift from the impact and distance values you enter and teaches the concept. For your real CLS, use PageSpeed Insights, Lighthouse, or Search Console's Core Web Vitals report.
What counts as a good CLS score?
Google's thresholds are 0.1 or below for "good", up to 0.25 for "needs improvement", and above 0.25 for "poor". CLS is the sum of all unexpected shifts during the page's life, not a single one.
What are impact and distance fractions?
Impact fraction is the proportion of the viewport affected by the moving element; distance fraction is how far it moved relative to the viewport. Their product is that shift's score.
What are the most common causes of layout shift?
Images and videos without width/height, ads and embeds with no reserved space, content injected above existing content, and web fonts that reflow text when they load. The checklist covers each.