CLS: teljes útmutató

A CLS (Cumulative Layout Shift) azt méri, mennyire ugrálnak váratlanul az oldal látható elemei betöltés és használat közben. A Core Web Vitals vizuális stabilitási mutatója: egy mértékegység nélküli pontszám, amely az elmozdulás méretéből és távolságából adódik. Jó értéknek a 0,1 vagy kevesebb számít, a látogatások 75. percentilisén mérve.

Alapfogalmak

Mindenki ismeri a helyzetet: olvasni kezdesz egy cikket, és a szöveg hirtelen lejjebb csúszik, mert fölötte betöltődött egy hirdetés. Vagy rá akarsz koppintani egy gombra, de az utolsó pillanatban elmozdul, és egy másik linkre kattintasz. A CLS pontosan ezt az élményt méri számokkal. Minél kisebb az érték, annál stabilabb az oldal.

A CLS a Core Web Vitals egyik eleme az LCP és az INP mellett. Az LCP a betöltés sebességét, az INP a válaszkészséget, a CLS a vizuális stabilitást írja le. A három mutató egymástól független, de a javításuk gyakran összefügg: egy kép méretének megadása például a CLS-en segít, a kép helyes betöltése az LCP-n.

Mi az a layout shift?

Elrendezési elmozdulásról akkor beszélünk, ha egy már látható elem két képkocka között megváltoztatja a kezdőpozícióját. Nem számít elmozdulásnak, ha egy új elem jelenik meg, vagy ha egy elem mérete változik, amennyiben a kezdőpontja a helyén marad. Az számít, ha egy meglévő elem emiatt máshová kerül. Ha például egy kép fölé beszúrnak egy sávot, maga a sáv nem okoz elmozdulást, de a kép és az alatta lévő szöveg lejjebb kerül, és az már igen.

Hogyan számolódik a pontszám?

Minden elmozdulás pontszáma két tényező szorzata:

Hatásarány. A nézet mekkora részét érintik az elmozduló elemek, az elmozdulás előtti és utáni helyzetük együttesen.
Távolságarány. Mekkora a legnagyobb elmozdulás távolsága a nézet nagyobbik méretéhez viszonyítva.

Ebből következik, hogy egy kis elem kis elmozdulása alig számít, egy nagy blokk nagy ugrása viszont sokat. A pontszámnak nincs mértékegysége, ezért nem másodpercben vagy képpontban kell gondolkodni, hanem arányokban.

A küszöbértékek

Minősítés	CLS érték	Mit érez a látogató
Jó	0,1 vagy kevesebb	Az oldal stabil, legfeljebb apró mozgás látszik
Javítandó	0,1 és 0,25 között	Észrevehető ugrások, zavaró olvasás közben
Gyenge	0,25 felett	Az elemek jelentősen elmozdulnak, téves kattintások

A minősítés itt is a valós látogatások 75. percentilisére vonatkozik, mobilon és asztalon külön. A mobil nézet gyakran rosszabb, mert keskeny képernyőn egy beszúrt elem arányában nagyobb részt tol el a nézetből, és a lassabb hálózat miatt az elemek hosszabb idő alatt, több lépésben érkeznek meg.

Miért számít a keresőoptimalizálásban?

A CLS a Google oldalélmény-jelzéseinek része, de a súlya a tartalom relevanciájához képest kicsi. A valódi jelentősége a felhasználói élményben van: egy ugráló oldalon a látogató elveszíti a fonalat, téves linkre kattint, és hamarabb távozik. Egy webáruházban a rossz helyre koppintás akár rossz termék kosárba tételét is jelentheti. A stabil oldal tehát elsősorban a látogatónak jó, a keresőoptimalizálási haszon ennek következménye.

Hogyan működik?

A böngésző a Layout Instability API segítségével minden képkockánál rögzíti az elmozdulásokat. A CLS nem egyszerűen az összes elmozdulás összege a teljes látogatás alatt. Ez régen így volt, de a hosszan nyitva tartott oldalakat, például az egyoldalas alkalmazásokat, igazságtalanul büntette. Ma a mutató az elmozdulásokat munkamenet-ablakokba csoportosítja.

A munkamenet-ablak

