Kaupiamasis išdėstymo poslinkis (CLS)

Kas yra kaupiamasis išdėstymo poslinkis (CLS)?

"Cumulative Layout Shift" (CLS) - tai "Google" sukurta "Core Web Vitals" metrika, skirta vizualiniam tinklalapio stabilumui įvertinti. Ji kiekybiškai įvertina visus netikėtus išdėstymo pokyčius, įvykusius per visą puslapio gyvavimo laikotarpį. Išdėstymo poslinkiai įvyksta, kai matomas elementas pakeičia savo padėtį iš vieno atvaizduojamo kadro į kitą.

Kaip matuojamas CLS

CLS balų skaičius svyruoja nuo 0, t. y. nėra jokio poslinkio, iki didesnių nei 0 reikšmių, rodančių įvairaus laipsnio nestabilumą. Formulėje atsižvelgiama į kiekvieno poslinkio poveikio dalį ir atstumo dalį, apskaičiuojant, kiek elementai pasislenka ir kokią matymo srities dalį jie užima.

CLS rezultatų aiškinimas

• Gerai: 0 - 0,1
• Reikia tobulinti: 0.1 - 0.25
• Prastas: daugiau nei 0,25

Kodėl svarbus CLS?

CLS yra labai svarbus naudotojo patirčiai, nes netikėti išdėstymo pokyčiai gali sukelti naudotojo nusivylimą. Pavyzdžiui, jei naudotojas ketina spustelėti mygtuką, o išdėstymas pasikeičia ir naudotojas netyčia spusteli ką nors kita, tai gali lemti prastą naudotojo patirtį ir galimą konversijų praradimą.

Dažniausios prasto CLS priežastys

1. Vaizdai be matmenų:

   • Įtraukus paveikslėlius į HTML nenurodžius jų pločio ir aukščio, gali pasikeisti jų išdėstymas, nes naršyklė nežino, kiek vietos skirti iš pradžių.

2. Skelbimai, įterpiniai ir "Iframe" be matmenų:

   • Šie elementai gali būti įkeliami dinamiškai ir sukelti išdėstymo pokyčius, jei jų matmenys nenurodyti iš anksto.

3. Dinamiškai įvestas turinys:

   • Pridedant turinį virš esamo DOM turinio, elementai gali būti nustumti žemyn, todėl gali atsirasti poslinkių.

4. Žiniatinklio šriftai, sukeliantys FOIT/FOUT:

   • "Flash of Invisible Text" (FOIT) ir "Flash of Unstyled Text" (FOUT) gali sukelti išdėstymo pokyčius, kai naršyklė įkelia žiniatinklio šriftus.

Geriausia CLS mažinimo praktika

1. Įtraukite dydžio požymius į vaizdus ir vaizdo įrašus:

   • Visada HTML faile nustatykite paveikslėlių ir vaizdo įrašų plotį ir aukštį, kad prieš juos įkeliant būtų palikta vietos makete.

2. Rezervuokite vietą skelbimams ir įterpiniams:

   • Naudokite CSS, kad nustatytumėte skelbimų lizdų, iframų ir įterptųjų elementų matmenis ir išvengtumėte išdėstymo poslinkių, kai jie įkeliami.

3. Venkite dinamiškai įterpti turinį virš esamo turinio:

   • Naujo turinio pridėkite po užlenkimu arba į talpyklas, kuriose jau yra rezervuota vieta.

4. Naudokite šrifto įkėlimo strategijas:

   • Naudokite šrifto rodymo CSS savybę, kad valdytumėte, kaip rodomi žiniatinklio šriftai, ir sumažintumėte poslinkius dėl FOIT/FOUT.

5. Naudokite CSS transformaciją animacijoms:

   • Naudokite savybę transformuoti vietoj viršutinės, apatinės, kairiosios arba dešiniosios dalies, kad animuotumėte elementus nesukeldami išdėstymo poslinkių.

Išvada

Kumuliacinis išdėstymo poslinkis (CLS) yra labai svarbus rodiklis užtikrinant stabilią ir vizualiai patrauklią naudotojo patirtį. Suprasdami veiksnius, lemiančius išdėstymo poslinkius, ir įgyvendindami geriausią praktiką jiems sumažinti, galite pagerinti savo tinklalapio CLS rodiklį ir padidinti bendrą naudotojų pasitenkinimą.

Daugiau informacijos apie CLS ir kitų pagrindinių žiniatinklio gyvybinių funkcijų tobulinimą rasite "Google" žiniatinklio gyvybinių funkcijų dokumentuose.