Cumulative Layout Shift Test
The Cumulative Layout Shift Test measures every visible element movement during page load and produces a CLS score against Google's 0.1 "Good" threshold.
- Results in seconds
- Pass / fail + fix guidance
- No account required
The Cumulative Layout Shift Test measures every visible element movement during page load and produces a CLS score against Google's 0.1 "Good" threshold. CLS is the most preventable Core Web Vital — almost every cause is a missing width/height attribute on an image, a font swap that resizes text, or a banner injected after first paint. The report shows you exactly which elements shifted, by how much, and the fix per element.
What This Tool Checks
- Total CLS score during page load
- Per-element shift contribution
- Images causing shifts (missing width / height)
- Web fonts causing FOUT-related shifts
- Late-injected banners, ads or cookie notices
- Third-party scripts that mutate layout post-render
Why It Matters for SEO
CLS measures how much your page jumps around as it loads — the visible flicker that pushes users to mis-tap and lose their reading place. Google uses CLS as one of three Core Web Vitals ranking inputs; pages with CLS over 0.25 are demoted. CLS is also the cheapest metric to fix: most sites can get to "Good" by adding width / height to images and reserving space for ads / iframes — no architectural change required.
How to Fix It
Add width and height attributes (or CSS aspect-ratio) to every image, video and iframe. Reserve space for ads and dynamic embeds with min-height. Use font-display: optional or size-adjust for web fonts. Render cookie banners with a fixed reserved area or above the fold. Re-test until CLS < 0.1.
How It Works
Headless Chrome navigates the URL and uses the Layout Instability API to record every visible shift, weighted by area. We attribute each shift to the element responsible and compute the cumulative score. The report ranks elements by impact so you fix the largest contributors first.
Common Mistakes to Avoid
- Images without width / height attributes
- Web fonts loading without size-adjust or font-display: optional
- Cookie banner or newsletter modal injected after first paint
- Ads / iframes with no reserved size
- Carousels and tabs that change height when items load asynchronously
Quick Checklist
- CLS under 0.1
- Every image has width and height
- Ads and iframes have reserved space
- Web fonts use font-display: optional or size-adjust
- Cookie banners do not push content down after first paint
Put your whole site on autopilot — SEO and AI search
PositionMySite monitors every signal on this page across your entire website 24/7 — plus keyword rankings, competitor moves and AI-search readiness (llms.txt, schema, ChatGPT & Gemini visibility). When something breaks, you know before Google does.
Every feature unlocked · No commitment · Cancel anytimeFrequently Asked Questions
CLS sums every visible element movement during page load, weighted by area. A CLS of 0.1 means roughly 10% of the viewport area shifted; 0.25 means 25%. Lower is better.
Under 0.1 is "Good", 0.1-0.25 is "Needs Improvement", over 0.25 is "Poor". Pages above 0.25 are explicitly demoted in Google's page-experience signal.
Top causes: images without width/height attributes, web fonts that resize text after loading, late-injected banners or ads, and carousels that change height when content loads.
Always set width and height attributes on <img> tags. Modern browsers calculate aspect ratio from these and reserve the correct space, even when CSS scales the image responsively.
Yes. CLS is a direct ranking input under Google's Core Web Vitals. Sites with poor CLS rank measurably below sites with similar content but a better CLS score.