CLS (Cumulative Layout Shift)

CLS, Cumulative Layout Shift, måler den visuelle stabilitet på en side. Du kender problemet: du skal til at trykke på en knap, og i samme øjeblik hopper teksten ned, fordi et billede eller et banner bliver indlæst ovenover. CLS sætter tal på de uventede forskydninger og er en af Googles tre Core Web Vitals sammen med LCP og INP.

Hvordan beregnes CLS?

Hver gang et synligt element flytter sig, uden at brugeren har bedt om det, registrerer browseren et layout shift. Værdien er produktet af to tal: hvor stor en del af skærmen der blev påvirket, og hvor langt elementet flyttede sig. Forskydninger, der sker inden for et halvt sekund efter et klik eller tryk, tæller ikke med, fordi brugeren selv har udløst dem.

Siden 2021 samler Google forskydningerne i sessionsvinduer. Et vindue rummer skift, der ligger højst et sekund fra hinanden, og varer højst fem sekunder. CLS er summen fra det værste vindue i hele besøget. Derfor straffes en lang artikel ikke for små skift spredt over ti minutters læsning.

Hvad er en god CLS-score?

Google bruger tre grænser, målt ved 75. percentil af sidevisningerne og for mobil og computer hver for sig.

• God: 0,1 eller lavere
• Skal forbedres: over 0,1 og op til 0,25
• Dårlig: over 0,25

75. percentil betyder, at mindst tre ud af fire besøg skal ligge under grænsen. Det er altså ikke nok, at siden er stabil på din egen hurtige computer.

Typiske årsager på hjemmesider og webshops

De fleste problemer har få kilder. Billeder og videoer uden width og height får ingen plads, før filen er hentet. Bannere og nyhedsbrevsbokse, der indsættes øverst i indholdet, skubber alt andet ned. Anmeldelseswidgets, annoncer og indlejrede kort fra tredjeparter indlæses sent og skifter højde. Web fonts kan ændre tekstens bredde, når reserveskriften udskiftes med den rigtige skrifttype. Og et kampagnebanner, der hentes med JavaScript, kan rykke hele menuen.

Sådan forbedrer du CLS

Giv alle billeder og videoer faste dimensioner med width og height eller med CSS-egenskaben aspect-ratio. Reserver plads til bannere og widgets med en min-height, der passer til indholdet. Læg cookiebanneret som et lag over siden frem for at skubbe indholdet ned. Brug font-display og preload til dine vigtigste skrifttyper, og vælg en reserveskrift med næsten samme mål. Animer med transform frem for top, left eller height, fordi transform ikke flytter andre elementer.

Mål effekten med data fra rigtige brugere. Rapporten Core Web Vitals i Google Search Console og PageSpeed Insights viser feltdata fra Chrome, mens Lighthouse og Chrome DevTools viser laboratoriedata. En laboratorietest fanger ofte kun skift under selve indlæsningen, så en side kan se fin ud i testen og stadig hoppe for rigtige brugere. Vores guide til teknisk SEO viser, hvor CLS passer ind i resten af det tekniske tjek, og i oversigten over de bedste SEO-værktøjer finder du værktøjerne til at måle det.