# 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](https://hub.hellowp.io/hu/report/teljesitmeny/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

1. **Adj méretet a képeknek és videóknak** (`width` és `height`), CSS-ben `height: auto`: [Képméretek, lusta betöltés](https://hub.hellowp.io/hu/report/teljesitmeny/kepmeretek-lusta-betoltes/).
2. **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.
3. **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.
4. **Animációt `transform`-mal** végezz.
5. **Dinamikusan beszúrt elemeket** (értesítések, süti-sáv) a meglévő tartalom fölé helyezd, vagy foglalj nekik helyet.

### HTML

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

### CSS

```css title="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](https://hub.hellowp.io/hu/report/teljesitmeny/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](https://hub.hellowp.io/hu/knowledge-base/useful-tools/pagespeed-insights/): a valódi látogatók CLS-értékét mutatja.