CLS - Kumulativ layoutforskyvning

Hva er CLS?

Cumulative Layout Shift (CLS) måler den visuelle stabiliteten til nettsiden din. Den registrerer hvor mye synlig innhold som uventet endrer posisjon under innlasting. Hvis du noen gang har prøvd å klikke på en knapp som plutselig flyttet seg fordi et bilde eller en annonse lastet inn over den – så har du opplevd layout shift.

CLS er en av Googles tre Core Web Vitals og brukes som rangeringfaktor i søkeresultatene.

Hvordan måles CLS?

CLS beregnes som summen av alle individuelle layoutskift som skjer uten brukerinteraksjon:

• God: CLS under 0,1 – minimal eller ingen synlig bevegelse
• Trenger forbedring: CLS mellom 0,1 og 0,25
• Dårlig: CLS over 0,25 — betydelig uventet bevegelse

Bare layoutforskyvninger som skjer uten brukerinteraksjon (rulling, klikk) teller med. Hvis en bruker klikker på en knapp og innholdet endres, er dette forventet og teller ikke.

Typiske årsaker til CLS i nettbutikker

• Bilder uten dimensjoner: Hvis bilder ikke har width/height-attributter i HTML-koden, reserverer ikke nettleseren plass, og innholdet under bildet hopper når bildet lastes inn.
• Dynamisk innhold: Bannere, annonser eller produktanbefalinger som lastes inn etter sidens første visning og skyver innholdet nedover.
• Webfonter: Fonter som lastes inn sent og har en annen størrelse enn fallback-fonten (FOUT – Flash of Unstyled Text), kan forskyve innholdet.
• Informasjonskapsler/samtykkebannere: Samtykkebannere for informasjonskapsler som dukker opp etter innlasting og skyver innholdet nedover.
• Lazy-loaded innhold: Elementer som lastes inn etter hvert (lazy-loaded) uten at det er reservert plass til dem.

Slik forbedrer du CLS

• Angi dimensjoner på bilder: Angi alltid bredde og høyde på alle <img>-elementer, slik at nettleseren kan reservere plass før bildet lastes inn.
• Reserver plass til dynamisk innhold: Bruk CSS (min-height eller aspect-ratio) til å reservere plass til bannere, annonser og andre elementer som lastes inn dynamisk.
• Bruk font-display: swap; Dette forhindrer usynlig tekst, men kan gi FOUT. Kombiner med preload for å oppnå optimal balanse.
• Plasser cookie-bannere som overlegg: Bruk position:fixed, slik at de ikke forskyver innholdet på siden.
• Forhåndshent viktige ressurser: Bruk <link rel="preload"> for kritiske skrifttyper, bilder og CSS.

CLS og Shoporama

Shoporamas temaer er designet med ytelse i fokus. For å oppnå den beste CLS-scoren bør du sørge for at alle produktbilder har riktige dimensjoner, og at eksternt innhold (chatbots, sporingsskript) lastes inn uten å påvirke oppsettet.

Måleverktøy

• Google PageSpeed Insights: Viser CLS for både mobil og stasjonær med spesifikke elementer som bidrar til forskyvning.
• Chrome DevTools (Lighthouse): Kjør en Lighthouse-revisjon for å se CLS og andre Core Web Vitals.
• Google Search Console: Core Web Vitals-rapporten viser CLS-ytelsen for hele nettstedet ditt basert på reelle brukerdata (CrUX).
• Web Vitals Chrome-utvidelse: Viser CLS og andre Core Web Vitals i sanntid mens du surfer.