Cumulative Layout Shift (CLS) är ett av Googles tre Core Web Vitals och mäter visuell stabilitet – i vilken utsträckning sidans synliga element förskjuts oväntat under laddning och interaktion. Ett högt CLS-värde indikerar en bristfällig användarupplevelse och kan påverka både ranking och konvertering negativt.
Vad mäter CLS?
CLS kvantifierar oväntade layoutförskjutningar enligt Layout Instability API – det vill säga situationer där synliga element byter position utan att användaren initierat en interaktion. Värdet uttrycks som ett enhetslöst tal baserat på hur stor andel av viewporten som påverkas (impact fraction) multiplicerat med hur långt elementen förflyttas (distance fraction).
Beräkning med Session Windows
Sedan 2021 beräknas CLS med hjälp av session windows. Det innebär att enskilda layoutförskjutningar grupperas i fönster om maximalt fem sekunder, med högst en sekunds mellanrum mellan skiften. Det rapporterade CLS-värdet är det största sessionsfönstrets totala poäng – inte summan av alla skift under hela sidvisningen.
Denna beräkningsmodell gör att långlivade sidor och SPA-applikationer (Single Page Applications) inte straffas oproportionerligt för ackumulerade skift över tid. En sida kan ha enstaka mindre skift utan att CLS-värdet blir problematiskt, så länge de inte inträffar i snabb följd.
| Betyg | Gränsvärde |
|---|---|
| Bra | ≤ 0,1 |
| Behöver förbättras | 0,1–0,25 |
| Dåligt | > 0,25 |
Google baserar bedömningen på 75:e percentilen av fältdata – det innebär att minst 75 procent av sidbesöken måste klara gränsvärdet 0,1 för att sidan ska godkännas.
CLS på svenska sajter
CLS är det CWV-mått som flest svenska sajter klarar — men problemen dyker upp på oväntade ställen. Sajter som använder cookie-banners (Cookiebot, OneTrust) infogar ofta en topbanner som skjuter ner hela sidinnehållet. Samma effekt uppstår med Sitevisions och Optimizelys personaliserade innehållsblock som laddas asynkront och ändrar layouten efter initial rendering.
E-handelssajter drabbas av en annan variant: produktbilder utan angivna dimensioner i kombination med rekommendationsmotorer som injicerar ”Andra köpte också”-sektioner efter sidladdning. Under arbetet med Laddtider.se uppmättes CLS 0 — resultatet av att undvika externa fonter (inga typsnittsbyte), använda systemtypsnitt och inte ha något dynamiskt innehåll ovanför folden.
Vanliga orsaker till layoutförskjutningar
Bilder och video utan dimensioner
Om ett bildelement saknar attributen width och height (eller motsvarande CSS) kan webbläsaren inte reservera utrymme innan resursen laddats. När bilden renderas förskjuts allt efterföljande innehåll nedåt. Det är den vanligaste orsaken till höga CLS-värden. Se bildoptimering för fler tekniker som förbättrar både CLS och laddtid.
<!-- Problematiskt: inga dimensioner angivna -->
<img src="hero.webp" alt="Beskrivning">
<!-- Korrekt: explicita dimensioner -->
<img src="hero.webp" alt="Beskrivning" width="1200" height="630">
<!-- Alternativ: CSS aspect-ratio -->
<img src="hero.webp" alt="Beskrivning" style="aspect-ratio: 16/9; width: 100%;">Annonser och inbäddningar
Asynkront laddade annonser utan reserverat utrymme är en känd orsak till layoutförskjutningar. Samma problem gäller inbäddningar från YouTube, Twitter/X och liknande tjänster. Åtgärden är att reservera plats med en container som har fast höjd eller aspect-ratio innan resursen laddas.
Typsnitt som ändrar textflödet
När ett webbfont laddas och ersätter fallback-typsnittet kan texten ändra storlek, radlängd och radbrytningar – vilket förskjuter omgivande element. Tre strategier motverkar detta:
font-display: optional– undviker bytet helt om typsnittet inte hinner laddas- Matchning av fallback-typsnitt via
size-adjust,ascent-overrideochdescent-override - Förladdning med
<link rel="preload" as="font" crossorigin>
Dynamiskt injicerat innehåll
Banderoller, cookie-meddelanden och notiser som infogas ovanför befintligt innehåll utan reserverat utrymme orsakar layoutförskjutningar. Sådant innehåll bör visas som overlay (ovanpå befintligt innehåll) eller med reserverad plats i layouten.
Åtgärder för att förbättra CLS
Googles optimeringsguide för CLS sammanfattar de viktigaste åtgärderna. Här är en prioriterad lista:
- Ange dimensioner på alla bilder och videoelement. Använd
width/height-attribut eller CSSaspect-ratio. - Reservera utrymme för annonser och inbäddningar. Sätt
min-heightpå containern baserat på det förväntade formatet. - Förladda typsnitt med
<link rel="preload" as="font" crossorigin>och övervägfont-display: optional. - Självhosta typsnitt. Det ger bättre cachekontroll jämfört med externa CDN som Google Fonts.
- Undvik att infoga innehåll ovanför viewporten. Använd overlay-mönster eller sticky-positionering för notiser och banderoller.
- Använd platshållar-layout (skeleton UI). Visa en schematisk layout medan dynamiskt innehåll laddas.
- Aktivera bfcache. Sidor som återställs via bakåt- och framåtnavigering producerar inga layoutförskjutningar. Kontrollera att JavaScript-kod inte förhindrar bfcache.
Mätning: fältdata och labbdata
CLS kan mätas både med fältdata (riktiga användare) och labbdata (syntetiska tester), men resultaten skiljer sig ofta åt. Fältdata fångar förskjutningar under hela sidbesöket – inklusive skift som utlöses av scrollning eller sen annonsladdning – medan labbtester normalt bara mäter den initiala sidladdningen.
Google använder fältdata från Chrome User Experience Report (CrUX) som rankingsignal. Labbdata är värdefullt för diagnostik men avgör inte ranking.
- Fältdata: PageSpeed Insights (CrUX-sektionen), Google Search Console, Web Vitals JavaScript-bibliotek
- Labbdata: Lighthouse, GTmetrix, Chrome DevTools (Performance-fliken → ”Layout Shift”)
I Chrome DevTools kan Layout Shift Regions aktiveras under Rendering-panelen. Webbläsaren markerar då varje layoutförskjutning med en blå överlagring i realtid, vilket underlättar identifiering av specifika problemområden.