Egy munkamenet-ablak olyan elmozdulások sorozata, amelyek között egy másodpercnél kevesebb idő telik el, és az ablak teljes hossza legfeljebb öt másodperc. Az ablakon belül a pontszámok összeadódnak. A CLS értéke a legnagyobb pontszámú ablak összege. A gyakorlatban ez azt jelenti, hogy a betöltés alatti ugrássorozat és egy későbbi, például végtelen görgetéskor jelentkező ugrássorozat külön ablakba kerül, és csak a rosszabbik számít.

Várt és váratlan elmozdulás

Nem minden elmozdulás rossz. Ha a látogató rákattint egy gombra, és emiatt kinyílik egy panel, amely lejjebb tolja a tartalmat, az elvárt viselkedés. A mutató ezért figyelmen kívül hagyja azokat az elmozdulásokat, amelyek egy felhasználói bevitel, például kattintás, koppintás vagy billentyűleütés után 500 ezredmásodpercen belül következnek be. A görgetés nem ilyen bevitel, tehát a görgetés közben betöltődő, tartalmat eltoló elemek beleszámítanak.

Animációk és a transform

A CSS transform tulajdonsággal végzett mozgatás nem okoz elrendezési elmozdulást, mert nem változtatja meg az elrendezést, csak a megjelenítést. Ha viszont egy animáció a top, left, margin vagy height tulajdonságot változtatja, a környező elemek is mozoghatnak, és ez beleszámít a CLS-be. Ezért a mozgó elemeknél a transform és az opacity a biztonságos választás.

Mi történik iframe-ek és beágyazások esetén?

A beágyazott keretekben történő elmozdulások is beleszámíthatnak a szülőoldal CLS-ébe, ha a keret látható része mozdul el. Ezt a laboratóriumi eszközök nem mindig mutatják pontosan, ezért a hirdetési és beágyazott tartalmaknál különösen fontos a terepi adat. A keret saját méretének változása, amikor a beágyazott tartalom betöltődik, a szülőoldalon lévő elemeket is eltolhatja, ha a keretnek nincs előre rögzített mérete.

Kidolgozott példa: hírportál cikkoldala

Egy hírportál cikkoldalain mobilon gyenge volt a CLS. A laboratóriumi mérés elmozdulási régiói megmutatták, hogy a legnagyobb ugrást a cikk első bekezdése utáni hirdetési hely okozta: a hely magassága nulla volt, amíg a hirdetés be nem töltődött, majd hirtelen kinyílt, és a teljes szöveg lejjebb került. Egy második, kisebb ugrást a cikk fő képe okozott, amelynek nem volt megadott mérete. A csapat a hirdetési helynek minimális magasságot adott, a leggyakoribb hirdetési mérethez igazítva, a képre pedig szélesség és magasság attribútum került. A következő mérésben a legnagyobb munkamenet-ablak pontszáma jelentősen csökkent.

Fő módszerek

A CLS javításának alapelve egyszerű: minden elemnek már az első kirajzoláskor foglald le a helyét. Ha a böngésző előre tudja, mekkora lesz egy kép, egy hirdetés vagy egy beágyazott elem, a tartalom nem ugrik, amikor az elem megérkezik. Az alábbi módszerek ennek az elvnek a különböző megvalósításai.

Méretek megadása képeken és videókon

Az img és video elemeken add meg a width és height attribútumot. A modern böngészők ebből kiszámolják a képarányt, és a kép betöltése előtt lefoglalják a helyet, akkor is, ha a CSS rugalmas szélességet ad. Ha a méretek nem ismertek előre, a CSS aspect-ratio tulajdonsága is megoldás. A lazy loading önmagában nem okoz elmozdulást, ha a hely le van foglalva, méret nélkül viszont a lusta képek görgetés közben ugráltathatják a tartalmat.

Hely foglalása hirdetéseknek és beágyazásoknak

Minimális magasság a hirdetési helyen. A leggyakoribb kiszolgált méret alapján.
A hely ne tűnjön el, ha nincs hirdetés. Egy üres, de megtartott hely jobb, mint az utólagos összecsukás.
Beágyazott tartalom helyőrzővel. Videók, térképek, közösségi bejegyzések kapjanak előre rögzített méretű tárolót.
Hirdetés a nézet tetején csak óvatosan. A felső elhelyezés tolja el a legtöbb tartalmat.

Dinamikusan beszúrt tartalom

