Hva er Cumulative Layout Shift (CLS) og hvordan fikse det

Hva er Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) representerer 'visuell stabilitet'-delen av Core Web Vitals. Cumulative Layout Shift (CLS) måler bevegelsene på siden når innhold rendres eller nytt innhold vises på siden. Den beregner en score basert på hvor mye av siden som uventet beveger seg og hvor langt det flytter seg. Disse forskyvningene av innhold er svært irriterende, de kan få deg til å miste plassen din i en artikkel du har begynt å lese, eller enda verre, få deg til å klikke på feil knapp!

Viktigheten av CLS for nettytelse og user experience

Cumulative Layout Shift (CLS) er knyttet til både nettytelse og user experience fordi det direkte påvirker hvor stabil og forutsigbar en nettside føles under lasting. Her er hvorfor det er viktig:

• UX, engasjement og merkevareoppfatning:  Uventede layoutforskyvninger forstyrrer brukerflyten, noe som gjør det vanskeligere å finne informasjon, klikke på knapper og samhandle med siden som tiltenkt. Denne frustrasjonen kan føre til dårlige opplevelser der brukere forlater nettstedet helt.
  Et nettstedsuser experience gjenspeiler merkevaren bak det. Hyppige layoutforskyvninger kan gi inntrykk av et dårlig designet eller vedlikeholdt nettsted, forstyrre brukerengasjement som fører til redusert interaksjon og potensielt høyere fluktfrekvens.
  
• Tilgjengelighet: Layoutforskyvninger kan være spesielt forstyrrende for brukere med funksjonshemninger som er avhengige av hjelpeteknologier eller skjermlesere. En stabil layout sikrer at alle kan navigere og samhandle med nettstedet effektivt.
  
• SEO og søkerangering: Core Web Vitals er en liten, men viktig rangeringsfaktor i Google. Google, sammen med andre søkemotorer, prioriterer nettsteder som tilbyr en god user experience. CLS er en av Core Web Vitals-metrikken som Google vurderer når de rangerer nettsteder. Optimalisering for CLS kan gi nettstedet ditt et konkurransefortrinn i søkeresultatene.
  

Hvordan måles CLS?

CLS for en side kan måles med Layout Instability API. Følgende er en enkel bruk av dette API-et

Beregning av CLS

CLS beregnes enkelt ved hjelp av en enkel, men elegant formel:

CLS = sum(impact-fraction * distance-fraction)

Impact-fraksjonen måler hvor mye av det synlige innholdet på siden som har forskjøvet seg. Distance-fraksjonen måler hvor langt innholdet har forskjøvet seg. Hvis for eksempel 50% av siden (hvor mye) har forskjøvet seg 25% (hvor langt) av visningsområdet til siden. CLS-scoren = 0,50 * 0,25 = 0,125

Forventede VS uventede layoutforskyvninger

Ikke alle layoutforskyvninger er dårlige, bare de du ikke forventer. Når du klikker på en 'last inn flere elementer'-lenke, for eksempel, ville du forvente at flere elementer vises på siden og at innholdet på siden forskyver seg.

Det er derfor bare uventede layoutforskyvninger vil forårsake et CLS-bidrag. For eksempel, hvis en bruker klikker på en knapp og som respons legges nytt innhold til på siden (for eksempel en nedtrekksmeny), vil layoutforskyvningen bli ekskludert fra CLS. For å være presis:
Layoutforskyvninger som skjer innen 500 millisekunder etter brukerinteraksjon vil bli ekskludert fra beregningene

Layoutforskyvningsøkter

Da CLS først ble introdusert, ble noen nettsteder urettferdig straffet med en dårlig CLS-score. For eksempel ville en side som implementerer uendelig scrolling ha fått virkningen av det nylig tillagte innholdet lagt til den totale CLS-scoren for hver nye scrolling. Det er derfor CLS nå beregnes i økter. Hver økt har en varighet på 5 sekunder. Økten med den høyeste CLS-scoren vil bli den endelige CLS-scoren.
Hvis for eksempel den første 5 sekundene CLS-scoren er 0,095, deretter i de neste 5 sekundene er CLS 0,15 og for den siste økten er CLS-scoren 0. Den endelige CLS-scoren vil være den høyeste av de tre: 0,15.

En rask påminnelse: CLS og Core Web Vitals!

Cumulative Layout Shift (CLS) er en viktig, brukersentrert metrikk for måling av visuell stabilitet. Cumulative Layout Shift (CLS) er en del av Core Web Vitals sammen med First Contentful Paint, Largest Contentful Paint og First Input Delay.

Hvordan måle CLS-problemer

1. Bruk Lighthouse til å finne Cumulative Layout Shift

Den enkleste metoden for å finne layoutforskyvninger er å bruke Lighthouse i din egen Chrome-nettleser. Kjør bare en Lighthouse-revisjon ved å høyreklikke hvor som helst på siden. Velg deretter inspiser-element, velg Lighthouse-fanen i den nå åpnede konsollen og kjør revisjonen

Revisjonsresultatene vil vise Cumulative Layout Shift (CLS)-scoren. Bla ned til Diagnostikk og utvid Cumulative Layout Shift-informasjonen for å se hvilke noder som forårsaker layoutforskyvningen.

For å være ærlig bruker jeg aldri denne metoden selv. Mangelen på detaljer om den nøyaktige avstanden til layoutforskyvningen gjør disse resultatene vanskeligere å tolke

2. Bruk CLS Visualizer til å finne Cumulative Layout Shift

CLS Visualizer er en Chrome-utvidelse skrevet av meg. Med et enkelt knappetrykk visualiseres alle layoutforskyvninger på siden. Dette er den første løsningen jeg bruker når jeg prøver å bestemme en layoutforskyvning på en side. Den er enkel og gir en flott visuell oversikt over Cumulative Layout Shift.

