CLS (Cumulative Layout Shift) on yksi Googlen Core Web Vitals -mittareista. Se mittaa sivun visuaalista vakautta arvioimalla, kuinka paljon sivun elementit liikkuvat odottamattomasti käyttäjän näkökentässä sivun latautumisen aikana.
Miksi visuaalinen vakaus on tärkeää?
Odottamattomat layout-siirrot ovat turhauttava käyttökokemus. Tyypillinen tilanne on, kun käyttäjä on juuri klikkaamassa linkkiä tai painiketta, mutta latautuva kuva tai mainos työntää sisältöä alaspäin, ja käyttäjä klikkaakiin väärää elementtiä. Tämä voi johtaa tahattomiin ostoihin, väärille sivuille navigointiin tai yksinkertaisesti turhautumiseen.
CLS arvioi näitä siirtymiä numeerisesti. Jokainen odottamaton elementtien liike kasvattaa CLS-arvoa. Google laskee yhteen kaikki yksittäiset layout-siirtymät sivun elinkaaren aikana ja raportoi yhteenlasketun arvon.
CLS:n tavoitearvot
Google luokittelee CLS-arvot kolmeen kategoriaan. Hyvä CLS-arvo on alle 0,1. Parannusta vaativa arvo on 0,1–0,25. Huono arvo on yli 0,25. Tavoitteena on, että 75 % sivulatauksista saavuttaa hyvän CLS-arvon.
CLS-arvo 0 tarkoittaa, että sivulla ei tapahdu lainkaan odottamattomia layout-siirtymiä. Tämä on ihanteellinen tilanne ja saavutettavissa huolellisella suunnittelulla.
Yleisimmät CLS-ongelmat ja ratkaisut
Suurimmat CLS-ongelmien aiheuttajat ovat kuvat ja videot ilman koko-attribuutteja, dynaamisesti ladattavat mainokset, web-fontit, jotka aiheuttavat tekstin “vilkkumista” (FOUT/FOIT), ja dynaamisesti lisättävät DOM-elementit.
Kuvat ja videot: Määritä aina width- ja height-attribuutit tai käytä CSS:n aspect-ratio-ominaisuutta. Näin selain varaa oikean tilan elementille ennen sen latautumista.
Mainokset: Varaa mainospaikoille kiinteä tila CSS:llä, vaikka mainos ei olisi vielä latautunut. Vältä mainosten sijoittamista sivun yläosaan.
Web-fontit: Käytä font-display: swap -ominaisuutta ja lataa fontit ennakkoon <link rel="preload">-tagilla. Harkitse varafontien koon sovittamista (size-adjust) vastaamaan web-fonttia.
Yhteenveto
CLS mittaa käyttökokemuksen vakautta ja on tärkeä osa Core Web Vitalsia. Pk-yrityksen sivustolla CLS-ongelmat ratkaistaan pääasiassa lisäämällä kuvien koko-attribuutit, varaamalla tilaa dynaamisille elementeille ja optimoimalla fonttien lataus. Vakaa sivu tarjoaa paremman käyttökokemuksen ja paremman hakukonenäkyvyyden.