CLS: miért ugrál a weboldal betöltés közben, és hogyan tartható stabilan az elrendezés?

Ismerős helyzet: a látogató épp olvasni kezd, vagy rákattintana az ajánlatkérő gombra, amikor betöltődik felette egy kép vagy egy sáv, és az egész oldal lejjebb csúszik. Ilyenkor elveszíti, hol tartott, vagy rossz helyre kattint. Ezt az elrendezés-elmozdulást méri a Cumulative Layout Shift, röviden CLS. A web.dev cikke, a Cumulative Layout Shift (CLS) szerint a váratlan elrendezés-elmozdulások sokféleképpen ronthatják a felhasználói élményt, és a CLS azt méri, milyen gyakran fordul ez elő valós felhasználóknál. Az alábbiakban ezt és a web.dev kapcsolódó útmutatóját foglaljuk össze weboldal-üzemeltetői szemmel.

Mit mér pontosan a CLS

A web.dev szerint elrendezés-elmozdulás akkor történik, amikor egy látható elem két megjelenített képkocka között megváltoztatja a helyzetét. A CLS az oldal teljes élettartama alatt bekövetkező váratlan elmozdulások legnagyobb „sorozatát” veszi alapul: egy ilyen sorozatba azok az elmozdulások tartoznak, amelyek között kevesebb mint 1 másodperc telik el, és a sorozat legfeljebb 5 másodpercig tart. A CLS értéke a legnagyobb összesített pontszámú sorozat.

Az egyes elmozdulások pontszámát a böngésző két tényező szorzataként számolja: az egyik, hogy a mozgó elemek a nézetablak mekkora részét érintik (impact fraction), a másik, hogy a nézetablak legnagyobb méretéhez képest mekkora távolságot tettek meg (distance fraction). Az útmutató szerint a többi Core Web Vitals mutatóval ellentétben a CLS nem másodpercben vagy ezredmásodpercben mért érték, hanem mértékegység nélküli szám.

Mikor jó az érték

A web.dev szerint a jó felhasználói élményhez a CLS legfeljebb 0,1 legyen. Azt, hogy ez a látogatók többségénél teljesül-e, a mért oldalbetöltések 75. percentilisén érdemes nézni, mobilon és asztali gépen külön.

• 0,1 vagy kevesebb: jó.
• 0,1 és 0,25 között: javítandó.
• 0,25 felett: gyenge.

A betöltési sebességet mérő LCP-ről és a kattintásokra adott válaszidőt mérő INP-ről külön cikkben írtunk: LCP, INP.

Nem minden elmozdulás hiba

Az útmutató szerint egy elrendezés-elmozdulás csak akkor rossz, ha a felhasználó nem számít rá. A felhasználói műveletre, például kattintásra, koppintásra vagy billentyűleütésre adott 500 ezredmásodpercen belüli elmozdulások nem számítanak bele a CLS-be. A görgetés, a húzás és a csippentéses nagyítás viszont nem számít ilyen műveletnek. Ha egy kattintás után hosszabb hálózati kérés következik, a web.dev azt javasolja, hogy azonnal foglaljunk helyet az érkező tartalomnak, és mutassunk betöltésjelzőt.

Az animációknál a CSS transform tulajdonsága segít: a height és width változtatása helyett transform: scale(), a top, right, bottom vagy left változtatása helyett pedig transform: translate() javasolt, mert így az elemek mozgatása nem okoz elrendezés-elmozdulást.

A leggyakoribb okok és a web.dev javaslatai

A web.dev Optimize Cumulative Layout Shift című útmutatója szerint a gyenge CLS leggyakoribb okai a méret nélküli képek, a méret nélküli hirdetések, beágyazások és iframe-ek, a dinamikusan beszúrt tartalom, valamint a webes betűtípusok.

• Méret a képeken. A képek és videók kapjanak width és height attribútumot, vagy CSS aspect-ratio segítségével foglaljuk le a helyüket, így a böngésző már betöltés előtt ki tudja számolni, mekkora hely kell nekik.
• Hely a később betöltődő tartalomnak. Hirdetésnél, beágyazott videónál, térképnél vagy közösségimédia-bejegyzésnél min-height vagy aspect-ratio szabállyal érdemes előre lefoglalni a helyet. Az útmutató szerint a lefoglalt hely eltüntetése, például ha nem érkezik hirdetés, ugyanannyi CLS-t okozhat, mint a tartalom beszúrása.
• Ne szúrjunk be tartalmat felhasználói művelet nélkül. A lap tetején vagy alján felugró sávok és űrlapok gyakran eltolják az oldal tartalmát. Ilyenkor előre lefoglalt hely, helykitöltő vagy a tartalom fölé rétegzett megjelenítés segít. A sütiértesítésekre a web.dev külön útmutatót ajánl.
• Webes betűtípusok. A betűtípus cseréje is elmozdíthatja a szöveget. Az útmutató javaslatai között szerepel a font-display: optional, a megfelelő tartalék betűtípus megadása, a size-adjust és rokon tulajdonságok használata, valamint a kritikus betűtípusok korai előtöltése.
• Vissza/előre gyorsítótár. A web.dev szerint hatékony módszer, ha az oldal alkalmas a bfcache használatára: a visszalépéskor így a teljesen betöltött oldal azonnal, elmozdulások nélkül jelenik meg.

Hogyan mérjük

A web.dev szerint a CLS mezőben a Chrome User Experience Reporttal, a PageSpeed Insightsszal, a Search Console Core Web Vitals jelentésével és a web-vitals JavaScript-könyvtárral mérhető, laborban a Chrome DevToolsszal, a Lighthouse-szal, a PageSpeed Insightsszal és a WebPageTesttel. Fontos különbség, hogy a laboreszközök jellemzően csak az oldal betöltése alatti elmozdulásokat látják, ezért a valós felhasználóknál mért CLS ennél nagyobb lehet. Az útmutató szerint ha a PageSpeed Insights valós felhasználói és labor CLS-értéke eltér, az többnyire a betöltés után, például görgetés közben vagy lusta betöltésnél bekövetkező elmozdulásra utal.

Mit nézünk meg egy ügyféloldalon

A Flybuiltnél ezt a rövid listát használjuk, amikor egy élő oldal elrendezésének stabilitását ellenőrizzük. Nem Google-garancia, hanem a web.dev útmutatóinak lefordítása a napi munkára.

• A PageSpeed Insightsban a valós felhasználói adatot és a laboradatot is megnézzük, mobilon és asztali gépen külön.
• A Chrome DevTools Performance paneljén megkeressük, mely elemek mozdulnak el, és mi tolja el őket.
• Ellenőrizzük, hogy a képeken, videókon és beágyazásokon van-e méret vagy lefoglalt hely.
• Megnézzük a felugró sávokat, sütiértesítéseket és később betöltődő űrlapokat, nem tolják-e el a tartalmat.
• Átnézzük a betűtípusok betöltését és a tartalék betűtípus beállítását.

Források: web.dev, Milica Mihajlija és Philip Walton, Cumulative Layout Shift (CLS); web.dev, Addy Osmani és Barry Pollard, Optimize Cumulative Layout Shift.