CLS Score Calculator

Find out how visually stable your site really is and get an accurate score for Cumulative Layout Shift (CLS) — one of the core metrics in Google’s Core Web Vitals.

What Is CLS and Why It Matters

Cumulative Layout Shift measures the visual stability of a page while it loads. In plain terms, it’s a measure of how much elements “jump around” while a user is trying to interact with the page — tap a button, read some text, or start filling out a form.

Anyone who’s ever tapped the wrong thing because an ad or image suddenly loaded and pushed the content down has run into a high CLS. Google added this metric to Core Web Vitals because it has a direct impact on usability — and since 2021, CLS has also been factored into how pages rank in search results.

How CLS Is Calculated

CLS is calculated as the sum of every unexpected layout shift that occurs during a page’s lifespan. Each individual shift is scored using this formula:

Shift score = impact fraction × distance fraction

• Impact fraction — how much of the viewport was affected by elements that moved.
• Distance fraction — how far those elements moved, relative to the size of the viewport.

Our calculator takes these two values (or data pulled from a real measurement of your page) and automatically works out the final CLS score, so you don’t have to do the math by hand.

How to Use the Calculator

1. Enter the URL of the page you want to check, or input the shift parameters manually.
2. Click the calculate button.
3. Get your CLS score along with its rating — “Good,” “Needs Improvement,” or “Poor.”
4. If needed, review the breakdown of individual shifts to see which elements on the page are causing the issue.

How to Read the Results

Google recommends aiming for 75% of page visits to fall within the 0.1-or-lower threshold, across both mobile and desktop devices.

Common Causes of High CLS

• Images and videos without defined width and height attributes
• Ads, embedded widgets, and iframes with no reserved space
• Fonts that load late and cause a FOIT/FOUT effect
• Dynamically injected content (banners, pop-ups) inserted above already-rendered content
• Animations that use layout-triggering properties instead of transform

How to Reduce CLS

• Always set explicit dimensions for images and video, using attributes or aspect-ratio
• Reserve space for ad slots in advance with CSS
• Use font-display: optional or font preloading to avoid sudden text jumps
• Insert new content below the fold rather than on top of content the user is already viewing
• Use transform and opacity for animations instead of properties that trigger layout recalculation

Why You Should Check CLS Regularly

A CLS score can shift with every update to your site — a new banner, a redesigned product card, or an updated ad integration can quietly degrade layout stability. Checking it regularly with the calculator helps you catch regressions early and keep both your user experience and your search rankings intact.