Hvad er en god CLS-score?

Google anbefaler CLS under 0,1 for at blive vurderet som 'god'. Mellem 0,1 og 0,25 er 'skal forbedres'. Over 0,25 er 'dårlig'. CLS er unitless — det er et produkt af skiftets størrelse (andel af viewport) ganget med afstanden elementet flyttes (andel af viewport).

Påvirker CLS kun den første sideindlæsning?

Nej — CLS måler layout-skift i hele sessionen, ikke kun under indlæsning. Skift der sker 500 ms efter brugerinteraktion tæller ikke med (de anses som forventede reaktioner på brugerinput). Men skift der sker sent i indlæsningen — fx når reklamer loader eller dynamisk indhold indsættes — tæller fuldt ud.

Er layout-skift fra animations CLS?

Det afhænger af animationen. CSS transform og opacity-animationer udløser ikke CLS — de bruger GPU-laget og rykker ikke det umiddelbare dokument-layout. Animationer der ændrer width, height, top, left eller margin kan derimod udløse CLS.

Hvad er impact fraction og distance fraction i CLS-beregningen?

CLS beregnes som produktet af impact fraction og distance fraction. Impact fraction er andelen af viewport det ustabile element optager (inklusive sin startposition og slutposition). Distance fraction er den maksimale afstand elementet bevæger sig, divideret med viewportens størrelse. Et element der fylder 50% af viewporten og bevæger sig 25% nedad giver 0,50 × 0,25 = 0,125 i CLS-bidrag.

Hvordan finder jeg præcist hvilke elementer der forårsager min høje CLS?

Chrome DevTools Performance-tab: optag en sideindlæsning og kig efter lilla Layout Shift-events i tidslinjen. Klik på et event for at se det eksakte element og dets CLS-bidrag. Web Vitals Chrome-extension viser CLS-bidrag live med farvemarkering på siden. PageSpeed Insights og Lighthouse rapporterer CLS men identificerer ikke altid det specifikke element — Chrome DevTools er mere præcis til diagnostik.

Artikel

CLS-problemer — Årsager til Cumulative Layout Shift og løsninger

CLS måler utilsigtede layoutskift mens siden loader. Billeder uden dimensioner, late-loading fonts og dynamisk indsat indhold er de hyppigste årsager.

Sidst opdateret: 26. marts 2026

CLS (Cumulative Layout Shift) måler utilsigtede bevægelser af synlige elementer mens siden loader og brugeren interagerer. En score over 0,1 indikerer at elementer rykker sig på en måde der forstyrrer brugeroplevelsen. Det er den Core Web Vital der oftest overses — og som kan løses med relativt simple kodefixes.

Hvad udløser CLS

Layout-skift sker når et element ændrer position uden at brugerens handling er årsagen. Browseren beregner CLS som produktet af skiftets størrelse (andel af viewport) ganget med skiftets afstand (andel af viewport). Et stort element der rykker sig lidt giver høj CLS. Et lille element der rykker sig langt giver ligeledes høj CLS.

Problem 1 — Billeder og videoer uden dimensioner

Den hyppigste årsag til CLS. Når browseren ikke kender et billedes dimensioner inden download, reserverer den ingen plads. Når billedet loader, presser det alt under sig nedad.

Løsningen er simpel: altid sæt width og height på <img>-tags.

<!-- Forkert — ingen dimensioner -->
<img src="billede.jpg" alt="beskrivelse">

<!-- Korrekt — browser reserverer pladsen -->
<img src="billede.jpg" alt="beskrivelse" width="1200" height="800">

Moderne responsive CSS bevarer aspect ratio automatisk:

img {
  max-width: 100%;
  height: auto;
}

Med height: auto og width/height-attributter beregner browseren aspect ratio og reserverer korrekt plads — selv på responsivt layout.

Problem 2 — Web fonts og FOUT/FOIT

Web fonts der loades sent medfører to problemer.

FOUT (Flash of Unstyled Text)

Tekst vises i fallback-font og skifter til web font når den loader. Skiftet kan ændre tekstens størrelse og flytte efterfølgende indhold. Løsningen er font-display: optional eller font-display: swap i CSS.

FOIT (Flash of Invisible Text)

Tekst er usynlig til web font er loaded og kan give CLS hvis layout justeres når tekst pludselig vises. Preload kritiske fonts i <head> for at undgå problemet:

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

