Mikä on Cumulative Layout Shift (CLS) ja miten se korjataan

Mikä on Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) edustaa Core Web Vitals -mittariston 'visuaalista vakautta'. Cumulative Layout Shift (CLS) mittaa sivun liikkeitä, kun sisältö renderöityy tai uutta sisältöä näytetään sivulla. Se laskee pistemäärän sen perusteella, kuinka suuri osa sivusta liikkuu odottamattomasti ja kuinka pitkälle se siirtyy. Nämä sisällön siirtymät ovat erittäin ärsyttäviä, sillä ne voivat saada sinut menettämään paikkasi lukemassasi artikkelissa tai, mikä vielä pahempaa, klikkaamaan väärää painiketta!

CLS:n merkitys verkkosivujen suorituskyvyssä ja user experience -näkökulmasta

Cumulative Layout Shift (CLS) liittyy sekä verkkosivujen suorituskykyyn että user experience -kokemukseen, koska se vaikuttaa suoraan siihen, kuinka vakaalta ja ennustettavalta verkkosivu tuntuu latauksen aikana. Tässä on syyt, miksi sillä on merkitystä:

• UX, sitoutuminen ja brändimielikuva:  Odottamattomat asettelun siirtymät häiritsevät käyttäjän toimintaa, vaikeuttaen tiedon löytämistä, painikkeiden klikkaamista ja sivun kanssa vuorovaikuttamista tarkoitetulla tavalla. Tämä turhautuminen voi johtaa huonoihin kokemuksiin, joissa käyttäjät hylkäävät verkkosivuston kokonaan.
  Verkkosivuston user experience heijastaa sen takana olevaa brändiä. Toistuvat asettelun siirtymät voivat antaa vaikutelman huonosti suunnitellusta tai ylläpidetystä verkkosivustosta, häiritä käyttäjien sitoutumista, mikä johtaa vähentyneeseen vuorovaikutukseen ja mahdollisesti korkeampiin välittömän poistumisen lukuihin.
  
• Saavutettavuus: Asettelun siirtymät voivat olla erityisen häiritseviä käyttäjille, joilla on vammoja ja jotka käyttävät avustavia teknologioita tai ruudunlukijoita. Vakaa asettelu varmistaa, että kaikki voivat navigoida ja vuorovaikuttaa verkkosivuston kanssa tehokkaasti.
  
• SEO ja hakukonesijoitukset: Core Web Vitals on pieni mutta merkittävä sijoitustekijä Googlessa. Google ja muut hakukoneet suosivat verkkosivustoja, jotka tarjoavat hyvän user experience -kokemuksen. CLS on yksi Core Web Vitals -mittareista, jotka Google ottaa huomioon verkkosivustoja sijoittaessaan. CLS:n optimointi voi antaa verkkosivustollesi kilpailuedun hakutuloksissa.
  

Miten CLS mitataan?

Sivun CLS voidaan mitata Layout Instability API:lla. Seuraavassa on yksinkertainen esimerkki tämän API:n käytöstä

CLS:n laskeminen

CLS lasketaan helposti yksinkertaisella mutta tehokkaalla kaavalla:

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

Impact fraction mittaa, kuinka suuri osa sivun näkyvästä sisällöstä on siirtynyt. Distance fraction mittaa, kuinka pitkälle sisältö on siirtynyt. Jos esimerkiksi 50 % sivusta (kuinka paljon) on siirtynyt 25 % (kuinka pitkälle) sivun näkymästä. CLS-pistemäärä = 0.50 * 0.25 = 0.125

Odotetut vs. odottamattomat asettelun siirtymät

Kaikki asettelun siirtymät eivät ole huonoja, ainoastaan ne, joita et odota. Kun klikkaat esimerkiksi 'lataa lisää kohteita' -linkkiä, odottaisit lisää kohteita ilmestyvän sivulle ja sivun sisällön siirtyvän.

Siksi vain odottamattomat asettelun siirtymät aiheuttavat CLS-kontribuution. Jos käyttäjä esimerkiksi klikkaa painiketta ja vastauksena sivulle lisätään uutta sisältöä (esimerkiksi pudotusvalikko), asettelun siirtymä jätetään pois CLS:stä. Tarkemmin sanottuna:
Asettelun siirtymät, jotka tapahtuvat 500 millisekunnin sisällä käyttäjän syötteestä, jätetään pois laskelmista

Asettelun siirtymäsessiot

