§ 05

CLS — den Wert einer Layoutverschiebung berechnen

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

Antwort: 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

Symbole und Einheiten in der Formel
Symbol	Bedeutung	Einheit
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)

Gültigkeit und Quelle

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

Gilt nicht, wenn

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.

Rechenbeispiel

Die eigenen Standardwerte des Rechners sind eingesetzt. Die Zahlen sind mit genau der Formel berechnet, die das Werkzeug verwendet.

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

Geber

Layout-skiftets score0,0203
Impact fraction (andel af skærmen påvirket)0,326
Distance fraction (flytning som andel af skærmen)0,063

Nur für Mitglieder

Der Rechner selbst ist gesperrt

Lege einen kostenlosen Zugang an, um alle Artikel, Rechner, Vorlagen und das Sortiment freizuschalten — und Zugriff auf Quizze und Klassen zu erhalten. Es dauert unter einer Minute: Name, E-Mail und ein Passwort. Keine Zahlungskarte.

Kostenlosen Benutzer erstellen →Anmelden

Willst du zuerst etwas ausprobieren? Sieh, was du ohne Konto nutzen kannst — der Junior-Bereich, das Lexikon, die Videos und mehr.

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.

Schritt für Schritt

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.

Typische Fehler

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.

Beispiele aus dem Alltag

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

Es bedeutet: É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

Es bedeutet: 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

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

Faustregel

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

So überprüfst du die Antwort

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