CLS (Cumulative Layout Shift)

CLS, Cumulative Layout Shift, mäter den visuella stabiliteten på en sida. Du känner igen problemet: du ska precis trycka på en knapp, och i samma ögonblick hoppar texten ner, eftersom en bild eller en banner laddas ovanför. CLS sätter siffror på de oväntade förskjutningarna och är en av Googles tre Core Web Vitals tillsammans med LCP och INP.

Hur räknas CLS?

Varje gång ett synligt element flyttar sig utan att användaren har bett om det registrerar webbläsaren ett layout shift. Värdet är produkten av två tal: hur stor del av skärmen som påverkades och hur långt elementet flyttade sig. Förskjutningar som sker inom en halv sekund efter ett klick eller tryck räknas inte, eftersom användaren själv har utlöst dem.

Sedan 2021 samlar Google förskjutningarna i sessionsfönster. Ett fönster rymmer skiften som ligger högst en sekund från varandra och varar högst fem sekunder. CLS är summan från det sämsta fönstret under hela besöket. Därför straffas en lång artikel inte för små skiften utspridda över tio minuters läsning.

Vad är en bra CLS-score?

Google använder tre gränser, mätta vid 75:e percentilen av sidvisningarna och för mobil och dator var för sig.

• Bra: 0,1 eller lägre
• Behöver förbättras: över 0,1 och upp till 0,25
• Dålig: över 0,25

75:e percentilen betyder att minst tre av fyra besök ska ligga under gränsen. Det räcker alltså inte att sidan är stabil på din egen snabba dator.

Vanliga orsaker på hemsidor och webbutiker

De flesta problem har få källor. Bilder och videor utan width och height får ingen plats förrän filen är hämtad. Banners och nyhetsbrevsrutor som läggs in högst upp i innehållet trycker ner allt annat. Recensionswidgets, annonser och inbäddade kartor från tredje part laddas sent och ändrar höjd. Webbtypsnitt kan ändra textens bredd när reservtypsnittet byts ut mot det riktiga. Och en kampanjbanner som hämtas med JavaScript kan flytta hela menyn.

Så förbättrar du CLS

Ge alla bilder och videor fasta mått med width och height eller med CSS-egenskapen aspect-ratio. Reservera plats för banners och widgets med en min-height som passar innehållet. Lägg cookiebannern som ett lager över sidan i stället för att trycka ner innehållet. Använd font-display och preload för dina viktigaste typsnitt, och välj ett reservtypsnitt med nästan samma mått. Animera med transform i stället för top, left eller height, eftersom transform inte flyttar andra element.

Mät effekten med data från riktiga användare. Rapporten Core Web Vitals i Google Search Console och PageSpeed Insights visar fältdata från Chrome, medan Lighthouse och Chrome DevTools visar labbdata. Ett labbtest fångar ofta bara skiften under själva laddningen, så en sida kan se bra ut i testet och ändå hoppa för riktiga användare. Vår guide till teknisk SEO visar var CLS passar in i resten av den tekniska kontrollen, och i översikten över de bästa SEO-verktygen hittar du verktygen för att mäta det.