Kun CLS esiteltiin ensimmäisen kerran, joitakin sivustoja rangaistiin epäreilusti huonolla CLS-pistemäärällä. Esimerkiksi sivu, joka käyttää ääretöntä vieritystä, olisi saanut uuden lisätyn sisällön vaikutuksen lisättyä kokonais-CLS-pistemäärään jokaisella uudella vierityksellä. Siksi CLS lasketaan nyt sessioissa. Jokaisella sessiolla on 5 sekunnin kesto. Suurimman CLS-pistemäärän saanut sessio tulee lopulliseksi CLS-pistemääräksi.
Jos esimerkiksi ensimmäisten 5 sekunnin aikana CLS-pistemäärä on 0.095, seuraavassa 5 sekunnin sessiossa CLS on 0.15 ja viimeisessä sessiossa CLS-pistemäärä on 0. Lopullinen CLS-pistemäärä on näistä kolmesta korkein: 0.15.

Muistutus: CLS ja Core Web Vitals!

Cumulative Layout Shift (CLS) on tärkeä, käyttäjäkeskeinen mittari visuaalisen vakauden mittaamiseen. Cumulative Layout Shift (CLS) on osa Core Web Vitals -mittaristoa yhdessä First Contentful Paint, Largest Contentful Paint ja First Input Delay -mittareiden kanssa.

Miten CLS-ongelmia mitataan

1. Käytä Lighthouse-työkalua Cumulative Layout Shift -ongelmien löytämiseen

Helpoin tapa löytää asettelun siirtymiä on käyttää Lighthouse-työkalua omassa Chrome-selaimessasi. Suorita Lighthouse-auditointi klikkaamalla hiiren oikealla painikkeella mitä tahansa kohtaa sivulla. Valitse sitten tarkasta elementti, valitse Lighthouse-välilehti nyt avautuneessa konsolissa ja suorita auditointi.

Auditoinnin tulokset näyttävät Cumulative Layout Shift (CLS) -pistemäärän. Vieritä alas Diagnostics-osioon ja laajenna Cumulative Layout Shift -tiedot nähdäksesi, mitkä elementit aiheuttavat asettelun siirtymän.

Rehellisesti sanottuna en itse juurikaan käytä tätä menetelmää. Tarkkojen asettelun siirtymän etäisyystietojen puuttuminen tekee näistä tuloksista vaikeampia tulkita.

2. Käytä CLS Visualizer -laajennusta Cumulative Layout Shift -ongelmien löytämiseen

CLS Visualizer on kirjoittamani Chrome-laajennus. Yhdellä painikkeen klikkauksella kaikki sivun asettelun siirtymät visualisoidaan. Tämä on ensimmäinen ratkaisu, johon turvaudun yrittäessäni määrittää sivun asettelun siirtymää. Se on helppo ja antaa erinomaisen visuaalisen yleiskuvan Cumulative Layout Shift -mittarista.

3. Käytä Chromen Performance-välilehteä CLS-ongelmien löytämiseen

Ylivoimaisesti paras tapa debugata asettelun siirtymää on Chromen Performance-välilehden kautta. Avataksesi Performance-välilehden siirry mille tahansa sivulle Chromessa ja käytä tätä pikanäppäinyhdistelmää:
- Paina Ctrl-Shift-I (Avaa kehittäjätyökalut)
- Paina Ctrl-Shift-E (Aloita profilointi ja lataa sivu uudelleen)

Tarkastele nyt aikajanaa ruutu ruudulta viemällä hiiri aikajanan päälle yläreunassa ja etsi asettelun siirtymiä (asettelun siirtymät on myös merkitty punaisella Performance-välilehden Experience-osiossa). 

4. Käytä RUM-työkaluja kuten CoreDash

RUM tarkoittaa Real User Monitoring -mittausta ja RUM-data voi tarjota arvokkaita reaaliaikaisia näkemyksiä Core Web Vitals -mittareista. RUM-työkalut kuten CoreDash voivat eritellä Cumulative Layout Shift -mittarin segmentteihin kuten selain, elementti, navigointityyppi, tietty URL tai sivutyyppi. Tämä auttaa tunnistamaan ja korjaamaan huonosti suoriutuvat sivut ja ongelmalliset elementit.

Yleisimmät Cumulative Layout Shift -ongelmat ja niiden korjaaminen

Kaikkien asettelun siirtymien alkuperä on pohjimmiltaan sama. Jossain vaiheessa elementti, joka oli sijoitettu toisen elementin yläpuolelle, vei enemmän tai vähemmän tilaa kuin aiemmin. Tämä johtuu tyypillisesti yhdestä tai useammasta seuraavista syistä:

