§ 05

CLS — oblicz wynik przesunięcia jednego układu

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

Odpowiedź: 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.

Wzór

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 i jednostki we wzorze
Symbol	Znaczenie	Jednostka
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)

Ważność i źródło

Źródło: web.dev — Cumulative Layout Shift (CLS), Core Web Vitals (Google)

Nie dotyczy, gdy

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.

Przykład obliczeniowy

Wstawiono domyślne wartości kalkulatora. Liczby obliczono dokładnie tym wzorem, którego używa narzędzie.

Wstawiono

Viewportens bredde1280 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

Dawca

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

Tylko dla członków

Sam kalkulator jest zablokowane

Utwórz bezpłatne konto, aby odblokować wszystkie artykuły, kalkulatory, szablony i asortyment — i uzyskać dostęp do quizów i klas. Zajmuje to poniżej minuty: imię, email i hasło. Żadna karta kredytowa.

Utwórz darmowe konto →Zaloguj się

Chcesz najpierw czegoś spróbować? Zobacz, czego możesz używać bez konta — strefa junior, leksykon, filmy i więcej.

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.

Krok za krokiem

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.

Typowe błędy

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.

Przykłady z codzienności

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

To znaczy: É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: 1280 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

To znaczy: 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: 1280 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

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

Reguła praktyczna

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

Jak sprawdzić odpowiedź

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