Sütisávok, értesítési sávok, hírlevél-feliratkozások és ajánlók gyakran a meglévő tartalom fölé kerülnek. Ha ilyen elemre szükség van, jelenjen meg rögzített pozícióban, a tartalom fölött lebegve, vagy foglald le a helyét előre. Ha a tartalom egy felhasználói művelet eredménye, az 500 ezredmásodperces kivétel miatt nem számít, de csak akkor, ha valóban azonnal jelenik meg.

Webes betűtípusok

Amikor a webes betűtípus betöltődik és lecseréli a tartalék betűtípust, a szöveg mérete és sortörése megváltozhat, ami eltolja az alatta lévő elemeket. A megoldások: a kritikus betűtípus korai betöltése preload hivatkozással, a font-display: optional beállítás, amely csak akkor használja a webes betűtípust, ha az időben megérkezik, valamint a tartalék betűtípus méreteinek igazítása a size-adjust és hasonló leírókkal.

Back/forward cache

Ha a böngésző a vissza és előre gombnál a gyorsítótárból állítja vissza az oldalt, az azonnal, a végleges elrendezésben jelenik meg. Az ilyen visszaállítás nem gyártja újra a betöltés alatti elmozdulásokat. Érdemes ellenőrizni, hogy az oldal alkalmas-e erre a gyorsítótárra, mert egyes beállítások, például bizonyos eseménykezelők, kizárhatják.

Döntési szabály

Az elmozdulás forrása	Javítás
Kép vagy videó méret nélkül	width és height attribútum vagy aspect-ratio
Hirdetés, beágyazás	Előre lefoglalt minimális magasság
Utólag beszúrt sáv	Rögzített pozíció vagy előre lefoglalt hely
Betűtípus-csere	Preload, font-display, tartalék betűtípus igazítása
Animáció	transform és opacity az elrendezési tulajdonságok helyett

Gyakori hibák

A CLS-problémák sokszor csak bizonyos körülmények között jelentkeznek: lassú hálózaton, bizonyos képernyőméreten, bejelentkezve, vagy amikor egy adott hirdetés töltődik be. Ezért a leggyakoribb hiba az, hogy a csapat a saját gépén nem látja az ugrást, és azt hiszi, nincs is.

Csak a betöltést nézi a csapat

A laboratóriumi mérések jellemzően csak a betöltést rögzítik. A CLS viszont a teljes látogatás alatt gyűlik: a görgetés közben betöltődő képek, a később megjelenő hirdetések és a végtelen görgetés új elemei is okozhatnak elmozdulást. Emiatt a terepi CLS gyakran rosszabb, mint a laboratóriumi. Ha a kettő között nagy a különbség, a betöltés utáni időszakban kell keresni.

Tévhit: a CLS csak a hirdetések miatt rossz

A hirdetések gyakori okozók, de messze nem az egyetlenek. Egy hirdetésmentes céges oldalon is lehet gyenge a CLS, ha a fejléc menüje JavaScripttel épül fel és utólag nő meg, ha a betűtípus-csere megváltoztatja a sortörést, vagy ha egy termékoldalon az ár és a készletinformáció utólag, külön kéréssel töltődik be és tolja le a leírást.

Összecsukódó üres helyek

Előfordul, hogy a csapat lefoglalja a hirdetés helyét, de ha nincs kiszolgált hirdetés, egy szkript eltávolítja a tárolót. Ilyenkor az alatta lévő tartalom felfelé ugrik, ami ugyanúgy elmozdulás. A jobb megoldás a hely megtartása egy semleges helyőrzővel.

További visszatérő hibák

Kliensoldalon renderelt fejléc vagy menü, amely a szkript lefutása után kapja meg a végleges magasságát.
Csúszka, amelynek első képe méret nélkül töltődik be.
Top és left alapú animációk a transform helyett.
Utólag betöltött értékelések, árak, ajánlók a fő tartalom fölött.
Mobil nézetben más elrendezés, amelyet senki nem tesztelt lassú hálózaton.

Ellenpélda: a túlzott helyfoglalás

