CLS – Cumulative Layout Shift
CLS érthetően: mi számít váratlan layout shiftnek, hogyan okozhatja kép, font vagy dinamikus tartalom, és hogyan stabilizáld a felületet?
Röviden
A Cumulative Layout Shift a váratlan vizuális elmozdulások mértékét összegzi megfelelő session window logika szerint. Jó CLS érték legfeljebb 0,1 a 75. percentilisen. A felhasználó által közvetlenül kiváltott, rövid időn belüli bizonyos változásokat a metrika másként kezelheti, mert azok várhatóak.
Mit jelent a cls – cumulative layout shift?
A Cumulative Layout Shift a váratlan vizuális elmozdulások mértékét összegzi megfelelő session window logika szerint. Jó CLS érték legfeljebb 0,1 a 75. percentilisen. A felhasználó által közvetlenül kiváltott, rövid időn belüli bizonyos változásokat a metrika másként kezelheti, mert azok várhatóak.
Stabil layout
01
Helyfoglalás
02
Kép ratio
03
Font metric
04
Dinamikus slot
05
CLS
Hogyan működik a gyakorlatban?
Tipikus ok: méret nélküli kép/iframe, későn beillesztett banner a meglévő tartalom fölé, fontcsere miatti szöveggeometria, vagy komponens, amely betöltés után nagyobb helyet kér. A fix többnyire előzetes helyfoglalás és stabil layout.
- Képhez width/height vagy aspect-ratio segít helyet foglalni.
- Hirdetés/widget slotnak adj várható méretet.
- Font fallback metrikák hangolása csökkentheti a szöveg ugrását.
- Animációhoz transform gyakran jobb, mint layoutot mozgató property.
Gyakorlati fejlesztői szemlélet
Performance trace Layout Shifts része megmutathatja, mely elemek mozdultak. Ne csak a látványos mozgó elemre nézz: gyakran egy fölötte megjelenő késői tartalom löki el.
Gyakori hibák és félreértések
- Minden mozgást CLS-nek nevezni.
- Skeleton betöltőt eltérő végső mérettel rajzolni.
- Cookie banner számára utólag helyet csinálni a dokumentum tetején.
Források és szabványok
A technikai részletekhez elsődleges szabványokat és karbantartott hivatalos dokumentációt használok. Frameworkök, böngészők és webes API-k idővel változhatnak, ezért implementálás előtt mindig ellenőrizd az aktuális dokumentációt is.
Kapcsolódó ByBence Academy