Hvad er CLS (Cumulative Layout Shift)?

CLS (Cumulative Layout Shift) er en af Googles tre Core Web Vitals og måler den visuelle stabilitet af en webside. CLS kvantificerer, hvor meget synlige elementer uventet skifter position, mens siden indlæses. En lav CLS-score betyder en mere stabil og brugervenlig oplevelse.

Hvorfor er CLS vigtig for SEO?

Google bruger Core Web Vitals, herunder CLS, som rankingfaktor. En dårlig CLS-score kan betyde, at din side taber positioner til konkurrenter med bedre brugeroplevelse. Ud over SEO skaber layout shifts en frustrerende oplevelse — tænk på at klikke på en knap, der pludselig rykker sig, så du rammer det forkerte element. Google anbefaler en CLS-score under 0,1.

Hvad forårsager dårlig CLS?

De mest almindelige årsager til layout shifts er:

• Billeder uden dimensioner: Når width og height ikke er angivet, "hopper" layoutet, når billedet indlæses
• Annoncer og embeds: Dynamisk indsat indhold der skubber eksisterende elementer
• Web fonts: Skrifttyper der indlæses sent og ændrer tekststørrelsen (FOUT)
• Dynamisk indhold: JavaScript der indsætter elementer over eksisterende indhold

Sådan forbedrer du CLS

Start med at angive eksplicitte dimensioner (width/height eller aspect-ratio) på alle billeder og videoer. Reserver plads til annoncer og dynamisk indhold med CSS. Brug font-display: swap med forsigtighed, og overvej at preloade dine web fonts. Undgå at indsætte indhold over eksisterende indhold medmindre det er som respons på en brugerinteraktion.

Almindelige fejl

Mange overser CLS-problemer, fordi de kun tester på hurtige forbindelser, hvor elementerne indlæses næsten samtidigt. Test altid med throttled netværk (Chrome DevTools) for at afsløre layout shifts. En anden fejl er at fokusere på lab-data fremfor field-data fra virkelige brugere.

Praktisk tip

Brug Chrome DevTools' Performance-panel til at identificere layout shifts visuelt. Aktivér "Layout Shift Regions" under Rendering for at se præcis, hvilke elementer der skifter position. Check også dine CLS-data i Google Search Console under Core Web Vitals-rapporten.