Vad är Cumulative Layout Shift (CLS) och hur åtgärdar du det

Vad är Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) representerar 'visuell stabilitet'-delen av Core Web Vitals. Cumulative Layout Shift (CLS) mäter rörelserna på sidan när innehåll renderas eller nytt innehåll visas på sidan. Det beräknar ett poäng baserat på hur mycket av sidan som oväntat rör sig och hur långt det rör sig. Dessa innehållsförskjutningar är mycket irriterande, de gör att du tappar bort var du var i en artikel du börjat läsa eller, ännu värre, får dig att klicka på fel knapp!

Betydelsen av CLS för webbprestanda och user experience

Cumulative Layout Shift (CLS) är kopplat till både webbprestanda och user experience eftersom det direkt påverkar hur stabil och förutsägbar en webbsida känns medan den laddas. Här är varför det är viktigt:

• UX, engagemang och varumärkesuppfattning:  Oväntade layoutförskjutningar stör användarflödet, vilket gör det svårare att hitta information, klicka på knappar och interagera med sidan som avsett. Denna frustration kan leda till dåliga upplevelser där användare överger webbplatsen helt.
  En webbplats user experience återspeglar varumärket bakom den. Frekventa layoutförskjutningar kan ge intryck av en dåligt designad eller underhållen webbplats, störa användarengagemanget vilket leder till minskad interaktion och potentiellt högre avvisningsfrekvenser.
  
• Tillgänglighet: Layoutförskjutningar kan vara särskilt störande för användare med funktionsnedsättningar som förlitar sig på hjälpmedel eller skärmläsare. En stabil layout säkerställer att alla kan navigera och interagera med webbplatsen effektivt.
  
• SEO och sökrankning: Core Web Vitals är en liten men betydande rankningsfaktor i Google. Google, tillsammans med andra sökmotorer, prioriterar webbplatser som erbjuder en bra user experience. CLS är ett av Core Web Vitals-måtten som Google tar hänsyn till vid rankning av webbplatser. Att optimera för CLS kan ge din webbplats en konkurrensfördel i sökresultaten.
  

Hur mäts CLS?

CLS för en sida kan mätas med Layout Instability API. Följande är en enkel användning av detta API

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

Beräkning av CLS

CLS beräknas enkelt med en enkel men elegant formel:

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

Påverkansfraktionen mäter hur mycket av det synliga innehållet på sidan som har förskjutits. Avståndsfraktionen mäter hur långt innehållet har förskjutits. Om till exempel 50% av sidan (hur mycket) har förskjutits 25% (hur långt) av sidans viewport. CLS-poänget = 0,50 * 0,25 = 0,125

Förväntade VS oväntade layoutförskjutningar

Inte alla layoutförskjutningar är dåliga, bara de som du inte förväntar dig. När du klickar på en 'ladda fler objekt'-länk till exempel förväntar du dig att fler objekt dyker upp på sidan och att sidans innehåll förskjuts.

Det är därför bara oväntade layoutförskjutningar bidrar till CLS. Till exempel, om en användare klickar på en knapp och som svar läggs nytt innehåll till på sidan (till exempel en rullgardinsmeny) kommer layoutförskjutningen att exkluderas från CLS. För att vara exakt:
Layoutförskjutningar som sker inom 500 millisekunder efter användarinmatning exkluderas från beräkningarna

Layoutförskjutningssessioner

När CLS först introducerades straffades vissa webbplatser orättvist med ett dåligt CLS-poäng. Till exempel skulle en sida som implementerar oändlig scrollning ha fått effekten av det nyligen tillagda innehållet adderat till det totala CLS-poänget för varje ny scrollning. Det är därför CLS nu beräknas i sessioner. Varje session har en varaktighet på 5 sekunder. Sessionen med det högsta CLS-poänget blir det slutgiltiga CLS-poänget.
Om till exempel under de första 5 sekunderna CLS-poänget är 0,095, sedan i nästa 5-sekunders session är CLS 0,15 och för den sista sessionen är CLS-poänget 0. Det slutgiltiga CLS-poänget blir det högsta av de tre: 0,15.

En snabb påminnelse: CLS och Core Web Vitals!

Cumulative Layout Shift (CLS) är ett viktigt, användarcentrerat mått för att mäta visuell stabilitet. Cumulative Layout Shift (CLS) är en del av Core Web Vitals tillsammans med First Contentful Paint, Largest Contentful Paint och First Input Delay.

Hur man mäter CLS-problem

1. Använd Lighthouse för att hitta Cumulative Layout Shift

Det enklaste sättet att hitta layoutförskjutningar är att använda Lighthouse i din egen Chrome-webbläsare. Kör helt enkelt en Lighthouse-granskning genom att högerklicka var som helst på sidan. Välj sedan inspektera element, välj Lighthouse-fliken i den nu öppnade konsolen och kör granskningen

Granskningsresultaten visar Cumulative Layout Shift (CLS)-poänget. Scrolla ner till Diagnostik och expandera Cumulative Layout Shift-informationen för att se vilka noder som orsakar layoutförskjutningen.

Ärligt talat använder jag aldrig denna metod själv. Bristen på detaljer om det exakta avståndet av layoutförskjutningen gör dessa resultat svårare att tolka

2. Använd CLS Visualizer för att hitta Cumulative Layout Shift

