Hvad er Cumulative Layout Shift (CLS) og hvordan fikser du det

Hvad er Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) repræsenterer 'den visuelle stabilitet'-del af Core Web Vitals. Cumulative Layout Shift (CLS) måler bevægelserne på siden, når indhold renderes eller nyt indhold vises på siden. Den beregner en score baseret på, hvor meget af siden der uventet bevæger sig, og hvor langt det bevæger sig. Disse forskydninger af indhold er meget irriterende og kan få dig til at miste dit sted i en artikel, du er begyndt at læse, eller endnu værre, få dig til at klikke på den forkerte knap!

Betydningen af CLS for webperformance og user experience

Cumulative Layout Shift (CLS) er knyttet til både webperformance og user experience, fordi det direkte påvirker, hvor stabilt og forudsigeligt en webside føles under indlæsning. Her er grunden til, at det er vigtigt:

• UX, engagement og brandopfattelse:  Uventede layoutforskydninger forstyrrer brugerflowet og gør det sværere at finde information, klikke på knapper og interagere med siden som tiltænkt. Denne frustration kan føre til dårlige oplevelser, hvor brugere forlader websitet helt.
  Et websites user experience afspejler brandet bag det. Hyppige layoutforskydninger kan give indtrykket af et dårligt designet eller vedligeholdt website, forstyrre brugerengagementet, hvilket fører til nedsat interaktion og potentielt højere afvisningsprocenter.
  
• Tilgængelighed: Layoutforskydninger kan være særligt forstyrrende for brugere med handicap, der er afhængige af hjælpeteknologier eller skærmlæsere. Et stabilt layout sikrer, at alle kan navigere og interagere med websitet effektivt.
  
• SEO og søgerangering: Core Web Vitals er en lille, men betydelig rangeringsfaktor hos Google. Google prioriterer sammen med andre søgemaskiner websites, der tilbyder en god user experience. CLS er en af de Core Web Vitals-metrikker, som Google tager i betragtning ved rangering af websites. Optimering af CLS kan give dit website en konkurrencefordel i søgeresultaterne.
  

Hvordan måles CLS?

CLS på en side kan måles med Layout Instability API. Følgende er en simpel brug af denne API

Beregning af CLS

CLS beregnes nemt ved hjælp af en simpel, men elegant formel:

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

Impact-fraktionen måler, hvor meget af det synlige indhold på siden der har forskudt sig. Distance-fraktionen måler, hvor langt indholdet har forskudt sig. Hvis f.eks. 50% af siden (hvor meget) har forskudt sig 25% (hvor langt) af viewporten på siden. CLS-scoren = 0,50 * 0,25 = 0,125

Forventede VS uventede layoutforskydninger

Ikke alle layoutforskydninger er dårlige, kun dem du ikke forventer. Når du klikker på et 'indlæs flere elementer'-link, forventer du f.eks., at flere elementer vises på siden, og at indholdet på siden forskyder sig.

Derfor vil kun uventede layoutforskydninger bidrage til CLS. Hvis en bruger f.eks. klikker på en knap, og nyt indhold tilføjes som respons (f.eks. en dropdown-menu), vil layoutforskydningen blive udelukket fra CLS. For at være præcis:
Layoutforskydninger, der forekommer inden for 500 millisekunder efter brugerinput, udelukkes fra beregningerne

Layoutforskydningssessioner

Da CLS først blev introduceret, blev nogle sites uretfærdigt straffet med en dårlig CLS-score. F.eks. ville en side med uendelig scrolling have fået virkningen af det nyligt tilføjede indhold lagt til den samlede CLS-score for hver ny scrolling. Derfor beregnes CLS nu i sessioner. Hver session har en varighed på 5 sekunder. Sessionen med den højeste CLS-score bliver den endelige CLS-score.
Hvis f.eks. CLS-scoren i de første 5 sekunder er 0,095, derefter i den næste 5-sekunders session er CLS 0,15, og for den sidste session er CLS-scoren 0. Den endelige CLS-score vil være den højeste af de tre: 0,15.

En hurtig påmindelse: CLS og Core Web Vitals!

Cumulative Layout Shift (CLS) er en vigtig, brugercentreret metrik til måling af visuel stabilitet. Cumulative Layout Shift (CLS) er en del af Core Web Vitals sammen med First Contentful Paint, Largest Contentful Paint og First Input Delay.

Sådan måler du CLS-problemer

1. Brug Lighthouse til at finde Cumulative Layout Shifts

Den nemmeste metode til at finde layoutforskydninger er ved at bruge Lighthouse i din egen Chrome-browser. Kør blot en Lighthouse-audit ved at højreklikke hvor som helst på siden. Vælg derefter inspecér-element, vælg Lighthouse-fanen i den nu åbnede konsol og kør auditten.

Auditresultaterne viser Cumulative Layout Shift (CLS)-scoren. Scroll ned til Diagnostik og udvid Cumulative Layout Shift-informationen for at se, hvilke noder der forårsager layoutforskydningen.

Ærligt talt bruger jeg aldrig rigtig denne metode selv. Manglen på detaljer om den præcise afstand af layoutforskydningen gør disse resultater sværere at fortolke.

2. Brug CLS Visualizer til at finde Cumulative Layout Shifts

