Kort fortalt: CLS handler om at undgå at siden “hopper”, mens den loader.
Hvad måler det?
- Summen af uventede layout-skift under indlæsning og brug.
Hvilken indflydelse har CLS?
CLS er et af de mest “følelige” problemer, fordi det direkte påvirker kontrol og tillid:
- brugeren er ved at trykke på en knap, men knappen flytter sig
- teksten hopper, så man mister sin læseposition
- layoutet ser ustabilt og “billigt” ud
I praksis kan CLS derfor påvirke:
- læsbarhed (artikler og guides)
- konvertering (formularer, checkout, CTA-knapper)
- oplevet kvalitet (især på mobil)
Hvornår blev CLS indført?
CLS blev introduceret som en moderne måde at kvantificere visuel stabilitet, fordi ældre performance-målinger ikke fangede “hop” godt nok. Senere blev CLS en del af Core Web Vitals, fordi stabilitet er en central del af god UX.
Hvad er “god” CLS?
Tommelregler:
- God: under ca. 0,1
- Skal forbedres: 0,1–0,25
- Dårlig: over 0,25
Hvis du har et content-site med embeds, billeder og fonts, er CLS ofte et af de hurtigste steder at hente “gratis” forbedringer, fordi fixes er relativt konkrete.
Hvordan finder man kilder til CLS?
Praktiske værktøjer:
- Chrome DevTools Performance: viser layout shifts og hvilke elementer der flyttede sig
- Lighthouse/PageSpeed Insights: rapporterer CLS og giver typisk hints
Når du debugger, er det vigtigt at identificere:
- hvilke elementer der flytter sig
- hvad der blev indsat/slettet lige før skiftet (billede, font, embed, banner)
Typiske årsager
- Billeder/iframes uden faste dimensioner
- Annoncer/embeds der skubber indhold
- Fonts der skifter størrelse (FOIT/FOUT)
Typiske forbedringer
- Angiv bredde/højde eller aspect-ratio på media
- Reservér plads til embeds/annoncer
- Brug font-loading strategier (fx font-display)
Praktiske optimeringer (konkrete fixes)
1) Media: fast størrelse eller aspect-ratio
Det mest almindelige CLS-problem er et billede/iframe uden reserveret plads.
Konkrete greb:
- sæt
widthogheightpå billeder - brug
aspect-ratioi CSS når indholdet skal være responsivt - sørg for at lazy-loaded media stadig har plads reserveret
2) Embeds og tredjepart: reservér plads
YouTube, iframes, “related posts”, reklamer og widgets kan skubbe layout.
Konkrete greb:
- wrap embeds i en container med fast højde eller aspect-ratio
- brug skeletons/placeholders med samme størrelse som slutindhold
- undgå at indsætte nye elementer over allerede synligt indhold
3) Fonts: undgå store metrics-skift
Fonts giver CLS når fallback-font og webfont har forskellige metrics.
Konkrete greb:
font-display: swap- vælg fallback med lignende bredde/højde
- begræns antal weights og varianter (mindre font-loading)
4) UI-bannere og “top bars”
Cookie banners, notices og “sticky bars” skaber ofte CLS når de skubber content ned.
Konkrete greb:
- brug overlay (position fixed) i stedet for at skubbe layout
- hvis det skal skubbe: reservér plads fra start
Tjekliste
- Alle billeder/iframes har dimensioner eller aspect-ratio
- Embeds har placeholder med samme størrelse
- Fonts loader med swap + passende fallback
- Banners skubber ikke layout uventet
FAQ
Kan man få CLS = 0 på alle sider?
Det kan lade sig gøre på simple sider, men på content-sites med embeds, tredjepart og dynamiske komponenter er målet ofte at minimere de **uventede** shifts.
Prioritér de største og mest synlige layout-hop (fx hero, navigation, cookie banner, store embeds), fordi de påvirker brugerens kontrol og tillid mest.
Hvis du vil være ambitiøs: gør “plads-reservering” til en standard (dimensioner/aspect-ratio + placeholders), så nye komponenter ikke introducerer shifts ved et uheld.
Næste skridt fra begreb til handling
Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.
Undgå CLS fra fonts: font-display, preload og stabile fallbacks
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
Lær hvordan du bygger eller justerer cookie bannere, så de ikke skubber indhold, blokerer interaktion eller gør siden tungere end nødvendigt.
Fix CLS: sådan gør du layout stabilt uden hop i indholdet
Lær hvordan du reducerer CLS med faste dimensioner, aspect ratio, stabile embeds og korrekt font loading, så siden ikke hopper under indlæsning.
Cookie banner og Core Web Vitals: den oversete årsag til dårlig brugeroplevelse
Se hvordan cookie bannere og consent scripts kan påvirke load, layout og interaktion, og lær hvordan du undgår at de ødelægger brugeroplevelsen.
Fonts uden CLS: undgå layout hop fra webfonts og fallback fonts
Se hvordan font-display, preload, fallback fonts og font metrics påvirker CLS, og lær hvordan du gør tekst stabil fra første visning.
5 grunde til at din hjemmeside er langsom og hvad du gør ved det
Se de mest almindelige årsager til en langsom hjemmeside, hvordan du spotter dem, og hvilke ændringer der typisk giver mest effekt først.
