CLS Calculator
Compose a layout shift — impact fraction times distance fraction, summed across the worst session window, judged at the 0.1 line.
CLS Calculator
Results recalculate instantly on every keystroke. Nothing you type is transmitted.
What this result does not account for
- Models one uniform shift repeated in one window
- Real pages mix shifts — measure per window in RUM
In short: One shift of 40% of the viewport moving 20% of the viewport scores 0.080000 — good, 0.020000 under the 0.1 line. CLS is composition, not luck: impact (how much of the screen moved) times distance (how far it moved). The final grade is the WORST five-second session window, not the lifetime sum — many small shakes far apart in time are forgiven; one concentrated jolt is not.
Formula
shift = impact × distance · CLS = max window Σ shifts
Each layout shift scores impact fraction (viewport share disturbed) times distance fraction (how far things traveled relative to the viewport's largest dimension). Since 2021 the reported CLS is not the lifetime sum: shifts group into session windows — together if under 1 second apart, capped at 5 seconds — and the largest window's sum is the grade. Shifts within 500 ms of a user's own input are excluded entirely: accordions and menus are the user's doing, not the page's.
Worked Example
- Enter the impact and distance fractions of a shift.
- Count how many land in the worst window.
- Read the window sum and its band.
Defaults: 40% × 20% × 1 shift → 0.080000, good. Drive the shifts to 3 and the window sums to 0.240000 — needs improvement, one banner away from the poor line.
Strengths & Limits Of This Model
Where this engine is strong
- Composition arithmetic shown, not just the score
- Session-window doctrine carried in the note
Where it stops
- No per-shift timeline — one shift shape at a time
Practical Use Cases
Ad slot audits
the classic injected-banner cost
Design gates
reserve space before shipping
Font-swap checks
price the reflow honestly
Methodology & Editorial Standards
Computation runs in IEEE-754 double precision at full internal precision; rounding to two decimal places occurs strictly at the display layer, so no cumulative drift enters the result. All monetary outputs use accounting presentation — grouped thousands, two decimals, negatives in parentheses — so figures can be transcribed directly into a model or working paper. Division-by-zero and out-of-domain inputs return an em-dash rather than a misleading number.
This engine was reconciled against an independent reference implementation and hand-verified for the worked example above before release. Our full five-stage review process is published on the About Us page.
Disclaimer. This calculator is provided for informational and modelling purposes only and does not constitute financial, tax, legal, medical, or engineering advice. Verify all figures with a qualified professional before acting on them.
CLS Calculator — 8 Expert FAQs
8 analyst-written answers to the questions practitioners actually ask — optimised for voice and answer-engine retrieval.
How is a single layout shift scored?
Impact fraction times distance fraction. Half the viewport shifting down by a quarter of the viewport scores 0.5 × 0.25 = 0.125. The score is unitless and can exceed 1 in pathological cases; the thresholds judge it at 0.1 good and 0.25 poor.
Why the worst window instead of the total?
Since 2021, CLS groups shifts into session windows — shifts under 1 second apart stay together, a window caps at 5 seconds — and reports the largest window's sum. Long-lived pages and infinite scrollers were unfairly punished by the lifetime sum; the worst burst is the honest story of how jarring a visit gets.
Do user-initiated shifts count?
No — shifts within 500 milliseconds of a real input are excluded. Accordion opens, menu drops and search suggesters are the user's own doing. The exclusion is why the 500 ms rule makes responsive UI free and sluggish UI doubly costly.
What causes most CLS failures?
Images and ads without reserved dimensions, banners and cookie notices injected above existing content, late-loading fonts that reflow text, and DOM nodes resized by late CSS. All four are fixed the same way: decide the space before the content arrives.
What is the distance fraction measured against?
The viewport's largest dimension. A 40-pixel shove is nothing on a 2,160-pixel display and a jolt on a phone — the fraction makes the score honest across screens, which is why two devices can see the same banner and report different CLS.
How many shifts fit in one window?
As many as occur within 5 seconds with gaps under 1 second. A carousel of injected ads one after another piles into a single window and multiplies the score; the same shifts spread across a minute of reading would each get their own small window and the worst one alone would grade.
How do I keep CLS under 0.1?
Set width and height (or aspect-ratio) on every image and video, reserve fixed slots for ads and embeds, never inject content above existing content, preload fonts with size-adjust fallbacks, and keep transform-based animations (they do not trigger layout shifts at all).
How is this different from the Core Web Vitals page?
That page grades the triad once you have field numbers; this page builds a single shift from its fractions and prices the session window — the mental model that tells you WHY a banner above the fold costs more than three reflows below it.