Fix CLS

Målet

At undgå at indhold flytter sig uventet under indlæsning og ved interaktion.

CLS er et af de mest “irriterende” performanceproblemer, fordi brugeren mister kontrollen: knapper flytter sig, tekst hopper, og siden føles uprofessionel. Fordelen er, at CLS ofte kan forbedres ret hurtigt, hvis du finder de rigtige kilder - ofte billeder uden dimensioner, embeds, dynamiske bannere eller fonts.

Denne guide supplerer blog: Fonts uden CLS (typografi) og lazy-load guiden (billeder der loader sent må stadig have reserveret plads).

Før du går i gang

• Brug Chrome og åbn DevTools → Performance - du skal kunne reproducere layout-skift (throttling og langsom 3G gør det tydeligere).
• Tag stilling til om CLS primært sker ved første load eller ved interaktion (cookie-banner, accordions) - løsningerne er forskellige.
• Tag backup af CSS/templates hvis du ændrer globale layout-regler.

Start med at finde de største shifts

Brug en konkret metode:

1. Kør siden i DevTools Performance.
2. Aktivér visualisering af layout shifts.
3. Notér hvilke elementer der flytter sig mest.

Typisk vil du finde:

• billeder uden dimensioner
• embeds/iframes uden fast højde
• dynamiske bannere/komponenter
• fontskift

Sådan går du i dybden

Listen ovenfor (trin-for-trin) er overskriften for arbejdet - herunder finder du detaljerne.

Kortlæg hvor shifts opstår

Det er vigtigt at arbejde med data, ikke gæt.

Se efter:

• om shifts sker i første load
• eller ved interaktion (fx accordion, tabs, cookie banner)

Trin 2: Reservér plads til media

For billeder/iframes:

• sæt width og height
• eller brug CSS aspect-ratio

Hvis pladsen er reserveret, undgår du “push down” når elementet loader.

Eksempel (HTML): reservér plads med width/height eller aspect-ratio:

<img src="/hero.webp" alt="" width="1200" height="630" decoding="async" fetchpriority="high" />

<iframe title="Kort" width="560" height="315" src="https://example.com/embed" loading="lazy"></iframe>

Page builders og komponentbiblioteker: tjek at billed- og embed-komponenter faktisk outputter dimensioner - ikke kun CSS height: auto uden kendt ratio.

Stabiliser embeds og dynamisk indhold

Embeds er klassiske CLS-kilder:

• YouTube
• maps
• social embeds
• tredjeparts widgets

Løsning:

• giv containeren en fast højde/aspect ratio
• brug placeholders med samme størrelse som slutindhold

Font-loading uden hop

Brug:

• font-display: swap
• fallback-font med lignende metrics
• færre font-weights i første omgang

Hvis navigation eller hero-tekst ændrer størrelse ved fontskift, er det et klart tegn på font-relateret CLS. Gå dybere i fonts-artiklen hvis det er hovedproblemet.

Cookie-bannere og modals

Mange “cookie consent”-bannere placeres i toppen og skubber hele siden ned når den mountes. Bedre mønstre:

• overlay der ikke ændrer layout-flow
• eller reserveret plads i layoutet med samme højde som banneret ender med at få

Det samme gælder exit-intent popups og annonce-slots der injiceres sent.

Typiske fejl

• Lazy-load af hero-elementer uden reserveret plads
• Cookie/banner der skubber indhold ned i stedet for overlay
• Dynamiske komponenter uden “placeholder footprint”
• CSS der ændrer størrelse sent (fx JS-injicerede klasser)

Praktisk checkliste før release

• Alle billeder og iframes har dimensioner/aspect-ratio
• Embeds har reserveret plads
• Font-loading skaber ikke tydelige tekst-hop
• CLS testet både i lab og på mobil

Sådan kontrollerer du resultatet

1. Kør Lighthouse/PSI og sammenlign CLS før/efter på samme URL.
2. I DevTools Performance: tjek Layout Shift events - de skal falde eller forsvinde ved de scenarier du har rettet.
3. Test på rigtig mobil eller med simuleret langsom CPU; små skift bliver tydeligere.
4. Hvis feltdata stadig er dårlige, er det ofte fordi rigtige brugere har langsommere fonts eller netværk - gentænk font-antal og embed-højder.

Relateret

• Blog: Hvad er Core Web Vitals?
• Ordbog: picture / responsive

Relaterede guides

Undgå CLS fra fonts: font-display, preload og stabile fallbacks

2026-03-30

Lær at undgå layout-hop (CLS) fra webfonts med font-display, fallback-strategi og korrekt preload. Guiden er til dig der vil have pæn typografi uden at ødelægge stabilitet.

Optimer cookie banner uden CLS og INP problemer

2026-03-24

Lær hvordan du bygger eller justerer cookie bannere, så de ikke skubber indhold, blokerer interaktion eller gør siden tungere end nødvendigt.

Sådan fejlsøger du LCP fra start til slut

2026-03-27

Følg en praktisk arbejdsgang til at finde årsagen til høj LCP, fra serverrespons og render blocking til billeder, prioritering og netværksrækkefølge.

Fjern eller udsæt tunge tredjeparts scripts uden at ødelægge funktionalitet

2026-03-26

Følg en praktisk guide til at finde, vurdere og udsætte tredjeparts scripts, så de ikke ødelægger LCP, INP og den samlede brugeroplevelse.

Sådan finder du lange tasks i DevTools og forbedrer INP

2026-03-25

Lær hvordan du bruger DevTools til at finde lange tasks, tunge event handlers og JavaScript der gør siden træg at bruge.

Forbedr INP ved at reducere JavaScript og lange tasks

2026-03-05

Få bedre interaktivitet ved at trimme JavaScript, splitte bundles og fjerne lange tasks, der gør siden langsom at bruge.

FAQ

Hvad er den hyppigste årsag til høj CLS?

Den hyppigste årsag er billeder eller embeds uden reserveret plads. Når elementet loader senere, skubber det indhold ned og skaber layout-shift.

Kan fontvalg virkelig påvirke CLS?

Ja. Hvis fallback-font og webfont har meget forskellige metrics, kan tekst ændre bredde/højde når webfonten loader. Det kan give tydelige shifts.

Hvordan finder jeg præcis hvilket element der skaber CLS?

Brug DevTools Performance og slå Layout Shift Regions til. Her kan du se hvilke elementer der flytter sig, og hvornår det sker.

Næste skridt efter guiden

Brug emnesider, ordbog og blog til at validere og uddybe næste ændring.

Se relaterede emnerLæs forklarende blogindlægTjek begreber i ordbogSe hele ordbogen (A–Å)