§ 05

CLS — beregn ét layout-skifts score

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

Svar: 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.

Formel

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

Symboler og enheder i formlen
Symbol	Betydning	Enhed
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)

Gyldighed og kilde

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

Gælder ikke når

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.

Regneeksempel

Beregnerens egne standardværdier sat ind. Tallene er regnet med præcis den formel værktøjet bruger.

Sat ind

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

Kun for medlemmer

Selve beregneren er låst

Opret en gratis bruger for at låse op for alle artikler, beregnere, skabeloner og sortiment — og få adgang til quizzer og klasser. Det tager under et minut: navn, email og en adgangskode. Intet betalingskort.

Opret gratis bruger →Log ind

Vil du prøve noget først? Se hvad du kan bruge uden konto — junior-zonen, leksikonet, videoerne og mere.

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.

Trin for trin

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.

Typiske fejl

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.

Eksempler fra hverdagen

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

Det betyder: É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

Det betyder: 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

Det betyder: Scoren er kun 0,0051. Den betyder lidt for CLS, så ret hero-billedet og bannerne først.

Tommelfingerregel

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

Sådan tjekker du svaret

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