CLS Visualizer är ett Chrome-tillägg skrivet av mig. Med ett enda knappklick visualiseras alla layoutförskjutningar på sidan. Det är den första lösningen jag använder när jag försöker fastställa en layoutförskjutning på en sida. Det är enkelt och ger en bra visuell överblick av Cumulative Layout Shift.

3. Använd Chrome Performance-fliken för att hitta CLS

Det absolut bästa sättet att felsöka en layoutförskjutning är genom Chrome Performance-fliken. För att öppna Performance-fliken, navigera till valfri sida i Chrome och använd denna kortkommandokombination:
- Tryck Ctrl-Shift-I (Öppna Dev Tools)
- Tryck Ctrl-Shift-E (Starta profilering och ladda om sidan)

Inspektera nu tidslinjen bildruta för bildruta genom att hålla musen över tidslinjen längst upp och leta efter layoutförskjutningar (layoutförskjutningar är också färgade röda i Experience-sektionen i Performance-fliken). 

4. Använd RUM-verktyg som Core/Dash

RUM står för Real User Monitoring och RUM-data kan ge värdefulla realtidsinsikter om Core Web Vitals. RUM-verktyg som Core/Dash kan bryta ner Cumulative Layout Shift i segment som webbläsare, element, navigationstyp, specifik URL eller sidtyp. Detta hjälper till att identifiera och åtgärda sidor med dålig prestanda och problematiska element

Vanliga orsaker till Cumulative Layout Shift och hur du åtgärdar dem

Ursprunget till alla layoutförskjutningar är i grunden detsamma. Vid någon tidpunkt tog ett element som var placerat ovanför ett annat element upp mer eller mindre utrymme än tidigare. Detta beror vanligtvis på en eller flera av dessa orsaker:

• Bilder, iFrames eller videor
• Annonser
• Injicerat innehåll
• Animationer
• Långsamma interaktioner
• Webbtypsnitt

CLS orsakad av bilder, videor och iFrames

Layoutförskjutningar orsakade av bilder, videor eller iFrames beror alltid på saknade dimensioner. Vanligast är att höjd och bredd på elementet inte är definierat i HTML. Ett vanligt och bra mönster är att ställa in den inneboende bredden på bilden i HTML och använda styling för att automatiskt skala och anpassa bilden till dess överordnade behållare.

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

Observera att dimensioner också kan definieras som en style-egenskap eller till och med genom att ställa in aspect-ratio style-egenskapen.

CLS orsakad av webbtypsnitt

En kumulativ layoutförskjutning kan orsakas av webbtypsnitt. Webbtypsnitt är typsnitt som inte är installerade på din lokala dator eller telefon utan laddas ner från internet. Medan webbtypsnittet ännu inte har laddats ner renderas sidan vanligtvis med ett fallback-typsnitt. Storleken på detta fallback-typsnitt kan skilja sig från det slutliga typsnittet. I det här exemplet är fallback-typsnittet något mindre än det slutliga webbtypsnittet.

Det finns många metoder för att 'åtgärda' layoutförskjutningen orsakad av webbtypsnitt. De baseras på 2 tekniker:

1. Gör fallback-typsnittet mer likt webbtypsnittet. Det mest effektiva sättet är att åsidosätta @font-face-deskriptorerna

Det andra sättet är att snabba upp webbtypsnitt. Detta gör dem tillgängliga för webbläsaren innan webbläsaren börjar rendera. Ett vanligt sätt att göra detta är att förladda dina kritiska webbtypsnitt, 

CLS-problem orsakade av långsamma användarinteraktioner

I exemplet nedan utlöser knappen 'ladda mer' tydligt en layoutförskjutning. Dock kommer layoutförskjutningen inte att läggas till i CLS-måtten. Detta beror på att denna layoutförskjutning är avsiktlig

En webbläsare vet detta eftersom de nu synliga elementen har ett attribut som kallas 'hadRecentInput'. När detta är satt till true OCH layoutförskjutningen sker inom 500 ms från inmatningshändelsen (knappklicket) kommer layoutförskjutningen inte att rapporteras av webbläsaren.

Säkerställ att användarinteraktioner slutförs inom 500ms

CLS-problem orsakade av AJAX

AJAX gör det möjligt att uppdatera webbsidor asynkront genom att utbyta data med en webbserver i bakgrunden. Att injicera nytt innehåll på en webbsida kan uppenbarligen leda till en massiv layoutförskjutning. Det är därför klokt att reservera utrymmet som används för det nya innehållet. Uppenbarligen vet du inte höjden på det nya innehållet i förväg men du kan göra en kvalificerad uppskattning.

Om till exempel det genomsnittliga AJAX-innehållet tar upp 50% av skärmen är det klokt att reservera dessa 50%. När det nya innehållet tar upp 40 eller 60% av skärmen är CLS (50% - 40% = 10% avståndsfraktion) fortfarande mycket mindre än 50% avståndsfraktion.

Här är ett exempel på hur du gör detta:

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

Åtgärda CLS-problem orsakade av annonser

Annonser laddas ofta (mycket) senare på sidan. Detta gör Cumulative Layout Shift orsakade av annonser särskilt irriterande. När flera annonser laddas i det synliga viewporten 'står sidan helt enkelt inte still'. För att åtgärda detta, reservera även utrymmet för annonserna, särskilt annonserna i det synliga viewporten.

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