§ 05

CLS — calculate the score of one layout shift

Hvor meget bidrager dette ene layout-hop til sidens CLS-score?

Answer: Cumulative Layout Shift (CLS) måler uventede layout-forskydninger, fx når et billede uden fast størrelse skubber indhold ned. Et enkelt skifts score er defineret af web.dev som impact fraction (hvor stor en andel af skærmen der påvirkes) ganget med distance fraction (hvor langt det bevæger sig, som andel af den største skærmdimension). Brug beregneren til at forstå, hvor meget ét bestemt element-hop vejer i den samlede CLS-score.

Formula

layout-skiftets score = impact fraction × distance fraction

impact fraction = påvirket areal ÷ (viewport-bredde × viewport-højde)

distance fraction = flytningsafstand ÷ største viewport-dimension

CLS-tærskler (web.dev): god ≤ 0,1, kan forbedres ≤ 0,25, dårlig > 0,25

Symbols and units in the formula
Symbol	Meaning	Unit
viewport_bredde_px	Viewportens bredde	px
viewport_hoejde_px	Viewportens højde	px
paavirket_areal_px2	Samlet synligt areal påvirket af hoppet (union før+efter)	px²
flytning_px	Hvor langt elementet flytter sig	px
=	Layout-skiftets score
=	Impact fraction (andel af skærmen påvirket)
=	Distance fraction (flytning som andel af skærmen)

Validity and source

Source: web.dev — Cumulative Layout Shift (CLS), Core Web Vitals (Google)

Does not apply when

Den samlede CLS for en side er summen af de enkelte skifts scores inden for en session-vindue — dette er én enkelt hændelses bidrag, ikke sidens fulde CLS.

Worked example

The calculator's own default values inserted. The figures are calculated with exactly the formula the tool uses.

Substituted

Viewportens bredde1,280 px
Viewportens højde720 px
Samlet synligt areal påvirket af hoppet (union før+efter)300,000 px²
Hvor langt elementet flytter sig80 px

Giver

Layout-skiftets score0.0203
Impact fraction (andel af skærmen påvirket)0.326
Distance fraction (flytning som andel af skærmen)0.063

Members only

The calculator itself is locked

Create a free user account to unlock all articles, calculators, templates and range — and get access to quizzes and classes. It takes less than a minute: name, email and a password. No payment card.

Create free user →Log in

Want to try something first? See what you can use without an account — the junior zone, the encyclopedia, the videos and more.

Sådan bruger du den

Når teksten hopper ned, mens siden indlæses, fordi et billede eller et banner skubber den, tæller det i CLS. Beregneren viser, hvor meget ét hop vejer, så du kan se, hvilke elementer der skal have reserveret plads først.

Step by step

Aflæs viewportens bredde og højde, fx 390 × 844 for en iPhone.
Skøn arealet af det, der flytter sig, før og efter hoppet tilsammen (unionen), i px².
Del arealet med viewportens areal. Det er impact fraction.
Del flytningen i px med viewportens største side. Det er distance fraction.
Gang de to tal. Det er hoppets score. Sidens CLS skal være højst 0,1.

Typical errors

At tage elementets areal kun før eller kun efter hoppet. Det er unionen af begge positioner inden for viewporten.
At dele flytningen med viewportens højde, når bredden er størst. Det er den største side, der tæller.
At tro at hop efter et klik tæller med. Skift inden for 500 ms efter brugerens input tælles ikke.

Examples from everyday life

Hero-billede uden højde på mobil

På en cafés hjemmeside indlæses et hero-billede uden width og height og skubber teksten 300 px ned på en iPhone. Tekstblokken fylder ca. 390 × 700 px før og efter tilsammen.

Viewportens bredde: 390 px
Viewportens højde: 844 px
Samlet synligt areal påvirket af hoppet (union før+efter): 273,000 px²
Hvor langt elementet flytter sig: 300 px

It means: Ét hop giver en score på 0.2948. Det er alene nok til en dårlig CLS (over 0,25). Giv billedet width og height eller aspect-ratio.

Cookiebanner der skubber alt ned

Et cookiebanner indsættes øverst på en desktop-side på 1280 × 720 og skubber hele indholdet 80 px ned.

Viewportens bredde: 1,280 px
Viewportens højde: 720 px
Samlet synligt areal påvirket af hoppet (union før+efter): 921,600 px²
Hvor langt elementet flytter sig: 80 px

It means: Hele skærmen påvirkes (impact 1), og scoren er 0.0625. Det er under 0,1, men to-tre sådanne hop sprænger grænsen. Læg banneret over indholdet i stedet.

Lille annonce i sidebaren

En annonce i sidebaren skubber et område på 300 × 400 px 50 px ned.

Viewportens bredde: 1,280 px
Viewportens højde: 720 px
Samlet synligt areal påvirket af hoppet (union før+efter): 120,000 px²
Hvor langt elementet flytter sig: 50 px

It means: Scoren er kun 0.0051. Den betyder lidt for CLS, så ret hero-billedet og bannerne først.

Rule of thumb

Et element der fylder hele skærmen og flytter 10 % af skærmens største side, giver 0,1, altså hele budgettet.

How to check the answer

Se Layout Shift-sporene i DevTools under Performance. Scoren for det enkelte skift skal ligge tæt på beregnerens tal.