• Kuvat, iFrame-elementit tai videot
• Mainokset
• Injektoitu sisältö
• Animaatiot
• Hitaat vuorovaikutukset
• Verkkofontit

Kuvien, videoiden ja iFrame-elementtien aiheuttamat CLS-ongelmat

Kuvien, videoiden tai iFrame-elementtien aiheuttamat asettelun siirtymät johtuvat aina puuttuvista mitoista. Yleisimmin tämä johtuu siitä, että elementin korkeutta ja leveyttä ei ole määritelty HTML:ssä. Yleinen hyvä käytäntö on asettaa kuvan luontainen leveys HTML:ssä ja käyttää tyylejä skaalaamaan kuva automaattisesti sopimaan sen yläelementtiin.

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

Huomaa, että mitat voidaan määritellä myös style-ominaisuutena tai jopa asettamalla aspect-ratio -tyylimääritys.

Verkkofonttien aiheuttamat CLS-ongelmat

Cumulative Layout Shift voi aiheutua verkkofonteista. Verkkofontit ovat fontteja, jotka eivät ole asennettuna paikalliselle tietokoneellesi tai puhelimeesi, vaan ne ladataan internetistä. Kun verkkofonttia ei ole vielä ladattu, sivu renderöidään yleensä fallback-fontilla. Tämän fallback-fontin koko voi poiketa lopullisesta fontista. Tässä esimerkissä fallback-fontti on hieman pienempi kuin lopullinen verkkofontti.

Verkkofonttien aiheuttaman asettelun siirtymän 'korjaamiseen' on monia menetelmiä. Ne perustuvat kahteen tekniikkaan:

1. Tee fallback-fontista verkkofonttia vastaavampi. Tehokkain tapa on ylikirjoittaa @font-face-määritykset.

Toinen tapa on nopeuttaa verkkofonttien lataamista. Tämä tekee ne selaimelle saataville ennen kuin selain aloittaa renderöinnin. Yleinen tapa tehdä tämä on esilatata kriittiset verkkofontit. 

Hitaiden käyttäjävuorovaikutusten aiheuttamat CLS-ongelmat

Alla olevassa esimerkissä "lataa lisää" -painike aiheuttaa selvästi asettelun siirtymän. Asettelun siirtymää ei kuitenkaan lisätä CLS-mittareihin. Tämä johtuu siitä, että asettelun siirtymä on tarkoituksellinen.

Selain tietää tämän, koska nyt näkyvissä olevilla elementeillä on attribuutti nimeltä 'hadRecentInput'. Kun tämä on asetettu arvoon true JA asettelun siirtymä tapahtuu 500 ms:n sisällä syötetapahtumasta (painikkeen klikkauksesta), selain ei raportoi asettelun siirtymää.

Varmista, että käyttäjävuorovaikutukset valmistuvat 500 ms:n sisällä

AJAX:n aiheuttamat CLS-ongelmat

AJAX mahdollistaa verkkosivujen asynkronisen päivittämisen vaihtamalla dataa verkkopalvelimen kanssa taustalla. Uuden sisällön injektoiminen mille tahansa verkkosivulle voi luonnollisesti johtaa merkittävään asettelun siirtymään. Siksi on viisasta varata tilaa uudelle sisällölle. Et tietenkään tiedä uuden sisällön korkeutta etukäteen, mutta voit tehdä perustellun arvion.

Jos esimerkiksi keskimääräinen AJAX-sisältö vie 50 % näytöstä, on viisasta varata tuo 50 %. Kun uusi sisältö vie lopulta 40 tai 60 % näytöstä, CLS (50 % - 40 % = 10 % distance-fraction) on silti huomattavasti pienempi kuin 50 % distance-fraction.

Tässä on esimerkki, miten tämä tehdään:

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

Mainosten aiheuttamien CLS-ongelmien korjaaminen

Mainokset latautuvat usein (huomattavasti) myöhemmin sivulla. Tämä tekee mainosten aiheuttamista Cumulative Layout Shift -ongelmista erityisen ärsyttäviä. Kun useita mainoksia latautuu näkyvässä näkymässä, 'sivu ei yksinkertaisesti pysy paikallaan'. Korjataksesi tämän, varaa tilaa myös mainoksille, erityisesti näkyvässä näkymässä oleville mainoksille.

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