Halmozott elrendezési eltolás (CLS)

Mi az a kumulatív elrendezéseltolódás (CLS)?

A Cumulative Layout Shift (CLS) a Google által kifejlesztett Core Web Vitals mérőszám, amely egy weboldal vizuális stabilitásának mérésére szolgál. Az oldal teljes élettartama alatt bekövetkező összes váratlan elrendezés-eltolódás összegét számszerűsíti. Az elrendezés eltolódása akkor következik be, amikor egy látható elem megváltoztatja a pozícióját az egyik megjelenített keretről a másikra.

Hogyan mérik a CLS-t

A CLS-pontszámok 0-tól, ami nem jelent változást, a 0 feletti értékekig terjednek, ami az instabilitás különböző fokát jelzi. A képlet figyelembe veszi az egyes elmozdulások hatás- és távolságrészét, kiszámítva, hogy az elemek mennyit mozdulnak el, és a nézetablak mekkora részét fedik le.

CLS pontszám értelmezése

• Jó: 0 - 0.1
• Javításra szorul: 0.1 - 0.25
• Gyenge: 0,25 felett

Miért fontos a CLS?

A CLS kritikus fontosságú a felhasználói élmény szempontjából, mivel a váratlan elrendezésváltások a felhasználó frusztrációjához vezethetnek. Ha például a felhasználó éppen egy gombra akar kattintani, de az elrendezés megváltozik, és emiatt akaratlanul valami másra kattint, az rossz felhasználói élményt és potenciális konverzióvesztést eredményezhet.

A gyenge CLS gyakori okai

1. Képek méretek nélkül:

   • Ha a képeket a HTML-ben a szélességük és magasságuk megadása nélkül szerepelteti, az elrendezés eltolódását okozhatja, mivel a böngésző nem tudja, hogy mennyi helyet kell kezdetben kiosztania.

2. Hirdetések, beágyazások és Iframe-ek dimenziók nélkül:

   • Ezek az elemek dinamikusan betöltődhetnek, és elrendezésbeli eltolódásokat okozhatnak, ha méreteik nincsenek előre megadva.

3. Dinamikusan beillesztett tartalom:

   • A tartalom hozzáadása a DOM meglévő tartalma fölé nyomhatja lefelé az elemeket, ami eltolódásokat okozhat.

4. FOIT/FOUT-ot okozó webes betűtípusok:

   • A Flash of Invisible Text (FOIT) és a Flash of Unstyled Text (FOUT) a böngésző webes betűtípusok betöltésekor az elrendezés eltolódását okozhatja.

Legjobb gyakorlatok a CLS minimalizálására

1. Méretattribútumok felvétele a képekre és videókra:

   • Mindig határozza meg a képek és videók szélességét és magasságát a HTML-ben, hogy a betöltés előtt helyet foglaljon az elrendezésben.

2. Helyfoglalás hirdetésekhez és beágyazásokhoz:

   • Használja a CSS-t a hirdetési sávok, iframe-ek és beágyazások méreteinek beállításához, hogy elkerülje az elrendezés eltolódását betöltéskor.

3. Kerülje a tartalom dinamikus beillesztését a meglévő tartalom fölé:

   • Adjon hozzá új tartalmat a hajtás alatt, vagy olyan konténerekben, amelyeknek már van fenntartott helyük.

4. Használjon betűtípus betöltési stratégiákat:

   • Használja a font-display CSS tulajdonságot a webes betűtípusok megjelenítésének szabályozására és a FOIT/FOUT miatti eltolódások minimalizálására.

5. CSS transzformáció használata animációkhoz:

   • Használja a transzform tulajdonságot a top, bottom, left vagy right helyett az elemek animálásához anélkül, hogy elrendezéseltolódást okozna.

Következtetés

A halmozott elrendezéseltolódás (CLS) létfontosságú mérőszám a stabil és vizuálisan tetszetős felhasználói élmény biztosításában. Az elrendezésváltozásokhoz hozzájáruló tényezők megértésével és a legjobb gyakorlatok alkalmazásával ezek minimalizálása érdekében javíthatja weboldala CLS-pontszámát és növelheti a felhasználók általános elégedettségét.

A CLS és más Core Web Vitals javításával kapcsolatos további információkért tekintse meg a Google Web Vitals dokumentációját.