CLS, valódi látogatók

Az elrendezés elmozdulása a valódi Chrome-látogatóknál (CrUX, 28 nap, 75. percentilis); 0,1 alatt jó, 0,25 fölött gyenge.

A CLS (Cumulative Layout Shift) azt méri, mennyire ugrálnak az elemek az oldalon. Ha betöltés közben vagy görgetés után eltolódik a tartalom, a látogató rossz helyre kattint, vagy elveszti az olvasás helyét. A Core Web Vitals része.

Valódi látogatók és labor

A valódi látogatók adata több elmozdulást is megmutathat, mint a labor: a web.dev szerint a görgetés vagy kattintás után késve betöltődő tartalom (például méret nélküli, lustán töltött kép), a személyre szabott tartalom és a gyorsítótár állapota mind befolyásolja. A Labor-CLS egyetlen szabályozott betöltést mér. A CrUX-adat a Chrome azon felhasználóié, akik engedélyezték az adatgyűjtést, 28 napos gördülő időszakra összesítve, a 75. percentilissel; csak Chrome-ból jön, és a javítás hatása lassan épül be.

Hogyan mérjük

A riport a Chrome UX Report API-t kérdezi le a megadott cím origin-jére (az egész webhelyre): előbb a telefonos adatot, ha nincs, az összes eszközét. A CLS-et a CrUX számként adja (mértékegység nélkül).

Megfelelő: a 75. percentilis 0,1 vagy kevesebb.
Hiba: 0,1 felett. A súlyossága alapesetben alacsony; ha az érték 0,25 fölött van, közepesre emelkedik.
Nem mérhető: nincs API-kulcs, nincs elég adat, a CLS hiányzik a válaszból, vagy hiba volt.

A web.dev határai: jó 0,1 vagy kevesebb, gyenge 0,25 felett. A riport egyezik.

Hogyan javítsd

Adj méretet a képeknek és videóknak (width és height), CSS-ben height: auto: Képméretek, lusta betöltés.
Foglalj helyet hirdetéseknek, beágyazásoknak és iframe-eknek (min-height, aspect-ratio), és tartsd meg a helyet akkor is, ha nem érkezik tartalom.
Betűtípusok: hasonló méretű tartalék betűtípus, size-adjust jellegű felülírás, a kritikus betűtípus előtöltése.
Animációt transform-mal végezz.
Dinamikusan beszúrt elemeket (értesítések, süti-sáv) a meglévő tartalom fölé helyezd, vagy foglalj nekik helyet.

HTML

<img src="/kepek/kep.webp" width="640" height="360" alt="A kép leírása">

CSS

img {
  max-width: 100%;
  height: auto;
}

Hogyan ellenőrizd

A CrUX 28 napos gördülő időszak, ezért a teljes javulás hetek alatt látszik. Gyors visszajelzéshez a Labor-CLS teszt szolgál, bár a görgetés utáni elmozdulásokat nem látja.
A Chrome fejlesztői eszközeinek Performance paneljén a “Layout Shifts” sáv megmutatja az elmozduló elemeket.
PageSpeed Insights: a valódi látogatók CLS-értékét mutatja.

Készült: 2026. november 2.