CLS - Kumulativ layoutforskyvning

Hva er CLS?

Kumulativ layoutforskyvning (CLS) måler den visuelle stabiliteten på nettstedet ditt. Den registrerer hvor mye synlig innhold som uventet skifter posisjon under innlastingen. Hvis du noen gang har klikket på en knapp som plutselig flyttet seg fordi et bilde eller en annonse ble lastet inn over den, har du opplevd layoutskift.

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

Hvordan måles CLS?

CLS beregnes som summen av alle individuelle layoutskift som oppstår uten brukerinteraksjon:

• Bra: CLS under 0,1 - minimal eller ingen synlig bevegelse
• Behov for forbedring: CLS mellom 0,1 og 0,25
• Dårlig: CLS over 0,25 - betydelig uventet bevegelse

Bare layoutforskyvninger som skjer uten brukerinteraksjon (bla, klikk), telles 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 bredde/høyde-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 den første gjengivelsen av siden og skyver innholdet nedover.
• Nettfonter: Fonter som lastes inn sent og har en annen størrelse enn reserveskriften (FOUT - Flash of Unstyled Text), kan flytte innhold.
• Informasjonskapsler/samtykkebannere: Samtykkebannere med informasjonskapsler som dukker opp etter innlasting og skyver innhold nedover.
• Innhold som ikke lastes inn: Elementer som lastes inn uten at det er reservert plass.

Slik kan du forbedre 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) for å reservere plass til bannere, annonser og andre elementer som lastes inn dynamisk.
• Bruk font-display: swap; dette forhindrer usynlig tekst, men kan forårsake FOUT. Kombiner med preload for optimal balanse.
• Plasser cookie-bannere som overlegg: Bruk position:fixed slik at de ikke skyver på sideinnholdet.
• Hent viktige ressurser påforhånd: Bruk <link rel="preload"> for kritiske skrifter, bilder og CSS.

CLS og Shoporama

Shoporama-temaer er utformet med tanke på ytelse. For å oppnå best mulig CLS-poengsum må 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 datamaskin 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.