Cumulative Layout Shift (CLS)

A Cumulative Layout Shift (CLS) egy webes teljesítménymérő mutató, amely azt méri, hogy egy weboldal mennyire stabilan jelenik meg a betöltés során. A CLS érték azt mutatja meg, hogy a vizuális elrendezés mennyire változik betöltés közben, azaz mennyi elmozdulás történik az oldal elemeiben, miután azok már megjelentek a felhasználó képernyőjén. Az ilyen elmozdulások ronthatják a felhasználói élményt, különösen akkor, ha a felhasználók interakcióba lépnek az oldallal, például rákattintanak egy linkre vagy gombra, amely hirtelen máshová kerül.

Mi az a Cumulative Layout Shift (CLS) és miért fontos?

1. Felhasználói Élmény: Az oldal elemeinek váratlan elmozdulása zavaró lehet, és rossz felhasználói élményt eredményezhet. Ha például egy felhasználó megpróbál rákattintani egy gombra, de az elmozdulás miatt végül egy másik elemre kattint, az frusztráló lehet.
2. SEO Jelentőség: A Google a CLS-t is figyelembe veszi a keresőmotoros rangsorolásban a Core Web Vitals részeként. A jobb CLS érték hozzájárulhat ahhoz, hogy a weboldal előrébb kerüljön a keresési eredmények között.

Hogyan számítják ki a CLS-t?

A CLS egy olyan érték, amely a látványos elrendezési elmozdulások nagyságát és gyakoriságát méri. Két fő tényezőt vesz figyelembe:

1. Impact Fraction: Az oldal azon része, amely elmozdul egy látványos elrendezési elmozdulás során.
2. Distance Fraction: Az elmozdulás mértéke, azaz az elem mennyit mozdul el a képernyőn.
3. A CLS ezeknek a tényezőknek a szorzatából adódik, és az egész oldalon mért elmozdulások összesítése alapján számítják ki.

Mi számít jó CLS értéknek?

• Jó: 0,1 vagy annál alacsonyabb
• Javításra szorul: 0,1 és 0,25 között
• Rossz: 0,25-nél magasabb

Hogyan mérhetjük a CLS-t?

Az alábbi eszközök segítségével mérhetjük és elemezhetjük a CLS-t:

1. Google PageSpeed Insights: Ez az eszköz részletes elemzést nyújt a weboldal teljesítményéről, beleértve a CLS-t is, és javaslatokat ad a javításokra.
2. Google Search Console: A Core Web Vitals jelentés segítségével azonosíthatjuk azokat az oldalakat, amelyek CLS teljesítménye nem megfelelő.
3. Lighthouse: Ez a fejlesztői eszköz részletes teljesítményméréseket nyújt, beleértve a CLS-t is.

Hogyan javíthatjuk a CLS-t?

1. Képméretek meghatározása: Mindig adjunk meg szélességet és magasságot az képek és videók HTML elemeinek. Ez segít a böngészőnek fenntartani a megfelelő helyet az elem betöltése közben.
2. Hirdetési területek lefoglalása: Helyfoglalókat használjunk a dinamikus tartalmak, például hirdetések számára, hogy ne okozzanak elmozdulásokat, amikor betöltődnek.
3. Aszinkron betöltés: Használjunk aszinkron (async) módszert a külső források, például a hirdetések és harmadik féltől származó szkriptek betöltésére, hogy ne akadályozzák az oldal többi elemének betöltését.
4. Fontok és betűtípusok betöltése: Optimalizáljuk a webfontok betöltését úgy, hogy azok ne okozzanak elmozdulást, például a font-display: swap használatával.

Példák a CLS javítására

• Képek: Ha egy weboldalon nagy képek vannak, adjunk meg fix méreteket, hogy a böngésző tudja, mennyi helyet foglaljanak el a képernyőn, még mielőtt betöltődnének.
• Dinamikus Tartalmak: Ha hirdetéseket vagy egyéb dinamikusan betöltődő tartalmakat használunk, biztosítsunk előre meghatározott helyet ezeknek az elemeknek, hogy ne okozzanak váratlan elmozdulásokat.

Összefoglalva

A Cumulative Layout Shift (CLS) egy fontos teljesítménymérő mutató, amely azt méri, hogy egy weboldal vizuális elrendezése mennyire stabil a betöltés során. Az alacsony CLS érték biztosítja, hogy a weboldal elemei ne mozduljanak el váratlanul, ami javítja a felhasználói élményt és hozzájárul a jobb keresőmotoros rangsoroláshoz. A CLS javítása érdekében fontos a képméretek meghatározása, hirdetési területek lefoglalása, az aszinkron betöltés alkalmazása és a betűtípusok optimalizálása.