§ 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
| 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.
Vil du prøve noget først? Se hvad du kan bruge uden konto — junior-zonen, leksikonet, videoerne og mere.