# Labor-CLS

> Az elrendezés elmozdulása betöltés közben, laborban mérve (Lighthouse, mobil); 0,1 alatt jó, 0,25 fölött súlyos hiba.

A CLS (Cumulative Layout Shift) azt méri, mennyire ugrálnak az elemek betöltés közben. Aki már kattintott egy gombra, amely az utolsó pillanatban lejjebb csúszott, tudja, miért számít: a látogató rossz helyre kattint, elveszíti a helyét az olvasásban. A Core Web Vitals egyik mutatója.

## Labor és valódi látogatók

Ez a teszt egyetlen szabályozott betöltést mér Lighthouse-zal, mobil eszközt emulálva. A labor csak a betöltés közbeni elmozdulásokat látja. A valódi látogatók viszont görgetnek, kattintanak, késve betöltődő tartalmat (például méret nélküli, lustán töltött képet) kapnak, és személyre szabott tartalmat látnak; a web.dev szerint ezek az elmozdulások csak a valódi (field) adatban jelennek meg. A valódi látogatók értékét a [CLS, valódi látogatók](https://hub.hellowp.io/hu/report/teljesitmeny/cls-valodi-latogatok/) teszt adja.

## Hogyan mérjük

A riport mobilnak emulált Chrome-ban betölti az oldalt, és a Lighthouse `cumulative-layout-shift` értékét veszi (egyetlen futás). A CLS egy szám mértékegység nélkül: minden elmozdulás értéke a "hatásarány" és a "távolságarány" szorzata, és a legrosszabb, egymáshoz közeli elmozdulásokból álló ablak számít (egy ablak legfeljebb 5 másodperc).

- **Megfelelő:** 0,1 vagy kevesebb.
- **Hiba, közepes súlyosság:** 0,1 felett, 0,25-ig.
- **Hiba, magas súlyosság:** 0,25 felett.
- **Nem mérhető:** nincs érték, vagy csonka volt a betöltés (a riport kérés-keretet ért el, és blokkolt kéréseket).

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

## Hogyan javítsd

1. **Minden képnek és videónak legyen `width` és `height` attribútuma.** A böngésző ezekből előre kiszámítja a helyet. CSS-ben `height: auto`. Lásd: [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` vagy `aspect-ratio` megadásával; tartsd meg a helyet akkor is, ha nem érkezik hirdetés.
3. **Betűtípusok:** olyan tartalék betűtípust válassz, amely méretre hasonló, és használd a `size-adjust` jellegű felülírásokat; a kritikus betűtípust töltsd elő.
4. **Dinamikus elemeknél** (értesítősáv, süti-sáv) vagy foglalj helyet, vagy a tartalom fölé helyezd (overlay), ne tolja le az oldalt.
5. **Animációt `transform`-mal** végezz, ne `top`/`left` módosításával.
6. A visszalépéskor visszaállított oldal (bfcache) is csökkenti az elmozdulásokat: [Back/Forward Cache](https://hub.hellowp.io/hu/report/teljesitmeny/back-forward-cache/).

### 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;
}

.hirdetes-hely {
  min-height: 250px;
}
```

## Hogyan ellenőrizd

- Futtasd újra a riportot. A CLS jóval stabilabb, mint az LCP, de két mérést érdemes összevetni.
- A Chrome fejlesztői eszközeinek Performance paneljén a "Layout Shifts" sáv megmutatja, melyik elem mozdult el.
- [PageSpeed Insights](https://hub.hellowp.io/hu/knowledge-base/useful-tools/pagespeed-insights/): a valódi látogatók CLS-értéke mellett a labor eredményét is mutatja.