CLS (Cumulative Layout Shift)

Hvad er CLS (Cumulative Layout Shift)?

CLS måler, hvor meget synlige elementer uventet flytter sig, mens en side indlæses eller bruges. Scoren er enhedsløs og beregnes som impact fraction (hvor stor en del af skærmen der påvirkes) gange distance fraction (hvor langt elementerne flytter sig). CLS er en af de tre Core Web Vitals sammen med LCP og INP, og en god score er 0,1 eller lavere målt ved 75. percentil – over 0,25 regnes som dårlig.

Hvorfor er CLS (Cumulative Layout Shift) vigtigt?

Layout-hop er direkte skadeligt i en webshop: kunden er på vej til at trykke “Køb”, men en banner eller et sent indlæst billede skubber knappen, og klikket rammer noget andet. Det skaber frustration, fejlklik og mistillid lige før konverteringen. Samtidig indgår CLS i Googles page experience-signaler, så vedvarende høje værdier kan trække placeringer ned. En stabil side føles hurtigere og mere professionel – også når den reelle hastighed er den samme.

Typiske brugssituationer

• Billeder og video uden dimensioner. Uden width/height eller aspect-ratio kender browseren ikke pladsen på forhånd, og indholdet hopper, når mediet loader – hæng gerne sammen med korrekt alt-tekst.
• Cookiebannere og popups. Indhold, der skydes ind øverst eller midt på siden, skubber alt nedenfor.
• App-widgets. Anmeldelser, “nyligt set” og upsell-blokke, der indlæses efter resten, flytter layoutet.
• Webfonts. Skift fra reserve-skrifttype til den endelige font kan få tekst til at ombryde og hoppe.
• Annoncer og iframes uden reserveret plads i feltet over folden.

Shopify-perspektiv

I Shopify stammer de fleste layout-hop fra apps og temaændringer frem for kerneplatformen. Reservér altid plads til dynamiske blokke, angiv faste dimensioner på produktbilleder, og indlæs cookiebanner og popups, så de ikke rykker indhold. Mål effekten med PageSpeed Insights eller Lighthouse på både mobil og desktop, og hold øje med hastighedsrapporten under Online Store i Shopify-admin, som bygger på Google Lighthouse-data.