CLS (Kumulatiivinen asettelusiirtymä)
CLS mittaa kaikkia odottamattomia asettelusiirtymiä, jotka tapahtuvat sivun koko elinkaaren aikana, kvantifioiden kuinka paljon näkyvää sisältöä siirtyy yllättäen.
Kumulatiivinen asettelusiirtymä (CLS) on yksi keskeisestä web-vitaliteetista, joka mittaa visuaalista vakautta. Se kvantifioi, kuinka paljon sivun sisältö liikkuu yllättäen sen latautuessa. Asettelusiirtymä tapahtuu, kun näkyvä elementti muuttaa sijaintiaan yhdestä renderöidystä ruudusta seuraavaan ilman käyttäjän vuorovaikutusta.
Asettelusiirtymien yleisiä syitä ovat kuvat ja videot ilman mitta-arvoja (selain ei tiedä, kuinka paljon tilaa varata ennen niiden latautumista), mainokset tai upotteet, jotka latautuvat dynaamisesti ja työntävät sisältöä alaspäin, verkkosanat, jotka aiheuttavat tekstin uudelleenkokoantumisen latautuessaan (Flash of Unstyled Text) ja sisältö, joka lisätään dynaamisesti olemassa olevan sisällön yläpuolelle.
Käytännössä
- Uutissivusto pienensi CLS-arvoaan 0,42:sta 0,05:een varaamalla tilaa mainospaikkoille ja lisäämällä mitat kaikille kuville, mikä johti 30 % pidempään keskimääräiseen lukuaikaan
- Verkkokaupan tuotesivun CLS oli 0,35, koska asiakasarvostelujen tähdet latautuivat myöhään ja työnsivät "Lisää ostoskoriin" -painiketta alaspäin aiheuttaen väärinklikkauksia; korjaus paransi ostoskoriin lisäämisen määrää 8 %
- Blogi korjasi CLS-ongelmansa, joka johtui verkkofonttien myöhäisestä latautumisesta, esilataamalla fonttitiedoston ja käyttämällä font-display: optional -asetusta, poistaen tekstin asettelusiirtymät kokonaan
- Maasivu varasi kiinteät mitat videoupotteelle, joka aiheutti sen alapuolella olevan sisällön hyppimisen, tuoden CLS:n arvosta 0,28 arvoon 0,02
Et ole varma, miten tämä koskee sinua?
Kokenut insinööri käy läpi kohteen, hakukoneesi esiintymisen ja yhteydenottojen saannin, ja kirjoittaa kolme asiaa, jotka kannattaa korjata ensin. Pidät dokumentin joka tapauksessa.