Emner / cls
CLS (Cumulative Layout Shift) måler uventede layout-skift under indlæsning. Det lyder teknisk, men brugeroplevelsen er simpel: tekst og knapper hopper, man rammer forkert, og siden føles billig. Denne emneside samler indhold om typiske årsager - billeder og embeds uden dimensioner, webfonts der ændrer metrikker, og dynamiske bannere der skubber indhold.
Du finder både en praktisk guide til at stabilisere layout og artikler om typografi og font-loading, fordi fonts er en overset CLS-kilde. Målet er at du kan identificere skiftene i DevTools, rette de største syndere først, og verificere i både lab og felt.
CLS er ofte et af de områder hvor små ændringer giver synlig gevinst: `width`/`height` på medier, `aspect-ratio` på containere og bedre strategi for cookie-bannere kan reducere frustration markant. Indholdet her er skrevet så både indholdsfolk og udviklere kan finde håndtagene.
Kombinér med emner som CSS, fonts og billeder for at dække hele værktøjskassen. Når CLS er under kontrol, bliver øvrige optimeringer også lettere at vurdere - du undgår at forveksle layout-hop med langsom LCP eller tung JavaScript.
Dokumentér CLS-problemer med optagelse i DevTools og gerne screenshots til interessenter. Det gør det lettere at forklare, hvorfor “bare et lille banner” eller “et ekstra script” faktisk koster målbart i stabilitet.
Eksterne kilder du kan bruge til at validere målinger: PageSpeed Insights, web.dev Vitals og DevTools Performance.
Start her
- Undgå CLS fra fonts - seneste guide i emnet
- Cookie banner og Core Web Vitals - seneste blogindlæg i emnet
- Slå relaterede begreber op i ordbogen
Relaterede begreber (ordbog)
Guides
Guide
Undgå CLS fra fonts
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.
Guide
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.
Guide
Fix CLS
Lær hvordan du reducerer CLS med faste dimensioner, aspect ratio, stabile embeds og korrekt font loading, så siden ikke hopper under indlæsning.
Blogindlæg
Blog
Cookie banner og Core Web Vitals
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.
Blog
Fonts uden CLS
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.
Blog
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.
Fortsæt i emneklyngen
Gå videre til relaterede sidetyper for at dække emnet fra flere vinkler.