CLS Visualizer er en Chrome-udvidelse skrevet af mig. Med et enkelt klik visualiseres alle layoutforskydninger på siden. Dette er den første løsning, jeg går til, når jeg forsøger at bestemme en layoutforskydning på en side. Det er nemt og giver et godt visuelt overblik over Cumulative Layout Shift.

3. Brug Chrome Performance-fanen til at finde CLS

Den absolut bedste måde at debugge en layoutforskydning på er gennem Chrome Performance-fanen. For at åbne Performance-fanen navigér til en vilkårlig side i Chrome og brug denne genvejskombination:
- Tryk Ctrl-Shift-I (Åbn Dev Tools)
- Tryk Ctrl-Shift-E (Start profilering og genindlæs side)

Inspicer nu tidslinjen billede for billede ved at holde musen over tidslinjen øverst og kig efter layoutforskydninger (layoutforskydninger er også markeret med rødt i Experience-sektionen af Performance-fanen). 

4. Brug RUM-værktøjer som Core/Dash

RUM står for Real User Monitoring, og RUM-data kan give værdifulde realtidsindsigter i Core Web Vitals. RUM-værktøjer som Core/Dash kan opdele Cumulative Layout Shifts i segmenter som browser, element, navigationstype, specifik URL eller sidetype. Dette hjælper med at identificere og rette dårligt præsterende sider og problematiske elementer.

Almindelige årsager til Cumulative Layout Shift og hvordan du retter dem

Oprindelsen af alle layoutforskydninger er grundlæggende den samme. På et tidspunkt optog et element, der var placeret over et andet element, mere eller mindre plads end før. Dette skyldes typisk en eller flere af disse årsager:

• Billeder, iFrames eller videoer
• Annoncer
• Injiceret indhold
• Animationer
• Langsomme interaktioner
• Webfonts

CLS forårsaget af billeder, videoer og iFrames

Layoutforskydninger forårsaget af billeder, videoer eller iFrames skyldes altid manglende dimensioner. Oftest er dette, fordi højden og bredden af elementet ikke er defineret i HTML'en. Et almindeligt og godt praksis-mønster er at sætte den indre bredde af billedet i HTML'en og bruge styling til automatisk at skalere billedet til dets overordnede container.

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

Bemærk, at dimensioner også kan defineres som en style-egenskab eller endda ved at sætte aspect-ratio style-egenskaben.

CLS forårsaget af webfonts

En Cumulative Layout Shift kan forårsages af webfonts. Webfonts er skrifttyper, der ikke er installeret på din lokale computer eller telefon, men downloadet fra internettet. Mens webfonten endnu ikke er downloadet, renderes siden normalt med en fallback-skrifttype. Størrelsen på denne fallback-skrifttype kan afvige fra den endelige skrifttype. I dette eksempel er fallback-skrifttypen lidt mindre end den endelige webfont.

Der er mange metoder til at 'rette' layoutforskydningen forårsaget af webfonts. De er baseret på 2 teknikker:

1. Gør fallback-skrifttypen mere lig webfonten. Den mest effektive måde er ved at overskrive @font-face-deskriptorerne

Den anden måde er ved at fremskynde webfontene. Dette gør dem tilgængelige for browseren, før browseren begynder at rendere. En almindelig måde at gøre dette på er at preloade dine kritiske webfonts. 

CLS-problemer forårsaget af langsomme brugerinteraktioner

I eksemplet nedenfor udløser 'indlæs mere'-knappen tydeligt en layoutforskydning. Layoutforskydningen vil dog ikke blive tilføjet til CLS-metrikken. Dette skyldes, at denne layoutforskydning er tilsigtet.

En browser vil vide dette, fordi de nu synlige elementer har en attribut kaldet 'hadRecentInput'. Når denne er sat til true, OG layoutforskydningen sker inden for 500 ms efter inputhændelsen (knapklikket), vil layoutforskydningen ikke blive rapporteret af browseren.

Sørg for, at brugerinteraktioner afsluttes inden for 500 ms

CLS-problemer forårsaget af AJAX

AJAX gør det muligt for websider at blive opdateret asynkront ved at udveksle data med en webserver i baggrunden. At injicere nyt indhold i en webside kan naturligvis føre til en massiv layoutforskydning. Derfor er det klogt at reservere den plads, der bruges til det nye indhold. Du kender naturligvis ikke højden af det nye indhold på forhånd, men du kan lave et kvalificeret gæt.

Hvis det gennemsnitlige AJAX-indhold f.eks. fylder 50% af skærmen, er det klogt at reservere de 50%. Når det nye indhold ender med at fylde 40 eller 60% af skærmen, er CLS (50% - 40% = 10% distance-fraction) stadig meget mindre end 50% distance-fraction.

Her er et eksempel på, hvordan du gø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>

Ret CLS-problemer forårsaget af annoncer

Annoncer indlæses ofte (meget) senere på siden. Dette gør Cumulative Layout Shifts forårsaget af annoncer særligt irriterende. Når flere annoncer indlæses i den synlige viewport, 'vil siden bare ikke holde sig stille'. For at rette dette skal du også reservere pladsen til annoncerne, især annoncerne i den synlige viewport.

<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>