A helyfoglalás is elrontható. Ha egy hirdetési hely a lehetséges legnagyobb méretre van beállítva, de a legtöbb esetben kisebb hirdetés érkezik, az oldalon feleslegesen nagy üres területek jelennek meg. Ez nem rontja a CLS-t, de rontja az élményt és a tartalom láthatóságát. A jó megoldás a leggyakoribb méretre igazított hely, és ha nagyobb hirdetés érkezik, az lehetőleg a nézet alatt nőjön meg. A döntés mögött mindig a látogató álljon: a cél nem a pontszám, hanem az, hogy a tartalom ne ugorjon el a szeme elől.

Egyoldalas alkalmazások

Az egyoldalas alkalmazásokban az oldalváltás nem új betöltés, ezért a böngésző szemszögéből minden a látogatás része. Ha az útvonalváltáskor a tartalom fokozatosan épül fel, és közben az elemek elmozdulnak, az ugyanúgy beleszámít a CLS-be. Ilyenkor érdemes vázszerkezetet mutatni a végleges mérettel, amíg az adatok megérkeznek.

Mérés

A CLS mérése a terepi adatból indul, mert csak az mutatja meg a betöltés utáni elmozdulásokat is. A laboratóriumi mérés a betöltés alatti ugrások okát tárja fel. A munkafolyamat itt is három lépés: megtalálni, hol rossz, megérteni, miért, és ellenőrizni a javítást.

Eszközök

Eszköz	Adattípus	Mire jó
Search Console, Core Web Vitals jelentés	Terepi	URL-csoportok gyenge vagy javítandó CLS-sel
PageSpeed Insights	Terepi és laboratóriumi	Egy URL értékei és az elmozdulást okozó elemek listája
Chrome UX Report	Terepi	Összesített, történeti adatok
Chrome fejlesztői eszközök	Laboratóriumi	A Performance panel és az elmozdulási régiók kiemelése megmutatja, mi mozdult
web-vitals könyvtár, attribúcióval	Terepi, saját	Melyik elem okozta a legnagyobb elmozdulást valós látogatásokban

Munkafolyamat

Keresd meg a Search Console-ban a gyenge CLS-ű URL-csoportokat.
Egy jellemző URL-en nézd meg a terepi és a laboratóriumi értéket. Ha a terepi sokkal rosszabb, a betöltés utáni elmozdulásokat keresd.
A fejlesztői eszközökben kapcsold be az elmozdulási régiók kiemelését, és töltsd be az oldalt lassított hálózaton, mobil nézetben.
Görgess végig az oldalon, és figyeld, mi ugrik meg.
Minden elmozdulásnál azonosítsd a forrást a döntési szabály szerint.
Javítsd sablonszinten, majd kövesd a terepi adatot.

Kidolgozott példa: webáruház termékoldala

Egy webáruház termékoldalán a terepi CLS javítandó volt, a laboratóriumi viszont jó. A valós felhasználói mérés attribúciója szerint a legnagyobb elmozdulást a termékleírás blokkja szenvedte el, nem a betöltés alatt, hanem néhány másodperccel később. Kiderült, hogy a vásárlói értékelések összesítése egy külső szolgáltatásból, utólag töltődött be a termékcím alá, és lefelé tolta a leírást. A laboratóriumi mérés ezt azért nem látta, mert a mérés addigra véget ért. A javítás egy fix magasságú helyőrző volt az értékelési sávnak. A terepi CLS a következő hetekben a jó sávba került.

Mire figyelj az értelmezésnél?

A CLS értéke erősen függ a képernyőmérettől és a látogatók viselkedésétől. Aki csak az oldal tetejét nézi, más elmozdulásokat tapasztal, mint aki végiggörget. Ezért a terepi adatot oldaltípusonként érdemes elemezni, és a javítás hatását mindig a saját korábbi értékeidhez mérd. Ha egy URL-nek kevés a forgalma, a terepi adat hiányozhat, ilyenkor a saját mérés vagy a hasonló sablonú oldalak adata ad támpontot.

Ellenőrzőlista

Minden képen és videón van width és height, vagy aspect-ratio?
A hirdetési és beágyazási helyek előre le vannak foglalva?
Az üres hirdetési hely megmarad, nem csukódik össze?
A sütisáv és más értesítések nem tolják el a tartalmat?
A betűtípus-csere nem okoz észrevehető sortörés-változást?
Az animációk transform és opacity alapúak?
A terepi CLS a 75. percentilisen 0,1 alatt van?