CLS (Cumulative Layout Shift)

A CLS (Cumulative Layout Shift) a Core Web Vitals vizuális stabilitási mutatója: azt méri, mennyire „ugrál" vagy mozdul el a tartalom a betöltés közben. Tipikus eset: kattintanál egy gombra, de egy később betöltődő banner lejjebb tolja, és máshová kattintasz.

A jó CLS 0,1 alatt van. Okai: méret nélküli képek/iframe-ek, dinamikusan beszúrt tartalom (reklám, banner), későn betöltő webfontok. Javítása: adj fix méretet (width/height) a képeknek és médiának, foglalj helyet a dinamikus elemeknek, és kezeld jól a fontbetöltést.

2026-ban a Google Core Web Vitals értékelésében a CLS az egyik leginkább alulbecsült mutató. Sok webmester az oldalsebesség javítására koncentrál, miközben a vizuális stabilitás is rangsorolási tényező. A CLS 0,1 és 0,25 között „fejlesztendő", 0,25 felett „rossz" besorolást kap. A legproblémásabb helyzetek: hirdetési hálózatok dinamikus bannerei, amelyek más elemeket tolnak el; webfontok, amelyek a betöltés vége felé egy másik betűtípust cserélnek le; és képek, amelyeknek nincs megadott width/height attribútumuk. A lazy loading alkalmazásakor is figyelni kell: ha képnek nincs előre fenntartott helye, a betöltéskor eltolja a tartalmat. A mobile-first indexeles miatt a mobilos CLS-érték a mérvadó; mobilon a hirdetési bannerek különösen erős layout shifteket okoznak.

Egy győri utazási iroda WordPress weboldala 2026 elején 0,42-es CLS-értéket kapott a Google Search Console-ban — ez „rossz" besorolás. Az elemzés kimutatta: az oldal betöltésekor a fejlécben lévő Google Ads banner 280 px magasságúra ugrott, ezzel az alatta lévő menüt és a főcímet lejjebb lökte. Emiatt a látogatók a menü helyett a hirdetésre kattintottak, a visszafordulási arány 68%-ra nőtt. A fejlesztő megoldása: a banner helyének egy fix magasságú 280 px-es placeholder div foglal helyet még akkor is, ha a hirdetés nem tölt be. Emellett a hero-képnek fix width és height attribútumot adtak. A CLS 0,06-ra csökkent, a Search Console visszaminősítette az oldalt „Jó" kategóriába, és a következő negyedévben 14%-kal nőtt az organikus forgalom.

A CLS a Core Web Vitals három fő mutatójának egyike, az LCP és az INP mellett. Míg az LCP a betöltési sebességet, az INP az interaktivitást, a CLS a vizuális stabilitást méri. Mind a három együttesen alkotja a Page Experience-értékelést. Az oldalsebesség tágabb fogalmán belül a CLS a „ugrálás-mentes" betöltési élményt képviseli. A lazy loading és a CLS szoros kapcsolatban áll: a késleltetett betöltés önmagában nem okoz CLS-t, ha a képek számára előre helyet foglalsz. A mobile-first indexeles miatt különösen a mobilos layout eltolódásokra kell figyelni. A viewport beállítása is befolyásolja: a helytelen viewport meta tag különböző méretű eszközökön eltérő layout shifteket okoz. A CLS javítása komplex, de szisztematikus feladat: minden dinamikus elem pozícióját előre kell tervezni.

• Hiba: Képeknek nem adsz meg width és height attribútumot. Ha a böngésző nem tudja előre a kép méretét, helyet sem tud lefoglalni: betöltéskor az alatta lévő tartalom elmozdul. Minden img taghoz adj explicit méretet vagy CSS aspect-ratio-t.
• Hiba: Hirdetési bannernek nem foglalsz helyet. A Google Ads és más hirdetési hálózatok dinamikusan töltik be a reklámméretet. Ha nincs fenntartott hely, a banner megjelenésekor az egész oldal eltolódik. Mindig tegyél placeholder divet a banner köré.
• Hiba: A fontbetöltést nem kezeled. Ha a webfont lassan tölt be és a rendszerbetűtípust lecseréli, vizuális layout shiftot okoz. Használj font-display: swap-ot, vagy töltsd be a fontokat preload direktívával.

A CLS (Cumulative Layout Shift) a Core Web Vitals vizuális stabilitási mutatója, amely azt méri, mennyire ugrik el a tartalom betöltés közben. A cél 0,1 alatt maradni. Javítható fix képméretek megadásával, hirdetési helyek előre foglalásával és a fontbetöltés optimalizálásával. 2026-ban a CLS rontása rangsorolás-csökkenést eredményezhet.