Brug desuden size-adjust i CSS til at tilpasse fallback-fontens dimensioner til web fontens — det reducerer det visuelle skift markant.

Problem 3 — Dynamisk indsat indhold

Indhold der indsættes over eksisterende layout — reklamer, cookie-bannere, newsletter-popups, chat-widgets — er en klassisk CLS-kilde.

Løsningen er at reservere pladsen i HTML/CSS inden indholdet loader — brug min-height på containeren. Indsæt derudover nye elementer i bunden af indholdet, ikke over eksisterende tekst, og undgå top-of-page bannere der indsættes dynamisk; brug statiske placeholders i stedet.

Problem 4 — Animationer der ændrer layout

CSS-animationer der ændrer top, left, margin, padding eller width/height udløser CLS. Brug i stedet transform: translate() — det er GPU-accelereret og påvirker ikke document flow:

/* Udløser CLS */
.element { transition: margin-top 0.3s; }

/* Udløser ikke CLS */
.element { transition: transform 0.3s; }

Identifikation med Chrome DevTools

I Chrome DevTools → Performance-tab kan du optage en sideindlæsning og se præcis hvilke elementer der skifter og hvornår. Layout Shift-events er markeret med lilla i tidslinjen og viser det beregnede CLS-bidrag.

Sidst opdateret: marts 2026. Denne artikel er en del af Stegger.dk’s SEO-ordbog. → Denne artikel er en del af Web Performance — Core Web Vitals og teknisk hastighed.

Del af: Web Performance — Core Web Vitals og teknisk hastighed →

Andre artikler i samme emne

Ofte stillede spørgsmål

Hvad er en god CLS-score?: Google anbefaler CLS under 0,1 for at blive vurderet som 'god'. Mellem 0,1 og 0,25 er 'skal forbedres'. Over 0,25 er 'dårlig'. CLS er unitless — det er et produkt af skiftets størrelse (andel af viewport) ganget med afstanden elementet flyttes (andel af viewport).
Påvirker CLS kun den første sideindlæsning?: Nej — CLS måler layout-skift i hele sessionen, ikke kun under indlæsning. Skift der sker 500 ms efter brugerinteraktion tæller ikke med (de anses som forventede reaktioner på brugerinput). Men skift der sker sent i indlæsningen — fx når reklamer loader eller dynamisk indhold indsættes — tæller fuldt ud.
Er layout-skift fra animations CLS?: Det afhænger af animationen. CSS transform og opacity-animationer udløser ikke CLS — de bruger GPU-laget og rykker ikke det umiddelbare dokument-layout. Animationer der ændrer width, height, top, left eller margin kan derimod udløse CLS.
Hvad er impact fraction og distance fraction i CLS-beregningen?: CLS beregnes som produktet af impact fraction og distance fraction. Impact fraction er andelen af viewport det ustabile element optager (inklusive sin startposition og slutposition). Distance fraction er den maksimale afstand elementet bevæger sig, divideret med viewportens størrelse. Et element der fylder 50% af viewporten og bevæger sig 25% nedad giver 0,50 × 0,25 = 0,125 i CLS-bidrag.
Hvordan finder jeg præcist hvilke elementer der forårsager min høje CLS?: Chrome DevTools Performance-tab: optag en sideindlæsning og kig efter lilla Layout Shift-events i tidslinjen. Klik på et event for at se det eksakte element og dets CLS-bidrag. Web Vitals Chrome-extension viser CLS-bidrag live med farvemarkering på siden. PageSpeed Insights og Lighthouse rapporterer CLS men identificerer ikke altid det specifikke element — Chrome DevTools er mere præcis til diagnostik.

Placering i ordbogen

Kode — Webkode og teknisk SEO

Web Performance — Core Web Vitals og teknisk hastighed

CLS-problemer — Årsager til Cumulative Layout Shift og løsninger

CLS-problemer — Årsager til Cumulative Layout Shift og løsninger

Hvad udløser CLS

Problem 1 — Billeder og videoer uden dimensioner

Problem 2 — Web fonts og FOUT/FOIT

FOUT (Flash of Unstyled Text)

FOIT (Flash of Invisible Text)

Problem 3 — Dynamisk indsat indhold

Problem 4 — Animationer der ændrer layout

Identifikation med Chrome DevTools

Andre artikler i samme emne

Relaterede begreber

Ofte stillede spørgsmål

Placering i ordbogen