Labor-CLS

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 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.
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.

HTML

HTML

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

CSS

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: a valódi látogatók CLS-értéke mellett a labor eredményét is mutatja.