admin 
Kaupiamasis išdėstymo poslinkis (CLS) yra „Google“. Pagrindiniai interneto gyvybiniai rodikliai metrika, įvertinanti naudotojo patirties įvykį.
2021 m. CLS tapo reitingavimo veiksniu, o tai reiškia, kad svarbu suprasti, kas tai yra ir kaip jį optimizuoti.
Kas yra kaupiamasis išdėstymo poslinkis?
CLS yra netikėtas tinklalapio elementų pasikeitimas puslapyje, kai vartotojas slenka arba sąveikauja su juo
Elementai, kurie linkę sukelti poslinkį, yra šriftai, vaizdai, vaizdo įrašai, kontaktų formos, mygtukai ir kitokio pobūdžio turinys.
Svarbu sumažinti CLS, nes besikeičiantys puslapiai gali sukelti prastą vartotojo patirtį.
Prastas CLS balas (žemiau > 0,1) rodo kodavimo problemas, kurias galima išspręsti.
Kas sukelia CLS problemas?
Yra keturios priežastys, kodėl įvyksta kaupiamasis išdėstymo poslinkis:
- Vaizdai be matmenų.
- Skelbimai, įterpimai ir „iframe“ be matmenų.
- Dinamiškai įpurškiamas turinys.
- Žiniatinklio šriftai, sukeliantys FOIT/FOUT.
- CSS arba JavaScript animacija.
Vaizdų ir vaizdo įrašų aukščio ir pločio matmenys turi būti nurodyti HTML. Kad vaizdai būtų jautrūs, įsitikinkite, kad skirtingų vaizdų dydžiai skirtingose peržiūros srityse naudoja tą patį formato koeficientą.
Pažvelkime į kiekvieną iš šių veiksnių, kad suprastume, kaip jie prisideda prie CLS.
Vaizdai be matmenų
Naršyklės negali nustatyti vaizdo matmenų, kol jų neatsisiunčia. Dėl to, susidūręs su<img>HTML žymą, naršyklė negali skirti vietos vaizdui. Toliau pateiktame vaizdo įrašo pavyzdyje tai iliustruoja.
Kai vaizdas atsisiunčiamas, naršyklė turi perskaičiuoti išdėstymą ir skirti vietos, kad vaizdas tilptų, todėl kiti puslapio elementai pasislenka.
Pateikdami pločio ir aukščio atributus žymoje, jūs informuojate naršyklę apie vaizdo formato santykį. Tai leidžia naršyklei paskirti reikiamą vietos makete prieš visiškai atsisiunčiant vaizdą ir apsaugo nuo netikėtų išdėstymo poslinkių.
Skelbimai gali sukelti CLS
Jei „AdSense“ skelbimus įkeliate į turinį arba pirmaujančiųjų sąrašus ant straipsnių be tinkamo stiliaus ir nustatymų, išdėstymas gali pasikeisti.
Tai yra šiek tiek sudėtinga, nes skelbimų dydžiai gali būti skirtingi. Pavyzdžiui, tai gali būti 970 × 250 arba 970 × 90 skelbimas, o jei paskirsite 970 × 90 erdvę, jis gali įkelti 970 × 250 skelbimą ir sukelti poslinkį.
Priešingai, jei paskirsite 970 × 250 skelbimą ir jis įkels 970 × 90 reklamjuostę, aplink ją bus daug tuščios vietos, todėl puslapis atrodys blogai.
Tai yra kompromisas: arba turėtumėte įkelti tokio pat dydžio skelbimus ir gauti naudos iš padidintų atsargų ir didesnių MUT, arba įkelkite kelių dydžių skelbimus naudotojo patirties ar CLS metrikos sąskaita.
Dinamiškai įpurškiamas turinys
Tai turinys, kuris įterpiamas į tinklalapį.
Pavyzdžiui, X (anksčiau Twitter) įrašai, įkeliami į straipsnio turinį, gali būti savavališko aukščio, priklausomai nuo įrašo turinio ilgio, todėl išdėstymas pasislenka.
Žinoma, jie paprastai yra žemiau matomos ribos ir neatsižvelgiama į pradinį puslapio įkėlimą, bet jei vartotojas slenka pakankamai greitai, kad pasiektų tašką, kuriame yra X įrašas ir jis dar nebuvo įkeltas, tai sukels pakeisti išdėstymą ir prisidėti prie CLS metrikos.
Vienas iš būdų sušvelninti šį pokytį – tviterio pirminei div žymai suteikti vidutinį min aukščio CSS ypatybę, nes neįmanoma žinoti tviterio įrašo aukščio prieš jį įkeliant, kad galėtume iš anksto paskirstyti vietą.
Kitas būdas tai išspręsti yra taikyti CSS taisyklę pirminei div žymai, kurioje yra tviteris, kad būtų nustatytas aukštis.
#tweet-div {
max-height: 300px;
overflow: auto;
}Tačiau dėl to atsiras slinkties juosta, o vartotojai turės slinkti norėdami peržiūrėti tviterį, o tai gali būti netinkama naudotojo patirčiai.
Jei nė vienas iš siūlomų metodų neveikia, galite padaryti tviterio ekrano kopiją ir susieti su juo nuorodą.
Žiniatinklio šriftai
Atsisiunčiami žiniatinklio šriftai gali sukelti vadinamąjį nematomo teksto „Flash“ (FOIT).
Būdas to išvengti – naudoti iš anksto įkeltus šriftus
<link rel="preload" href="https://www.example.com/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>ir naudojant font-display: swap; css nuosavybė įjungta @font-face pagal taisyklę.
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 200 900;
font-display: swap;
src: url('https://www.example.com/fonts/inter.woff2') format('woff2');
}Laikydamiesi šių taisyklių, žiniatinklio šriftus įkeliate kuo greičiau ir nurodote naršyklei naudoti sistemos šriftą, kol įkelia žiniatinklio šriftus. Kai tik naršyklė baigia įkelti šriftus, ji sukeičia sistemos šriftus į įkeltus žiniatinklio šriftus.
Tačiau vis tiek galite turėti efektą, vadinamą „Flash of Unstyled Text“ (FOUT), kurio neįmanoma išvengti naudojant nesisteminius šriftus, nes užtrunka šiek tiek laiko, kol įkeliami žiniatinklio šriftai, o sistemos šriftai bus rodomi per tą laiką.
Žemiau esančiame vaizdo įraše galite pamatyti, kaip pavadinimo šriftas keičiamas sukeliant poslinkį.
FOUT matomumas priklauso nuo vartotojo ryšio greičio, jei įdiegtas rekomenduojamas šrifto įkėlimo mechanizmas.
Jei vartotojo ryšys pakankamai greitas, žiniatinklio šriftai gali įkelti pakankamai greitai ir panaikinti pastebimą FOUT efektą.
Todėl, kai tik įmanoma, naudoti sistemos šriftus yra puikus būdas, tačiau tai ne visada gali būti įmanoma dėl prekės ženklo stiliaus gairių ar specifinių dizaino reikalavimų.
CSS arba JavaScript animacijos
Pavyzdžiui, animuojant HTML elementų aukštį naudojant CSS arba JS, elementas išplečiamas vertikaliai ir susitraukiamas nustumiant turinį, todėl išdėstymas pasislenka.
Norėdami to išvengti, naudokite CSS transformacijas, skirdami vietos animuojamam elementui. Galite pamatyti skirtumą tarp CSS animacijos, kuri sukelia poslinkį į kairę, ir tos pačios animacijos, kuri naudoja CSS transformacija.
CSS animacijos pavyzdys, sukeliantis CLSKaip apskaičiuojamas kaupiamasis išdėstymo poslinkis
Tai yra dviejų metrikų / įvykių, vadinamų „Poveikio trupmena“ ir „Atstumo trupmena“, rezultatas.
CLS = ( Impact Fraction)×( Distance Fraction)
Poveikio frakcija
Smūgio dalis matuoja, kiek vietos nestabilus elementas užima peržiūros srityje.
Peržiūros sritis yra tai, ką matote mobiliojo telefono ekrane.
Kai elementas atsisiunčiamas ir perkeliamas, visa elemento užimama vieta nuo vietos, kurią jis užėmė peržiūros srityje, kai jis pirmą kartą pateikiamas, iki galutinės vietos, kai pateikiamas puslapis.
„Google“ naudojamas pavyzdys yra elementas, kuris užima 50 % peržiūros srities, o vėliau sumažėja dar 25 %.
Sudėjus, 75 % vertė vadinama poveikio trupmena ir išreiškiama kaip 0,75 balo.
Atstumo trupmena
Antrasis matavimas vadinamas atstumo trupmena. Atstumo dalis yra vietos, kurią puslapio elementas perkėlė iš pradinio į galutinę padėtį, kiekis.
Anksčiau pateiktame pavyzdyje puslapio elementas perkeltas 25%.
Taigi dabar kaupiamasis išdėstymo balas apskaičiuojamas padauginus poveikio dalį iš atstumo trupmenos:
0,75 x 0,25 = 0,1875
Skaičiavimas apima dar keletą matematikos ir kitų svarstymų. Svarbu tai, kad balas yra vienas iš būdų įvertinti svarbų vartotojo patirties veiksnį.
Čia yra vaizdo įrašo pavyzdys, vaizdžiai iliustruojantis poveikio ir atstumo veiksnius:
Supraskite kaupiamąjį išdėstymo poslinkį
Suprasti kumuliacinį išdėstymo poslinkį svarbu, tačiau nebūtina žinoti, kaip pačiam atlikti skaičiavimus.
Tačiau labai svarbu suprasti, ką tai reiškia ir kaip tai veikia, nes tai tapo „Core Web Vitals“ reitingavimo faktoriaus dalimi.
Daugiau išteklių:
Panašaus vaizdo kreditas: BestForBest / Shutterstock
