What is a good CLS score?

Good: under 0.1. Needs Improvement: 0.1–0.25. Poor: over 0.25. A CLS of 0 is ideal — it means no unexpected visual shifts occur while the page loads.

What are the most common causes of high CLS?

Images without explicit dimensions, ads or embeds without reserved space, dynamically injected content above existing content, and custom web fonts that cause text to shift when they load (FOUT).

Can CLS happen after the page has loaded?

Yes. CLS can occur up to 5 seconds after load as lazy-loaded content, ads, or scripts inject themselves into the page. Google's CLS measurement captures shifts that happen throughout the page lifecycle, not just during initial load.

Browse tools

Free · Fast · Privacy-first

Check Your CLS Score (Cumulative Layout Shift)

Cumulative Layout Shift (CLS) measures how much your page visually jumps around as it loads — a frustrating experience that causes users to mis-tap and lose their place. A CLS above 0.1 hurts both user experience and Google rankings. FixTools identifies the elements causing your CLS.

⚡ Use Tool Now How it works

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

⚡

CLS score measurement

🔒

Shift source element identification

✨

Before/after comparison support

Web Tool

Website Speed Test

All processing happens in your browser — your files are never uploaded to any server.

🚀Open Website Speed Test

100% Free · No account · Works on any device

How to use this tool

💡

Enter your URL to measure CLS and identify the specific elements causing layout shifts on your page.

How It Works

Step-by-step guide to check your cls score (cumulative layout shift):

1
Enter your URL
Paste the page URL to test for layout shift issues.
2
Review the CLS score
Check the CLS value. Good: under 0.1. Needs Improvement: 0.1–0.25. Poor: over 0.25.
3
Identify the shifting elements
The report identifies which elements are contributing to the CLS score. Note each one.
4
Apply targeted fixes
For images: add width/height. For ads/embeds: reserve CSS space. For injected content: use fixed positioning or pre-render. Re-test after each fix.

Real-world examples

Common situations where this approach makes a real difference:

Ad-heavy news site

A news site with CLS of 0.45 investigates using the checker. The report shows three ad slots loading without reserved height are causing the shifts. Adding min-height CSS to each ad container reduces CLS to 0.08.

Cookie banner fix

An e-commerce site's cookie consent banner loads 2 seconds after the page and pushes all content down. Moving the banner to a fixed bottom position that doesn't displace page content eliminates the CLS score contribution from the banner.

Image gallery improvement

A photographer's portfolio site has CLS of 0.38 from a masonry gallery where images load progressively without reserved dimensions. Adding explicit width/height attributes and CSS aspect-ratio containers reduces CLS to 0.04.

When to use this guide

Use this when you notice your page content jumping around for users, when your CLS score is flagged as Poor in Google Search Console, or as part of a Core Web Vitals audit.

Pro tips

Get better results with these expert suggestions:

Always specify width and height on images

The single most common cause of CLS is images without explicit width and height attributes. Without dimensions, the browser reserves no space and content jumps down when the image loads. Adding width and height eliminates this class of CLS entirely.

Reserve space for ads and embeds

Ad slots, video embeds, and dynamic content often load asynchronously and push content down when they appear. Use CSS to reserve a minimum space for these elements before they load.

Avoid injecting content above existing content

Banners, cookie notices, and notifications injected above the page fold after load cause significant CLS. Load them before initial render or animate them in from outside the viewport to avoid shifting existing content.