SEO-sanasto
CLS (Cumulative Layout Shift)
CLS mittaa sivun visuaalista vakautta eli sitä, kuinka paljon sivun elementit siirtyvät yllättävästi latauksen aikana.
CLS (Cumulative Layout Shift) on Core Web Vitals -mittari, joka kertoo, kuinka paljon sivun sisältö liikkuu odottamattomasti käyttäjän näkökulmasta. Google pitää alle 0,1:n CLS-arvoa hyvänä.
Tyypillisiä CLS-ongelmien aiheuttajia ovat kuvat ja videot ilman määriteltyjä mittoja, dynaamisesti latautuvat mainokset, fontit jotka vaihtuvat latauksen aikana sekä sisältö joka lisätään sivulle DOM-manipulaatiolla. Näissä tapauksissa sivun elementit siirtyvät, kun uusi sisältö ilmestyy ja työntää muita elementtejä pois paikaltaan.
CLS-arvoa voi parantaa selkeillä toimenpiteillä. Kuville ja videoille kannattaa aina määrittää leveys ja korkeus (width/height) tai käyttää CSS:n aspect-ratio-ominaisuutta. Fonttien latauksessa font-display: swap -asetus vähentää hyppimistä. Mainoksille ja dynaamiselle sisällölle tulee varata tila etukäteen CSS:llä.
Huono CLS ärsyttää käyttäjiä konkreettisesti: painike siirtyy juuri kun sitä ollaan klikkaamassa, tai luettava teksti hyppää pois näkyvistä. Tämä heikentää käyttäjäkokemusta ja voi johtaa virheellisiin klikkauksiin. CLS on helposti vältettävissä huolellisella suunnittelulla.