Kumulatiivinen asettelusiirtymä (CLS)

Mikä on kumulatiivinen asettelusiirtymä (CLS)?

Cumulative Layout Shift (CLS) on Googlen kehittämä Core Web Vitals -mittari, jolla mitataan verkkosivun visuaalista vakautta. Se mittaa kaikkien odottamattomien ulkoasun muutosten kokonaismäärää, jotka tapahtuvat sivun koko elinkaaren aikana. Asettelun siirtymiä tapahtuu, kun näkyvä elementti vaihtaa sijaintiaan renderöidystä kehyksestä toiseen.

Miten CLS:ää mitataan

CLS-pisteet vaihtelevat 0:sta, joka tarkoittaa, ettei muutoksia tapahdu, 0:n yläpuolella oleviin arvoihin, jotka osoittavat eriasteista epävakautta. Kaavassa otetaan huomioon kunkin siirtymän vaikutusosuus ja etäisyysosuus ja lasketaan, kuinka paljon elementit liikkuvat ja kuinka suuren osan näkymästä ne peittävät.

CLS-pisteiden tulkinta

• Hyvä: 0 - 0.1
• Tarvitsee parannusta: 0.1 - 0.25
• Huono: yli 0,25

Miksi CLS on tärkeä?

CLS on ratkaisevan tärkeä käyttäjäkokemuksen kannalta, sillä odottamattomat ulkoasun muutokset voivat johtaa käyttäjän turhautumiseen. Jos käyttäjä on esimerkiksi napsauttamassa painiketta ja ulkoasu muuttuu, jolloin hän napsauttaa tahattomasti jotain muuta, käyttäjäkokemus voi olla huono ja konversiot saattavat jäädä tekemättä.

Huonon CLS:n yleiset syyt

1. Kuvat ilman mittoja:

   • Kuvien sisällyttäminen HTML-koodiin määrittelemättä niiden leveyttä ja korkeutta voi aiheuttaa asettelun siirtymiä, koska selain ei tiedä, kuinka paljon tilaa sille aluksi pitäisi varata.

2. Mainokset, sisäkkäiset mainokset ja Iframe-kehykset ilman ulottuvuuksia:

   • Nämä elementit voivat latautua dynaamisesti ja aiheuttaa asettelun siirtymiä, jos niiden mittoja ei määritetä etukäteen.

3. Dynaamisesti lisätty sisältö:

   • Sisällön lisääminen olemassa olevan sisällön yläpuolelle DOM:ssa voi työntää elementtejä alaspäin ja aiheuttaa siirtymiä.

4. FOIT/FOUT:ia aiheuttavat web-fontit:

   • Näkymättömän tekstin välähdys (FOIT) ja tyylittömän tekstin välähdys (FOUT) voivat aiheuttaa asettelun siirtymiä, kun selain lataa www-fontteja.

Parhaat käytännöt CLS:n minimoimiseksi

1. Sisällytä kuvien ja videoiden kokoattribuutit:

   • Määritä aina kuvien ja videoiden leveys ja korkeus HTML-kielessä, jotta asettelussa on tilaa ennen niiden lataamista.

2. Varaa tilaa mainoksille ja upotuksille:

   • Määritä CSS:n avulla mainospaikkojen, iframe-kehysten ja upotusten mitat, jotta vältät asettelun siirtymät niiden latautuessa.

3. Vältä sisällön dynaamista lisäämistä olemassa olevan sisällön yläpuolelle:

   • Lisää uutta sisältöä taiton alapuolelle tai säiliöihin, joissa on jo varattu tilaa.

4. Käytä fontin latausstrategioita:

   • Hyödynnä font-display CSS-ominaisuutta kontrolloidaksesi, miten web-fontit näytetään ja minimoidaksesi FOIT/FOUT:sta johtuvat siirtymät.

5. Käytä CSS-muunnosta animaatioihin:

   • Käytä transform-ominaisuutta ylä-, ala-, vasen- tai oikeanpuoleisen ominaisuuden sijasta animoidaksesi elementtejä aiheuttamatta asettelun siirtymiä.

Päätelmä

Cumulative Layout Shift (CLS) on tärkeä mittari vakaan ja visuaalisesti miellyttävän käyttökokemuksen varmistamisessa. Ymmärtämällä asettelun siirtymiä aiheuttavat tekijät ja ottamalla käyttöön parhaat käytännöt niiden minimoimiseksi voit parantaa verkkosivusi CLS-pistemäärää ja lisätä yleistä käyttäjätyytyväisyyttä.

Lisätietoja CLS:n ja muiden Core Web Vitals -palvelujen parantamisesta saat Googlen Web Vitals -dokumentaatiosta.