3. Bruk Chrome Performance-fanen til å finne CLS

Den desidert beste måten å feilsøke en layoutforskyvning på er gjennom Chrome Performance-fanen. For å åpne Performance-fanen, naviger til en hvilken som helst side i Chrome og bruk denne snarveiskombinasjonen:
- Trykk Ctrl-Shift-I (Åpne utviklerverktøy)
- Trykk Ctrl-Shift-E (Start profilering og last siden på nytt)

Inspiser nå tidslinjen bilde for bilde ved å holde musen over tidslinjen øverst og se etter layoutforskyvninger (layoutforskyvninger er også farget rødt i Experience-delen av Performance-fanen). 

4. Bruk RUM-verktøy som CoreDash

RUM står for Real User Monitoring og RUM-data kan gi verdifull sanntidsinnsikt i Core Web Vitals. RUM-verktøy som CoreDash kan bryte ned Cumulative Layout Shift i segmenter som nettleser, element, navigasjonstype, spesifikk URL eller sidetype. Dette hjelper med å identifisere og fikse dårlig presterende sider og problematiske elementer

Vanlige årsaker til Cumulative Layout Shift og hvordan fikse dem

Opprinnelsen til alle layoutforskyvninger er i bunn og grunn den samme. På et tidspunkt tok et element som var plassert over et annet element opp mer eller mindre plass enn før. Dette skyldes typisk en eller flere av disse årsakene:

• Bilder, iFrames eller videoer
• Annonser
• Injisert innhold
• Animasjoner
• Trege interaksjoner
• Nettfonter

CLS forårsaket av bilder, videoer og iFrames

Layoutforskyvninger forårsaket av bilder, videoer eller iFrames skyldes alltid manglende dimensjoner. Oftest er dette fordi høyden og bredden til elementet ikke er definert i HTML-en. Et vanlig, godt praksis-mønster er å sette den iboende bredden til bildet i HTML-en og bruke styling for å automatisk skalere bildet til å passe i foreldrebeholderen.

<img src="img.jpg" >
<style>
   img{
      max-width:100%;
      height:auto
   }
</style>

Merk at dimensjoner også kan defineres som en style-egenskap eller til og med ved å sette aspect-ratio style-egenskapen.

CLS forårsaket av nettfonter

En Cumulative Layout Shift kan forårsakes av nettfonter. Nettfonter er fonter som ikke er installert på din lokale datamaskin eller telefon, men lastes ned fra internett. Mens nettfonten ennå ikke er lastet ned, rendres siden vanligvis med en fallback-font. Størrelsen på denne fallback-fonten kan avvike fra den endelige fonten. I dette eksempelet er fallback-fonten litt mindre enn den endelige nettfonten.

Det finnes mange metoder for å 'fikse' layoutforskyvningen forårsaket av nettfonter. De er basert på 2 teknikker:

1. Få fallback-fonten til å matche nettfonten bedre. Den mest effektive måten er å overstyre @font-face-beskrivelsene

Den andre måten er å fremskynde nettfontene. Dette gjør dem tilgjengelige for nettleseren før nettleseren begynner å rendre. En vanlig måte å gjøre dette på er å forhåndslaste de kritiske nettfontene dine, 

CLS-problemer forårsaket av trege brukerinteraksjoner

I eksempelet nedenfor utløser last inn mer-knappen tydelig en layoutforskyvning. Layoutforskyvningen vil imidlertid ikke bli lagt til CLS-metrikken. Dette er fordi denne layoutforskyvningen er tilsiktet

En nettleser vil vite dette fordi de nå synlige elementene har et attributt kalt 'hadRecentInput'. Når dette er satt til true OG layoutforskyvningen skjer innen 500 ms etter input-hendelsen (knappeklikket) vil layoutforskyvningen ikke bli rapportert av nettleseren.

Sørg for at brukerinteraksjoner fullføres innen 500 ms

CLS-problemer forårsaket av AJAX

AJAX lar nettsider oppdateres asynkront ved å utveksle data med en webserver i bakgrunnen. Å injisere nytt innhold i en nettside kan åpenbart føre til en massiv layoutforskyvning. Det er derfor det er lurt å reservere plassen som brukes til det nye innholdet. Du kjenner åpenbart ikke høyden til det nye innholdet på forhånd, men det du kan gjøre er å ta et kvalifisert estimat.

For eksempel, hvis det gjennomsnittlige AJAX-innholdet tar opp 50% av skjermen, er det lurt å reservere de 50%. Når det nye innholdet ender opp med å ta opp 40 eller 60% av skjermen, er CLS (50% - 40% = 10% distance-fraction) fortsatt mye mindre enn 50% distance-fraction.

Her er et eksempel på hvordan du gjør dette:

<style>
   #ajax{height:400px}
   #ajax.loaded{height:auto;}
</style>
<script>
   fetch('/ajax-content)
   .then(response => response.json())
   .then(result => {
      let el = document.getElementById('ajax');
      el.innerHTML(result.html);
      el.classList.add('loaded');
   })
<script>

Fiks CLS-problemer forårsaket av annonser

Annonser lastes ofte (mye) senere på siden. Dette gjør Cumulative Layout Shift forårsaket av annonser spesielt irriterende. Når flere annonser lastes inn i det synlige visningsområdet, 'vil siden bare ikke holde seg i ro'. For å fikse dette, reserver også plassen til annonsene, spesielt annonsene i det synlige visningsområdet.

<style>
// rectangle mobile ad
.ad{min-height:250px;background:#dedede}
// banner desktop ad
@media only screen and (min-width: 600px) {
.ad{min-height:90px}
}
</style>