CLS
Även känt som: Cumulative Layout Shift
Core Web Vitals-mätning av hur mycket sidinnehåll hoppar medan det laddas. Bra CLS: under 0,1. Dålig CLS ger SEO-straff och irriterad användare.
CLS (Cumulative Layout Shift) mäter visuell stabilitet på en webbsida. När du laddar en sajt och innehåll plötsligt hoppar för att en bild, reklam eller font laddas sent — det är layout shift. Google summerar alla sådana hopp under sidans livstid och ger ett värde mellan 0 och 1. Under 0,1 anses bra, över 0,25 dåligt.
Vanliga CLS-orsaker: (1) bilder utan explicit width/height (reserverar ingen plats innan laddning), (2) typsnitt som byter storlek när custom-typsnittet laddas (FOUT — Flash of Unstyled Text), (3) reklam eller embeds som skjuts in dynamiskt, (4) animerad CSS som flyttar element utan transform. Dessa är alla fixbara med rätt tekniska val.
För att förbättra CLS: specificera alltid width och height på bilder (Next.js Image-komponenten gör detta automatiskt), använd font-display: swap med size-adjust för att minimera typsnittshop, reservera plats för reklam med fasta containerstorlekar, och använd CSS transform (inte top/left) för animationer. CLS ingår i Googles Core Web Vitals och påverkar ranking direkt — ett vanligt försummat SEO-problem bland svenska webbhotellskunder.