A Google Web Performance Developer Advocate, Barry Pollard tisztázta, hogyan kell mérni a kumulatív elrendezéseltolást (CLS).
A CLS számszerűsíti, hogy mekkora váratlan elrendezési eltolódás történik, amikor egy személy böngészi az Ön webhelyét.
Ez a mérőszám fontos a keresőoptimalizálás szempontjából, mivel ez a Google egyik alapvető webes eleme. Az alacsony CLS-pontszámú oldalak stabilabb élményt nyújtanak, ami potenciálisan jobb keresési láthatóságot eredményezhet.
Hogyan mérik? Pollard ezzel a kérdéssel foglalkozott egy szálban az X-en.
A Core Web Vitals esetében miben mérik a CLS-t? Miért tekintik a 0,1-et nem jónak és a 0,25-öt rossznak, és mit jelentenek ezek a számok?
Az elmúlt 24 órában 3 külön beszélgetést folytattam erről különböző emberekkel, így arra jutottam, hogy itt az ideje egy újabb mélyreható szálnak, hogy elmagyarázzam…
🧵 1/12 pic.twitter.com/zZoTur6Ad4
— Barry Pollard (@tunetheweb) 2024. október 10
A CLS mérés megértése
Pollard azzal kezdte, hogy elmagyarázta a CLS-mérés természetét:
„A CLS egység nélküli, ellentétben az LCP-vel és az INP-vel, amelyeket másodpercben/ezredmásodpercben mérnek.”
Tovább pontosította:
„Minden elrendezési eltolódást úgy számítanak ki, hogy két százalékot vagy törtet összeszoroznak: Mi mozdult el (ütési tört) Mennyit mozdult (távolság törtrésze).”
Ez a számítási módszer segít számszerűsíteni az elrendezési eltolódások súlyosságát.
Ahogy Pollard elmagyarázta:
„Az egész nézetablak egészen lefelé mozog – ez rosszabb, mintha a nézetablak fele egészen lefelé mozogna. Az egész nézet egy kicsit lefelé mozdul? Ez nem olyan rossz, mert az egész nézeti ablak nagyon lefelé mozdul.”
Rosszabb forgatókönyv
Pollard leírta a legrosszabb forgatókönyvet egyetlen elrendezésváltás esetén:
„A maximális eltolási eltolás az, ha a nézetablak 100%-a (ütési hányad = 1,0) egy teljes nézetablakkal lejjebb kerül (távolságtört = 1,0).
Ez 1,0-s elrendezési eltolási pontszámot ad, és alapvetően a legrosszabb váltástípus.
Ugyanakkor emlékeztet bennünket a CLS kumulatív természetére:
„A CLS a kumulatív elrendezéseltolás, és ez az első szó (halmozott) számít. Minden egyes váltást, amely rövid időn belül (maximum 5 másodperc) történik, összesítjük, és összegezzük őket, hogy megkapjuk a CLS-pontszámot.”
Pollard elmagyarázta az 5 másodperces mérési ablak mögött meghúzódó érvelést:
„Eredetileg az ÖSSZES műszakot összesítettük, de ez nem igazán mérte az UX-t – különösen a sokáig megnyitott oldalak esetében (gondoljunk csak a SPA-kra vagy az e-mailekre). Az összes műszak mérése azt jelentette, ha elegendő időt adunk, még a legjobb oldalak is kudarcot vallanak!”
Megjegyezte az elméleti maximális CLS-pontszámot is:
„Mivel minden elem csak akkor tud eltolódni, ha egy képkocka meg van rajzolva, és 5 másodperces korlátunk van, és a legtöbb eszköz 60 képkocka/mp-sel működik, ez a CLS elméleti felső határa 5 mp * 60 fps * 1,0 maximális eltolás = 300.”
A CLS-pontszámok értelmezése
Pollard a CLS-pontszámok értelmezésével foglalkozott:
„… segít, ha a CLS-t a mozgás százalékának tekintjük. A jó 0,1-es küszöb azt jelenti, hogy az oldal 10%-kal mozdult el – ami azt jelentheti, hogy az egész oldal 10%-kal, vagy az oldal fele 20%-kal mozdult el, vagy sok kis mozgás egyenértékű ezek bármelyikével.”
A konkrét küszöbértékekkel kapcsolatban Pollard kifejtette:
„Tehát miért a 0,1 „jó” és a 0,25 „rossz”? Ez itt úgy van elmagyarázva, hogy az a kombináció, amit szeretnénk (CLS = 0!) és mi az elérhető… 0,05 volt a mediánnál ténylegesen elérhető, de sok helyen nem így lenne, ezért valamivel magasabbra ment.”
Miért számít ez?
A Pollard betekintést nyújt a webfejlesztők és SEO szakemberek számára a CLS-re való mérés és optimalizálás világosabb megértéséhez.
A CLS használata során tartsa szem előtt a következő pontokat:
- A CLS egység nélküli, és az ütközési és távolsági törtekből számítják ki.
- Ez kumulatív, 5 másodperces ablakon keresztül méri az eltolódásokat.
- A „jó” 0,1-es küszöb nagyjából a nézetablak mozgásának 10%-át jelenti.
- A CLS-pontszámok meghaladhatják az 1,0-t, ha több műszak összeadódik.
- A küszöbértékek (0,1 a „jó”, 0,25 a „rossz”) egyensúlyban tartják az ideális teljesítményt az elérhető célokkal.
Ezzel a betekintéssel módosíthatja a Google küszöbértékét.
