Cumulative Layout Shift Calculator

Calculate CLS from impact and distance fractions for each shifting element.

About Cumulative Layout Shift Calculator

Each shift contributes the product of how much of the screen moved and how far. Reserving space for images and ads eliminates most shifts entirely, since the impact fraction becomes zero. CLS is the easiest Core Web Vital to fix because setting explicit dimensions on media removes the shift rather than merely speeding it up.

Formula

Cumulative Layout Shift

Layout shift score = impact fraction × distance fraction, summed across shifts

impact fraction: Share of the viewport affected by the shift
distance fraction: How far elements moved, as a share of viewport dimension

Worked example

With the default values below, Cumulative Layout Shift Calculator returns Cumulative Layout Shift of 0.06500. Change any input above and every figure here is recalculated in your browser.

Inputs used

Impact fraction of shift 1accepts 0–1: 0.15
Distance fraction of shift 1accepts 0–1: 0.1
Impact fraction of shift 2accepts 0–1: 0.25
Distance fraction of shift 2accepts 0–1: 0.2

Results

Cumulative Layout Shift: 0.06500
Score of Shift 1: 0.01500
Score of Shift 2: 0.05000
Rating: Good
Reduction Needed to Reach Good: 0.00000

Step by step

1Values used
2Cumulative Layout Shift
3Cumulative Layout Shift= 0.06500
4Score of Shift 1= 0.01500
5Score of Shift 2= 0.05000
6Rating= Good
7Reduction Needed to Reach Good= 0.00000

Assumptions and limits

The result is derived only from the 4 inputs listed above. Anything not among them is not part of the calculation.
In particular, this calculator does not take inflation, tax, fees or charges or compounding frequency into account.
Figures are rounded for display to 5 decimal places, so totals built from several rounded parts can differ slightly from the unrounded arithmetic.

How these calculators are built and tested is described on the Methodology page. If a figure looks wrong, please report it.

Frequently Asked Questions

How is Cumulative Layout Shift calculated?

Layout shift score = impact fraction × distance fraction, summed across shifts Each shift contributes the product of how much of the screen moved and how far. Reserving space for images and ads eliminates most shifts entirely, since the impact fraction becomes zero.

Why does Cumulative Layout Shift matter?

CLS is the easiest Core Web Vital to fix because setting explicit dimensions on media removes the shift rather than merely speeding it up.

What values do I need to enter?

This calculator takes 4 inputs: Impact fraction of shift 1, Distance fraction of shift 1, Impact fraction of shift 2, Distance fraction of shift 2. The pre-filled defaults are a realistic starting point — replace them with figures from your own environment for a result you can act on.