CLS – Cumulative Layout Shift

Hvad er CLS?

Cumulative Layout Shift (CLS) måler den visuelle stabilitet af din webside. Det registrerer, hvor meget synligt indhold uventet skifter position under indlæsning. Hvis du nogensinde har prøvet at klikke på en knap, der pludselig flyttede sig, fordi et billede eller en annonce indlæste over den — så har du oplevet layout shift.

CLS er en af Googles tre Core Web Vitals og bruges som rankingfaktor i søgeresultaterne.

Hvordan måles CLS?

CLS beregnes som summen af alle individuelle layout shifts, der sker uden brugerinteraktion:

• God: CLS under 0,1 — minimal eller ingen synlig bevægelse
• Behøver forbedring: CLS mellem 0,1 og 0,25
• Dårlig: CLS over 0,25 — betydelig uventet bevægelse

Kun layout shifts der sker uden brugerinteraktion (scroll, klik) tæller med. Hvis en bruger klikker på en knap, og indholdet ændrer sig, er det forventet og tæller ikke.

Typiske årsager til CLS i webshops

• Billeder uden dimensioner: Hvis billeder ikke har width/height-attributter i HTML'en, reserverer browseren ikke plads, og indholdet under billedet springer, når billedet indlæses.
• Dynamisk indhold: Banners, annoncer eller produktanbefalinger, der indlæses efter sidens initiale rendering og skubber indhold ned.
• Web-fonte: Fonte, der indlæses sent og har en anden størrelse end fallback-fonten (FOUT - Flash of Unstyled Text), kan flytte indhold.
• Cookies/samtykke-banners: Cookie-samtykke-bjælker, der dukker op efter indlæsning og skubber indholdet ned.
• Lazy-loaded indhold: Elementer, der lazy-loades uden at have plads reserveret.

Sådan forbedrer du CLS

• Sæt dimensioner på billeder: Angiv altid width og height på alle -elementer, så browseren kan reservere plads, før billedet indlæses.
• Reservér plads til dynamisk indhold: Brug CSS (min-height eller aspect-ratio) til at reservere plads til banners, annoncer og andre elementer, der indlæses dynamisk.
• Brug font-display: swap; Det forhindrer usynlig tekst, men kan give FOUT. Kombinér med preload for optimal balancen.
• Placer cookie-banners som overlay: Brug position:fixed, så de ikke skubber sideindhold.
• Prefetch vigtige ressourcer: Brug for kritiske fonts, billeder og CSS.

CLS og Shoporama

Shoporamas temaer er designet med performance i fokus. For at opnå den bedste CLS-score bør du sikre, at alle produktbilleder har korrekte dimensioner, og at eksternt indhold (chatbots, tracking-scripts) indlæses uden at påvirke layoutet.

Måleværktøjer

• Google PageSpeed Insights: Viser CLS for både mobil og desktop med specifikke elementer, der bidrager til shift.
• Chrome DevTools (Lighthouse): Kør en Lighthouse-audit for at se CLS og andre Core Web Vitals.
• Google Search Console: Core Web Vitals-rapporten viser CLS-performance for hele dit site baseret på reelle brugerdata (CrUX).
• Web Vitals Chrome Extension: Viser CLS og andre Core Web Vitals i realtid, mens du browser.