cls
A CLS definíciója
A CLS (cumulative layout shift – elrendezés összmozgása) a Google egyik alapvető webes vitals-mutatója, amely a felhasználói élmény mérésére szolgál.
A CLS, vagyis az elrendezés összmozgása az a jelenség, amikor egy weboldal elemei váratlanul elmozdulnak a helyükről, miközben az oldal betöltődik. Ez általában annak köszönhető, hogy egy újonnan betöltődő és megjelenő elem „félretolja” a többi elemet.
Ez a mozgolódás meglehetősen irritáló lehet, és sokat ronthat a felhasználói élményen. Gyakori példa erre, hogy egy gomb hirtelen máshová kerül a képernyőn, és így a felhasználó másra kattint vagy koppint, mint amire eredetileg szeretett volna. Egyes felhasználók ilyenkor egyszerűen távoznak a webhelyről, és soha nem térnek vissza rá.
Mivel az elrendezés összmozgása egy konkrétan mérhető érték, a Google többek között a CLS-t is használja a felhasználói élmény megállapítására. A felhasználói élmény fontos rangsorolási szempont, tehát a CLS-nek a keresőoptimalizálásban is szerepe van.
Mi okozza a CLS-t?
A Google szerint a tartalom összmozgásának öt fő oka van:
• Megadott méretek nélkül elhelyezett képek
• Megadott méretek nélkül elhelyezett hirdetések, beágyazott elemek és iframe-ek
• Dinamikusan beillesztett tartalmak
• Webes betűkészletek
• Olyan műveletek, amelyek hálózati válaszra várnak a DOM frissítése előtt
Képek és videók
A képek és videók méretét mindig definiálni kell, tehát meg kell adni, hogy milyen szélesek és magasak legyenek, és mekkora helyet foglaljanak el az oldalon. Reszponzív design használata esetében fontos, hogy a képek mindig igazodjanak az adott viewport méreteihez és képarányához is.
Hirdetések
A hirdetések szintén elmozdíthatják az oldal elemeit a betöltődés során. Ennek megelőzése érdekében előre meg kell adni annak az elemnek a méretét, amelyen belül a hirdetés megjelenik majd.
Ha például van egy „div” elemed az oldalon, amiben a hirdetésed megjelenik, akkor adj meg egy fix (de reszponzív) méretet neki.
Szintén CLS-t okozhat, ha a hirdetés valami miatt nem töltődik be és nem jelenik meg (pl. a hirdetéskészlet hiánya miatt). Ezt úgy kerülheted el, hogy egy alternatív bannert vagy képet helyezel a hirdetést tartó elembe, ami kitölti a hirdetés helyét.
Egyes elrendezésekben, amelyekben a hirdetés egy egész sort foglal el az oldal tetején, vagy egy egész oszlopot valamelyik oldalon, nem történik majd elmozdulás. Ez persze az elrendezés kialakításától függ, és mindenképpen érdemes tesztelni, ha arra számítasz, hogy nem mindig lesz elegendő hirdetéskészlet a megjelenéshez.
Dinamikusan beillesztett tartalmak
Ezek az oldalba beágyazott tartalmak, például egy YouTube videó, egy Instagram bejegyzés vagy egy tweet.
Webes betűtípusok
CLS-t okozhatnak még a külső forrásokból betöltött betűtípusok is. Ezt többek között úgy kerülheted el, hogy a betűtípus hivatkozásához hozzáadod a rel=”preload” paramétert, amivel a böngésző előre letölti majd a tartalom megjelenítéséhez szükséges betűtípusokat.
A CLS a fejlesztési fázisban alakulhat ki
Az elrendezés összmozgását a fejlesztési fázisban elkövetett figyelmetlenség is okozhatja. Előfordulhat például, hogy az oldal megjelenítéséhez szükséges eszközök mind belekerülnek egy böngésző gyorsítótárába.
Amikor aztán a következő alkalommal látogat el egy fejlesztő vagy tartalomkészítő a még félkész oldalra, nem fogja észrevenni a CLS-t, mert már minden benne van a gyorsítótárban. Ezért fontos az oldalak „éles” tesztelése is.
Mitől függ a CLS?
A Google két mutató alapján számítja ki az elrendezés összmozgását. Ezek a hatási hányad és a távolsági hányad.
A hatási hányad
A hatási hányad (impact fraction) azt méri, hogy összesen mekkora helyet foglal el egy instabil elem a viewportban. A viewport a weboldal azon része, amely egy asztali böngészőablakon belül vagy egy mobilképernyőn épp látható a felhasználó számára.
Amikor egy elem (egy kép, gomb, bekezdés stb.) betöltődik majd elmozdul, az összes elfoglalt helybe beleszámít az eredetileg elfoglalt helye a viewporton belül, plusz a végső elfoglalt helye, amikor az oldal teljes egészében megjelenik.
A Google egy olyan elemet hoz fel példaként, amelyik első megjelenésekor a viewport 50%-át foglalja el, majd visszaesik 25%-ra. Ha összeadjuk ezeket, akkor 75%-ot kapunk, tehát a hatási hányad értéke 0,75 lesz.
A távolsági hányad
A távolsági hányad (distance fraction) azt méri, hogy mekkora távolságot tesz meg egy elem az eredeti pozíciója és a végső pozíciója között az oldalon.
A fent említett példában ez 25%, tehát a távolsági hányad értéke 0,25.
A CLS kiszámítása nagyvonalakban a két hányad szorzatával történik:
CLS = 0,75 x 0,25 = 0,1875
CLS = 0,75 x 0,25 = 0,1875
Persze a Google valódi módszere jóval összetettebb ennél. A lényeg az, hogy a jobb pontszám (és a jobb felhasználói élmény) érdekében minimalizálni kell az elemek mozgását.
A CLS ellenőrzése
Saját weboldalaid CLS értékét „laboratóriumi” körülmények között és „élesben” is tesztelheted.
Laboratóriumi tesznek számít az, amikor egy olyan felhasználót szimulálunk, aki épp megpróbálja betölteni az oldalt. Ehhez többek között a Chrome DevTools és Lighthouse eszközöket érdemes használni.
A CLS egy weboldal elrendezésének összmozgására utal az oldal betöltése közben. A CLS továbbá a Google egyik alapvető webes vitals-mutatója.
A CLS azt méri és mutatja ki, hogy egy oldal elemei milyen mértékben mozognak és rendeződnek át, mielőtt az oldal teljes egészében betöltődne és megjelenne a felhasználó számára.
A CLS azt méri és mutatja ki, hogy egy oldal elemei milyen mértékben mozognak és rendeződnek át, mielőtt az oldal teljes egészében betöltődne és megjelenne a felhasználó számára.
