§ 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
| 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) |
Gyldighed og kilde
- Source
- 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.
Worked example
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
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.
Want to try something first? See what you can use without an account — the junior zone, the encyclopedia, the videos and more.