Calculator Inputs
Enter viewport dimensions and shift events. Each event score equals impact fraction × distance fraction. Leave empty rows blank.
Example Data Table
This sample shows how event scores and session windows work. The highest window total becomes the final CLS.
| Label | Time (s) | Impact Fraction | Distance Fraction | Shift Score | Session Window |
|---|---|---|---|---|---|
| Hero Image Resize | 0.10 | 0.25 | 0.20 | 0.0500 | Window 1 |
| Banner Injection | 0.65 | 0.30 | 0.15 | 0.0450 | Window 1 |
| Font Swap | 1.25 | 0.10 | 0.20 | 0.0200 | Window 1 |
| Sticky Promo Bar | 3.00 | 0.12 | 0.10 | 0.0120 | Window 2 |
| Late Ad Slot | 3.60 | 0.18 | 0.15 | 0.0270 | Window 2 |
| Window 1 Total = 0.1150, Window 2 Total = 0.0390, Final CLS = 0.1150. | |||||
Formula Used
Shift Score = Impact Fraction × Distance Fraction
Consecutive layout shifts belong to one window when each new shift starts within 1 second of the previous shift and the full window stays within 5 seconds.
CLS = Highest sum of Shift Scores found in any valid session window
Impact fraction represents how much viewport area is affected. Distance fraction represents how far unstable elements move relative to the viewport. Multiplying them gives the score for one shift event.
Modern CLS reporting uses the largest session window total, not a lifetime sum of every shift. This avoids unfairly penalizing long pages with unrelated movements far apart in time.
How to Use This Calculator
- Enter the viewport width and height used in your test or audit.
- Add each observed layout shift with a label, time, impact fraction, and distance fraction.
- Leave “Count in CLS” checked for shifts that should contribute to the score.
- Uncheck rows caused by recent user input or intentional non-scoring actions.
- Click Calculate CLS to see the score, quality band, event table, and session windows.
- Use the Plotly graph and exports to document findings for SEO, UX, or performance reviews.
Frequently Asked Questions
1. What is a good cumulative layout shift score?
A good CLS score is 0.10 or lower. Scores above 0.10 and up to 0.25 need improvement. Scores above 0.25 are poor and usually signal visible layout instability.
2. Why does this calculator use session windows?
Current CLS evaluation groups nearby shifts into short session windows. The final score is the highest window total, which better reflects how users perceive bursts of instability.
3. What is impact fraction?
Impact fraction measures how much of the viewport is affected by unstable elements during a shift. Larger affected areas create larger event scores when movement also occurs.
4. What is distance fraction?
Distance fraction measures how far unstable elements move relative to the viewport. A small movement across a huge area and a large movement across a small area can both matter.
5. Should I exclude user-triggered shifts?
Yes. Layout shifts that happen shortly after expected user input are not counted in CLS reporting. Use the checkbox to exclude those events from the final score.
6. What usually causes high CLS?
Common causes include images without reserved space, ad slots that expand late, injected banners, web font swaps, dynamic embeds, and sticky elements appearing without placeholders.
7. Can this calculator help SEO work?
Yes. CLS is part of page experience and performance analysis. This calculator helps quantify instability, document issues, and explain optimization priorities for audits and reporting.
8. How can I reduce CLS on real pages?
Reserve space for images, ads, iframes, and embeds. Avoid inserting content above existing elements. Use predictable font loading and keep dynamic modules from changing layout unexpectedly.