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. 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