A CLS (Cumulative Layout Shift) azt méri, mennyit ugrál az oldal elrendezése betöltés közben, anélkül hogy a látogató bármit csinálna. Egy dimenzió nélküli szám: 0,1 alatt jó, 0,25 felett rossz, a kettő között fejlesztendő.
Hogyan működik
A böngésző figyeli, hogy egy már kirajzolt elem hol volt, és hova került. Minden ilyen mozgáshoz kiszámol egy pontszámot. A pontszám két tényezőből áll:
- hatásterület: a képernyő hányad részét érinti az elmozdulás,
- távolság: mennyivel csúszott el az elem a nézetablak méretéhez képest.
A részpontszámok összeadódnak, innen a "kumulatív" szó. Ha a mozgást egy kattintás vagy billentyűleütés váltotta ki, a böngésző 500 ezredmásodpercig nem számolja be. A felhasználó által kért változás tehát nem hiba.
Mi okozza a legtöbbször
A CLS majdnem mindig ugyanabból a néhány hibából jön. Méret nélküli kép, ami betöltéskor helyet foglal magának. Későn érkező webfont, ami átrendezi a szöveget. Cookie-sáv vagy akciós csík, amit JavaScript szúr be a tartalom fölé. Reklámhely vagy beágyazott videó, aminek nincs fenntartott doboza.
Miért számít a gépi olvasóknak is
A CLS a Core Web Vitals három mérőszámának egyike, a LCP és az INP mellett. Ez egy rangsorolási jel, de nem ez a legfontosabb hatása. Egy ugráló oldalon a felhasználó mellényúl, rossz gombot nyom, és kilép. A gépi olvasók, az AI-crawlerek és ügynökök pedig a stabil, kiszámítható elrendezésű oldalon tudják biztosan azonosítani, hol a gomb és hol az ár.
Röviden: a CLS nem esztétikai kérdés, hanem az oldal megbízhatóságának mérőszáma a látogató szemével.
Mit néz ebből a riport
Az audit a "CLS - laborteszt (Lighthouse)" szabállyal vizsgálja az értéket, laborkörnyezetben. A hatás besorolása közepes, a hatókör kód. Ha az érték a küszöb fölé megy, a riport ajánlása egyszerű: adj méretet a képeknek és a beágyazásoknak, hogy ne ugráljon az elrendezés.
Miért fontos
A felhasználó szemszögéből
A magas CLS a leglátványosabb hiba, amit egy oldal elkövethet. A látogató elkezdi olvasni a szöveget, az pedig elcsúszik a képernyőn. Rányomna a "Kosárba" gombra, de közben betölt egy bannerhely, és a "Feliratkozás" gombra üt.
Ez mérhető pénz. Webshopban a pénztár-folyamatban egyetlen ugráló elem is elég ahhoz, hogy a vásárló elbizonytalanodjon.
SEO-hatás
A Core Web Vitals része a Google rangsorolási jeleinek. Egyedül a CLS nem dönt el semmit, de gyenge tartalommal párosulva rontja a helyzetet. Mobilon súlyosabb a helyzet: a keskeny nézetablakban minden elmozdulás arányosan nagyobb.
Miért a mobil a kritikus
A riportokban azt látjuk, hogy az asztali CLS gyakran rendben van, mobilon viszont ugyanaz az oldal 0,3 fölé megy. A cookie-sáv és a lebegő hívás-gomb mobilon a képernyő jelentős részét foglalja. Ha ezek JavaScriptből érkeznek, a teljes tartalmat lejjebb tolják.
Technikai példa
Kép mérettel és aránnyal
<!-- Rossz: a bongeszo nem tudja, mekkora helyet foglaljon -->
<img src="/kepek/termek.webp" alt="Kek futocipo oldalnezetbol" loading="lazy">
<!-- Jo: a width/height megadja az aranyt, a CSS a tenyleges meretet -->
<img src="/kepek/termek.webp"
alt="Kek futocipo oldalnezetbol"
width="800"
height="600"
loading="lazy">
A width és height itt nem pixelben rögzíti a képet. A böngésző ebből számolja ki a képarányt, és azonnal lefoglalja a helyet. A tényleges megjelenítést a CSS szabályozza:
<style>
img {
max-width: 100%;
height: auto;
}
/* Beagyazott videonak fix arany, hogy ne ugorjon */
.video-wrapper {
aspect-ratio: 16 / 9;
width: 100%;
}
.video-wrapper iframe {
width: 100%;
height: 100%;
border: 0;
}
/* Kesobb erkezo widgetnek fenntartott hely */
.review-widget {
min-height: 240px;
}
</style>
CLS mérése a böngészőben
<script>
let cls = 0;
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (!entry.hadRecentInput) {
cls += entry.value;
console.log('CLS:', cls.toFixed(4), entry.sources);
}
}
}).observe({ type: 'layout-shift', buffered: true });
</script>
Ezt a kódot ideiglenesen beillesztve a konzolban látod az aktuális CLS-értéket. A hadRecentInput szűrő kihagyja a felhasználói kattintás utáni mozgásokat. Az entry.sources megmondja, pontosan melyik DOM-elem mozdult el.
Gyakori kérdések
Mennyi a jó CLS-érték?
0,1 alatt jó, 0,25 felett rossz. A kettő között fejlesztendő a besorolás. Mobilon és asztali nézeten külön mérd, mert ugyanaz az oldal eltérő értéket adhat.
Miért más a PageSpeed és a Search Console CLS-értéke?
A PageSpeed laboradata egy szimulált betöltésből származik, fix eszközzel és hálózattal. A Search Console valódi felhasználók adatát mutatja, 28 napra visszamenőleg. A valódi adat a mérvadó, de a laborteszt gyorsabban ad visszajelzést a javításról.
A lazy loading rontja a CLS-t?
Önmagában nem. Akkor rontja, ha a lusta képnek nincs megadva a mérete. Ilyenkor a böngésző nulla magassággal számol, majd a kép érkezésekor mindent lejjebb tol. Méretezett képnél a lazy loading biztonságos.
A cookie-sáv miatt magas a CLS. Mit tegyek?
Tedd a sávot fix pozícióba a képernyő aljára, position: fixed szabállyal. Így nem tolja el a dokumentum folyamát. Ha mindenképp felül kell lennie, rendereld szerveroldalon, ne JavaScripttel szúrd be utólag.
Hat a CLS a Google-helyezésre?
Igen, a Core Web Vitals része a rangsorolási jeleknek. A hatása azonban mérsékelt, és nem írja felül a tartalom minőségét. A nagyobb nyereség a konverzióban van: az ugráló oldalon a látogató mellényúl és kilép.
