CLS - Kumulativ layoutskiftning

Vad är CLS?

Cumulative Layout Shift (CLS) mäter den visuella stabiliteten på din webbplats. Den upptäcker hur mycket synligt innehåll som oväntat ändrar position under laddningen. Om du någonsin har klickat på en knapp som plötsligt flyttade sig för att en bild eller annons laddades ovanför den - då har du upplevt layoutskift.

CLS är en av Googles tre Core Web Vitals och används som en rankningsfaktor i sökresultaten.

Hur mäts CLS?

CLS beräknas som summan av alla individuella layoutförändringar som inträffar utan användarinteraktion:

• Bra: CLS under 0,1 - minimal eller ingen synlig rörelse
• Behöver förbättras: CLS mellan 0,1 och 0,25
• Dåligt: CLS över 0,25 - betydande oväntad rörelse

Endast layoutförändringar som sker utan användarinteraktion (scroll, klick) räknas. Om en användare klickar på en knapp och innehållet ändras är detta förväntat och räknas inte.

Typiska orsaker till CLS i onlinebutiker

• Bilder utan dimensioner: Om bilder inte har attributen width/height i HTML, reserverar webbläsaren inte utrymme och innehållet under bilden hoppar när bilden laddas.
• Dynamiskt innehåll: Banners, annonser eller produktrekommendationer som laddas efter den första renderingen av sidan och trycker ner innehållet.
• Webbteckensnitt: Teckensnitt som laddas sent och har en annan storlek än reservteckensnittet (FOUT - Flash of Unstyled Text) kan flytta innehåll.
• Cookies/consent banners: Cookie-och samtyckesfält som dyker upp efter laddning och trycker ner innehåll.
• Latent laddat innehåll: Element som latent laddas utan att ha utrymme reserverat.

Så här kan du förbättra CLS

• Ange mått på bilder: Ange alltid bredd och höjd på alla <img>-element så att webbläsaren kan reservera utrymme innan bilden laddas.
• Reservera utrymme för dynamiskt innehåll: Använd CSS (min-height eller aspect-ratio) för att reservera utrymme för banners, annonser och andra element som laddas dynamiskt.
• Använd font-display: swap; detta förhindrar osynlig text men kan orsaka FOUT. Kombinera med preload för optimal balans.
• Placera cookie-banners som overlay: Använd position:fixed så att de inte trycker på sidinnehållet.
• Förhämta viktiga resurser: Använd <link rel="preload"> för kritiska teckensnitt, bilder och CSS.

CLS och Shoporama

Shoporamas teman är utformade med prestanda i åtanke. För bästa CLS-poäng ska du se till att alla produktbilder har rätt dimensioner och att externt innehåll (chatbots, spårningsskript) laddas utan att påverka layouten.

Verktyg för mätning

• Google PageSpeed Insights: Visar CLS för både mobil och dator med specifika element som bidrar till förskjutningen.
• Chrome DevTools (Lighthouse): Kör en Lighthouse-granskning för att se CLS och andra Core Web Vitals.
• Google Search Console: Rapporten Core Web Vitals visar CLS-prestanda för hela din webbplats baserat på verkliga användardata (CrUX).
• Web Vitals Chrome Extension: Visar CLS och andra Core Web Vitals i realtid medan du surfar.