+47 21 60 79 89Cumulative Layout Shift (CLS) er et ytelsesmålingsverktøy som er en del av Googles Core Web Vitals, som ble lansert i 2020. Det måler uventede layoutforskyvninger av synlige sideinnholdselementer under sidens lastesyklus. CLS er en viktig faktor i søkemotorens siderangeringssystem og kan påvirke en nettsides SEO-prestasjon.
Hvordan fungerer CLS?
CLS scorer blir kalkulert ved å ta summen av alle individuelle layout shift score for hver uventet layoutforskyvning som oppstår gjennom hele sidelastingsperioden. En layout shift oppstår når et synlig element, f.eks. et bilde, en tekstblokk eller en knapp, endrer sin startposisjon mellom to renderede rammer. Jo flere og jo større uventede layout shifts som skjer på siden, desto høyere blir CLS-scoren.
Årsaker til høy CLS:
- Bilder uten dimensjoner: Når bilder ikke har definerte bredde- og høydeattributter, kan nettleseren ikke reservere riktig plass mens siden lastes, noe som fører til at innholdet flytter seg når bildene lastes.
- Dynamisk innhold: Innhold som annonser, embeds, eller iframes som lastes inn uten å angi nødvendig plass kan føre til layoutforskyvninger.
- Webfonter som forårsaker FOIT/FOUT (flash of invisible text/flash of unstyled text), kan forårsake midlertidige shifts i layouten.
- Handlinger fra brukeren som fører til at innhold endrer størrelse eller posisjon uten forvarsel.
Beste praksiser for å forbedre CLS:
- Angi størrelsesattributter for mediefiler (bilder, videoer, etc.) eller bruke CSS-aspektsforhold boksstiler for å reservere plassen i dokumentlayouten.
- Sørge for at annonser, embeds og iframes har en definert størrelse.
- Implementere font-display: swap; i CSS for å redusere effekten av FOIT og FOUT.
- Reservere plass for dynamisk innhold for å unngå at det skifter layout post-load.
- Stabilisere knapper og CTA-elementer slik at de ikke flytter seg da brukeren forsøker å interagere med dem.
Overvåking og optimalisering
Webutviklere og SEO-spesialister bør kontinuerlig overvåke sin nettsides CLS-score ved hjelp av verktøy som Google’s PageSpeed Insights eller Chrome User Experience Report. Å holde et øye med CLS er avgjørende for å sikre en god brukeropplevelse og optimalisere for søkemotorrangering, ettersom en lav score vil reflektere positivt på nettsidens brukervennlighet og dermed dens SEO-ytelse.
Som en del av en omfattende SEO-strategi, er forståelsen og forbedringen av CLS en viktig teknisk komponent som kan hjelpe en nettside å oppnå bedre synlighet og rangering i søkemotorresultatsider (SERPs).
