Kumulativ layoutforskyvning (CLS)

Hva er kumulativ layoutforskyvning (CLS)?

Cumulative Layout Shift (CLS) er en Core Web Vitals-metrikk som er utviklet av Google for å måle den visuelle stabiliteten til en nettside. Den kvantifiserer summen av alle uventede layoutskift som oppstår i løpet av hele sidens levetid. Layoutforskyvninger skjer når et synlig element endrer posisjon fra én gjengitt ramme til den neste.

Hvordan CLS måles

CLS-poengsummen varierer fra 0, som betyr ingen forskyvning, til verdier over 0, som indikerer varierende grad av ustabilitet. Formelen tar hensyn til påvirkningsfraksjonen og avstandsfraksjonen for hvert skift, og beregner hvor mye elementene beveger seg og hvor stor del av visningsruten de dekker.

Tolkning av CLS-poengsum

• Bra: 0 - 0,1
• Behov for forbedring: 0.1 - 0.25
• Dårlig: Over 0,25

Hvorfor er CLS viktig?

CLS er avgjørende for brukeropplevelsen, ettersom uventede layoutendringer kan føre til frustrasjon hos brukerne. Hvis en bruker for eksempel er i ferd med å klikke på en knapp og oppsettet endrer seg, slik at brukeren utilsiktet klikker på noe annet, kan det føre til en dårlig brukeropplevelse og potensielt tap av konverteringer.

Vanlige årsaker til dårlig CLS

1. Bilder uten dimensjoner:

   • Hvis du inkluderer bilder i HTML-filen uten å spesifisere bredde og høyde, kan det føre til layoutforskyvninger fordi nettleseren ikke vet hvor mye plass som skal tildeles i utgangspunktet.

2. Annonser, innebygde elementer og Iframes uten dimensjoner:

   • Disse elementene kan lastes inn dynamisk og forårsake layoutforskyvninger hvis dimensjonene ikke er spesifisert på forhånd.

3. Dynamisk injisert innhold:

   • Hvis du legger til innhold over eksisterende innhold i DOM-en, kan det skyve elementer nedover og forårsake forskyvninger.

4. Nettfonter som forårsaker FOIT/FOUT:

   • Flash of Invisible Text (FOIT) og Flash of Unstyled Text (FOUT) kan forårsake layoutforskyvninger når nettleseren laster inn nettfonter.

Beste praksis for å minimere CLS

1. Inkluder størrelsesattributter på bilder og videoer:

   • Definer alltid bredden og høyden på bilder og videoer i HTML-koden for å reservere plass i oppsettet før de lastes inn.

2. Reserver plass til annonser og embeds:

   • Bruk CSS til å angi dimensjoner for annonseplasser, iframes og innebygde elementer for å unngå layoutforskyvninger når de lastes inn.

3. Unngå å legge inn innhold dynamisk over eksisterende innhold:

   • Legg til nytt innhold under folden eller i beholdere som allerede har en reservert plass.

4. Bruk strategier for innlasting av skrifter:

   • Bruk CSS-egenskapen font-display for å kontrollere hvordan nettfonter vises og minimere forskyvninger på grunn av FOIT/FOUT.

5. Bruk CSS Transform for animasjoner:

   • Bruk transform-egenskapen i stedet for topp, bunn, venstre eller høyre for å animere elementer uten å forårsake layoutforskyvninger.

Konklusjon

Kumulativ layoutforskyvning (CLS) er et viktig mål for å sikre en stabil og visuelt tiltalende brukeropplevelse. Ved å forstå hvilke faktorer som bidrar til layoutskift og implementere beste praksis for å minimere dem, kan du forbedre nettsidens CLS-poengsum og øke den generelle brukertilfredsheten.

Hvis du vil ha mer informasjon om hvordan du kan forbedre CLS og andre Core Web Vitals, kan du gå til Googles Web Vitals-dokumentasjon.