Cumulative Layout Shift (CLS) calculator
Enter the times and scores of the layout shifts on a page — from the Performance panel or a web-vitals log — and get the Cumulative Layout Shift as Core Web Vitals count it: the largest session window. Below, find the score of one shift from its impact and distance fractions.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Record the layout shifts: in Chrome DevTools, the Performance panel lists them with their times and scores; the web-vitals library or a PerformanceObserver on layout-shift entries gives the same data.
- Enter the times in seconds and the scores in the same order, separated by commas or spaces.
- Read the CLS, its rating and which window produced it.
- Optionally enter the impact and distance fractions of one shift to see its score.
How it works
The shifts are sorted by time and walked through in order:
- a shift less than 1 s after the previous one and less than 5 s after the start of the current window is added to it;
- any other shift opens a new window.
CLS = the largest window sum. One shift’s score is impact fraction × distance fraction.
Worked example
Shifts at 0.4, 0.9, 1.5, 4.2 and 4.6 s with scores 0.05, 0.02, 0.01, 0.12 and 0.03:
- 0.4 → 0.9 → 1.5 s: gaps of 0.5 and 0.6 s, one window: 0.05 + 0.02 + 0.01 = 0.08;
- 4.2 s comes 2.7 s after the last shift, so it opens a second window with 4.6 s: 0.12 + 0.03 = 0.15;
- CLS = 0.15 (window 4.2 – 4.6 s) — needs improvement, although all shifts together add up to 0.23.
A banner covering 50 % of the viewport that pushes content down by 25 % of it scores 0.5 × 0.25 = 0.125 on its own.
Tips
- Reserve space for images, ads and embeds with width and height attributes or aspect-ratio, so nothing moves when they load.
- Avoid inserting content above what the user is reading, such as late banners; overlay them or reserve their space.
- Animate with transform, not top, left, width or height: transforms do not cause layout shifts.
Frequently asked questions
How is CLS calculated?
Layout shifts are grouped into session windows. A shift joins the current window if it happens less than 1 second after the previous shift and less than 5 seconds after the window's first shift; otherwise it starts a new window. Each window's score is the sum of its shifts, and CLS is the score of the largest window — not the sum of the whole page visit.
What is a good CLS score?
Core Web Vitals call 0.1 or less good, above 0.1 up to 0.25 needs improvement, and above 0.25 poor. Google assesses the 75th percentile of page visits, so most of your users should see 0.1 or less.
How is the score of one layout shift found?
Score = impact fraction × distance fraction. The impact fraction is the share of the viewport covered by the moving elements in their old and new positions together; the distance fraction is the largest distance any of them moved, divided by the viewport's width or height, whichever is larger. A block covering 50 % that moves by 25 % scores 0.5 × 0.25 = 0.125.
Do shifts after a click count?
No. Shifts within 500 ms of a tap, click or key press are expected and are flagged by the browser (hadRecentInput), so they are left out of CLS. Do not list them here.