CLS (Kumuliacinis maketų poslinkis)
CLS matuoja bendrą netikėtus maketų poslinkius, įvykusius viso puslapio gyvavimo ciklo metu, kiekybiškai įvertindamas, kiek matomo turinio netikėtai pajuda.
Cumulative Layout Shift (CLS) yra vienas iš „Core Web Vital“ rodiklių, matuojantis vizualinį stabilumą. Jis įvertina, kiek turinys puslapyje netikėtai pasislenka jį kraunant. Išdėstymo poslinkis įvyksta, kai matomas elementas pakeičia savo padėtį nuo vieno atvaizdavimo kadrą iki kito be vartotojo sąveikos.
Dažnos išdėstymo poslinkių priežastys: vaizdai ir vaizdo įrašai be nurodytų matmenų (naršyklė nežino, kiek vietos rezervuoti, kol jie atsikrauna), dinamiškai kraunami skelbimai ar integruoti moduliai, stumiantys turinį žemyn, internetiniai šriftai, sukeliantys teksto dydžio pokyčius kraunantis („Flash of Unstyled Text“) ir turinys, kuris dinamiškai įterpiamas virš esamo turinio.
Praktikoje
- Naujienų svetainė sumažino savo CLS nuo 0,42 iki 0,05 rezervuodama vietą skelbimų blokams ir pridėdama matmenis visiems vaizdams, kas lėmė 30 % ilgesnį vidutinį skaitymo laiką
- E. prekybos produkto puslapio CLS buvo 0,35, nes klientų atsiliepimų žvaigždutės įsikėlė vėlai ir nustūmė mygtuką „Pridėti į krepšelį“ žemyn, sukeldamos klaidingus paspaudimus; tai sutvarkius, pridėjimo į krepšelį rodiklis pagerėjo 8 %
- Tinklaraštis išsprendė CLS problemą, kurią sukėlė vėlai kraunamasi internetiniai šriftai, iš anksto paruošdamas šrifto failą ir naudodamas font-display: optional, taip visiškai eliminuodamas teksto išdėstymo poslinkius
- Landing page rezervavo fiksuotus matmenis vaizdo įrašo integracijai, kuri prieš tai verždavo žemiau esantį turinį, taip sumažindama CLS nuo 0,28 iki 0,02
Daugiau apie: Veikimas
Neaišku, kaip tai taikoma Jums?
Vyresnysis inžinierius apžiūrės Jūsų svetainę, paieškos pozicijas ir užklausų gavimo būdą, tada užrašys tris dalykus, kuriuos verta pataisyti pirmiausia. Dokumentą paliekate sau.