CLS står för Cumulative Layout Shift och mäter hur mycket synligt innehåll flyttar sig oväntat när en webbsida laddas eller används.
Vad är CLS?
CLS registrerar oväntade förflyttningar av synliga element medan sidan laddas eller används. Det kan till exempel handla om att text, bilder eller knappar plötsligt flyttar sig när en annons, bild eller annan resurs laddas in.
För användaren kan sådana förflyttningar skapa frustration och leda till felklick. För SEO är CLS relevant eftersom måttet ingår i Core Web Vitals och därmed är en del av Googles bedömning av sidupplevelsen.
Snabbfakta om CLS
Mäter visuell stabilitet
CLS visar hur mycket innehållet flyttar sig oväntat på sidan och ger en bild av hur stabil layouten upplevs.
Ingår i Core Web Vitals
CLS är ett av de tre centrala mätvärdena tillsammans med LCP och INP.
0,1 är riktvärdet
Google rekommenderar normalt ett CLS värde på högst 0,1 för att sidans visuella stabilitet ska klassas som bra.
Påverkas av layoutskiften
Bilder utan angivna dimensioner, annonser, typsnitt och dynamiskt innehåll är vanliga orsaker till ett högt CLS.
Hur förbättrar man CLS?
Ett vanligt problem är bilder och video som saknar reserverat utrymme i layouten. Genom att ange bredd och höjd redan innan resursen laddas kan webbläsaren reservera rätt plats och minska oväntade förflyttningar.
Annonser, banners och andra dynamiska element bör också få en förutbestämd yta. Om nytt innehåll trycks in ovanför redan synligt innehåll kan stora layoutskiften uppstå och försämra användarupplevelsen.
Typsnitt kan också påverka CLS när text byter storlek eller form efter att ett webbtypsnitt har laddats. Effektiv laddning av fonts och genomtänkta fallback typsnitt kan därför bidra till en stabilare rendering.
CLS bör följas både med faktisk användardata och tekniska tester. PageSpeed Insights, Lighthouse och Google Search Console är vanliga verktyg för att identifiera vilka element som orsakar störst layoutskiften.
Frågor och svar
Låt oss prata
Vi finns här för att hjälpa dig
Oavsett om du söker expertrådgivning, skräddarsydda lösningar eller har en specifik fråga – hör gärna av dig till vårt team.
Följ oss