CLS javítás: hogyan szüntesd meg az ugráló tartalmat

A CLS (Cumulative Layout Shift) az oldal vizuális stabilitását méri. Ha betöltés közben a tartalom ugrál, csúszik vagy elmozdítja a gombokat, a CLS értéke magas lesz. Ez nemcsak idegesítő, hanem közvetlen rangsorolási tényező is a Google-nél. A jó CLS 0,1 alatt van.

Mi okozza a layout shift-et?

A layout shift leggyakrabban nem egy nagy hiba következménye, általában apró, könnyen javítható hiányosságok okozzák. Nézzük a leggyakoribb okokat.

Méret nélküli képek

Ez messze a leggyakoribb ok. Ha egy képen nincs megadva a width és height attribútum, a böngésző betöltéskor nem tudja előre, mekkora helyet foglal el. Először megjeleníti a szöveget a kép helyére, majd amikor a kép megérkezik, lejjebb tolja az összes alatta lévő tartalmat. Ez az a klasszikus pillanat, amikor épp olvasol valamit, és hirtelen az egész szöveg ugrál egyet.

Hirdetések, iframek és beágyazott tartalmak

Ha az oldalon hirdetési helyek, YouTube videók, Google Maps, vagy egyéb beágyazott tartalmak vannak, és ezek számára nincs előre lefoglalt hely, pontosan ugyanaz történik, mint a méret nélküli képeknél: a tartalom betöltésekor eltolja a többi elemet.

Dinamikusan megjelenő elemek

Cookie-figyelmeztető sávok, értesítési sávok, vagy bármilyen tartalom, amelyet a JavaScript szúr be az oldal tetejére betöltés közben, szintén layout shift-et okozhat, ha a meglévő tartalom fölé kerül, és az egészet lejjebb tolja.

Webfontok cseréje betöltés közben

Ha az oldal egyedi betűtípust tölt be, és a böngésző addig egy „tartalék" rendszerbetűtípust mutat, a kettő közötti méretkülönbség szintén okozhat ugró szöveget, amikor a webfont megérkezik és a szöveget átrendezi.

Rossz CSS animációk

Ha az oldalon olyan animációk vannak, amelyek a top, left, width vagy margin tulajdonságokat változtatják, az minden lépésnél újrarendezi az oldalt. Ez nemcsak CLS-t okozhat, hanem lassú, akadozó animációt is.

Megoldások

1. Mindig add meg a képek méretét

A legegyszerűbb és legnagyobb hatású javítás: minden <img> elemhez add meg a width és height attribútumot. A modern böngészők ezek alapján kiszámítják az arányokat, és még a kép megérkezése előtt lefoglalják a szükséges helyet.

<!-- Hibás: a böngésző nem tudja előre a méretet -->
<img src="foto.jpg" alt="Bemutatkozó kép">

<!-- Helyes: a böngésző előre lefoglalja a helyet -->
<img src="foto.jpg" alt="Bemutatkozó kép" width="800" height="450">

Fontos: a width és height az arányok meghatározásáért van, nem a megjelenítési méret rögzítéséért. Ha CSS-ben width: 100% és height: auto van beállítva a képre, az oldal rendesen skálázódik, a böngésző csak az arányt használja a helyfoglaláshoz.

2. Tartsd meg az arányt CSS-sel is

Ha a kép méretei nem ismertek előre (például dinamikusan töltött tartalomnál), az aspect-ratio CSS tulajdonsággal is fenntartható az arány:

img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

3. Foglalj helyet hirdetéseknek és beágyazott tartalmaknak

Hirdetési helyeknél és iframeknél érdemes előre megadni egy min-height értéket, hogy a töltés közben ne tolódjon el a tartalom. Ez nem tökéletes megoldás, de nagymértékben csökkenti a shift-et.

.ad-container {
  min-height: 250px; /* az elvárt hirdetésméretnek megfelelően */
}

4. A cookie-sávot helyezd a normál folyamaton kívülre

A cookie-figyelmeztető és értesítési sávokat position: fixed vagy position: sticky módban érdemes elhelyezni, nem az oldal normál tartalomfolyamába szúrni. Ha alulra kerül fixálva, az egyáltalán nem okoz layout shift-et.

5. Animációknál használj transform-ot

Ha animálsz valamit az oldalon, ne a top, left, margin vagy width értékeket változtasd, ezek minden lépésnél újrarendezik az oldalt. Helyette a transform és opacity tulajdonságokat használd: ezek a GPU-n futnak, nem rendezik át az oldalt, és simábbak is.

/* Kerülendő: újrarendezi az oldalt */
.elem {
  transition: top 0.3s;
}

/* Helyes: GPU-n fut, nem okoz layout shift-et */
.elem {
  transition: transform 0.3s;
  transform: translateY(0);
}

6. Fontok: csökkentsd a méretkülönbséget

Ha webfontot töltesz be, a font-display: swap helyett próbáld ki a font-display: optional értéket: ez annyit tesz, hogy ha a font nem tölt be elég gyorsan, a böngésző inkább a tartalék betűtípussal marad, és nem cseréli le betöltés közben. Ezzel megakadályozható a szöveg-shift. A hátrány: ha a látogató első látogatáson cache nélkül érkezik, az egyedi font esetleg nem jelenik meg, de a layout stabil marad.

Hogyan ellenőrizd a CLS-t a Chrome DevTools-ban?

A PageSpeed megmutatja a CLS értékét, de nem árulja el pontosan, melyik elem okozza. Ehhez a Chrome saját fejlesztői eszköze a leghasznosabb.

1. Nyisd meg az oldaladat Chrome-ban.

2. Nyomj F12-t (DevTools megnyílik).

3. Kattints a három pontra a jobb felső sarokban, majd: More tools > Rendering.

4. A megnyíló panelen pipáld be a Layout Shift Regions opciót.

5. Töltsd újra az oldalt. A kék kerettel jelzett területek azok, amelyek betöltéskor elmozdultak.

Ha pontosan szeretnéd tudni, mikor és mennyit mozdult el egy elem, a Performance fülön rögzíts egy oldalbetöltést, és keress rá a Layout Shift eseményekre az idővonalon.

Röviden: a leggyakoribb javítás

A CLS-problémák döntő többsége a méret nélküli képekből ered. Ha csak egyet tehetsz, adj width és height attribútumot minden képedhez, ez egyetlen nap munkája, és általában azonnal látványosan javítja az eredményt.

Ha a CLS az 0,1-es küszöb felett van és nem találod az okát, érdemes megnézni a Chrome DevTools Layout Shift Regions nézetét, pontosan megmutatja, melyik elem a felelős.

A CLS a Core Web Vitals egyik mutatója, de önmagában nem mond el mindent az oldalad sebességéről. A teljes átfogó útmutatót itt olvashatod: Miért lassú a weboldalad, és hogyan gyorsítsd fel?