A vizuális stabilitás, azaz a Cumulative Layout Shift (CLS) az a mutató, melyet a Google a felhasználói élmény osztályozására alkalmaz, és iparági szakértők szerint 2021-től ez lehet az egyik legfontosabb tényező a keresőoptimalizálásban a page ranking szempontjából. De pontosan mi is az a CLS, és mit tehetünk ennek optimalizálásáért?

A CLS definíciója

A CLS az oldal vizuális stabilitását méri. A weboldalak betöltése közben egy-egy komponens pozíciója időközben megváltozik, például egy feljebb lévő kép lassabban töltődik be, majd betöltés után minden elemet lejjebb tol, így végül nem arra a tartalomra klikkelünk rá, amelyre szerettünk volna. Ez a jelenség leginkább a dinamikusan betöltődő tartalmak esetében lép fel (képek, videók, űrlapok), de bármilyen, nem megfelelően paraméterezett összetevő esetében előfordulhat.

A változás minimalizálása a legoptimálisabb felhasználói élmény (UX) elérésének szempontjából fontos. A jó hír az, hogy ezek kódolási problémákra vezethetőek vissza, így minden esetben orvosolhatóak.

Mikor és miért következik be a CLS?

A Google szerint ennek hátterében alapvetően 5 ok állhat:

1. Ha az oldalon nem megfelelő méretű képek találhatóak.
2. Hirdetések, beágyazott tartalmak és iframek paraméterek nélküli betöltése esetén.
3. Dinamikusan beágyazott tartalom betöltésekor.
4. Web fontok használatakor fellépő FOIT (felvillanó láthatatlan szövegek) és FOUT (felvillanó stílus nélküli szövegek) következtében.
5. Olyan kód futása esetén, amikor az adott esemény hálózati válaszra vár, mielőtt frissíti az oldalon lévő objektumokat.

Paraméterek nélküli képek az oldalon

A képek és videók betöltésekor mindig adjunk meg magassági és szélességi dimenziókat az oldalon, és ezeket kivétel nélkül deklaráljuk HTML formátumban. Szintén nagyon fontos, hogy a különböző arányú viewport-méretekre a reszponzív elemeket ugyanolyan képarányú elemekként töltsük be. A Google ezeknek az ellenőrzésére az AspectRatioCalculator.com oldalt ajánlja .

Nem megfelelően paraméterezett hirdetések

A Google megoldásként erre azt ajánlja, hogy a megjelenő hirdetéseket és egyéb elemeket CSS-ben paraméterezzük. Ha az adott szakasznak stíluslapon meghatározott mérete van, ügyeljünk arra, hogy a megadott magassági és szélességi paraméterek is ennek megfelelőek legyenek megadva. Amennyiben a kiszolgálóról érkező hirdetés késlekedve jelenik meg az oldalon, helyezzünk el egy alternatív bannert vagy bármilyen képet, hogy kitöltsük a megadott méretű helyet a felületen.

A másik lehetőség, hogy egy sorban helyezzük el a hirdetéseket, és amennyiben az adott sor kitölti az egész oldalt, az nem változtatja meg annak arányait, és nem vezet a felületünk megváltozásához.

Dinamikusan beágyazott tartalmak

Ezek külső forrásból származó beágyazott tartalmak az oldalon. Ennek kitűnő példái a WordPress-oldalakon megjelenő YouTube-linkek, vagy a tweetek.

Webes fontkészletek

A betöltendő webes fontkészletek okozhatják a felvillanó láthatatlan szövegek (Flash of Invisible Text – FOIT) és felvillanó stílus nélküli szövegek (Flash of Unstyled Text – FOUT) problémáját.

Ennek kiküszöbölésére használjuk az előtöltést, és a rel=”preload” paraméterben definiáljuk a böngészőnek, hogy előre töltse le a megjelenítendő fontkészletet.

Fejlesztés közben megjelenő hibák

A CLS leginkább azért jelenik meg, mert a fejlesztés során a böngészők már eleve a browser cache-ből dolgoznak, így az oldal megjelenítéséhez szükséges elemek már azonnal rendelkezésre állnak. Ennek kiküszöbölésére használjunk megfelelő tesztkörnyezetet, majd az aktivizálás előtt ezt élesben is tegyük meg.

Mi alapján számolja a CLS-t a Google?

Ennek kiszámítására alapvetően két fajta mérőszámot használ a Google: az Impact és a Distance Fractiont.

Impact Fraction

Az első ilyen paraméter az Impact Fraction. Ez a szám azt mutatja meg, hogy mekkora az instabil elemek aránya a nézetablakban. Viewport (vagyis nézetablak) alatt a mobil képernyő felhasználó által látható része értendő.

Annak kiszámítását, amikor egy elem a letöltés után megváltoztatja a méretét, a Google a következő példával szemlélteti:

• ha az oldal egyik eleme a nézetablak 50%-át teszi ki a betöltés kezdetekor, de utána csak 25%-ot tesz ki, akkor a két százalékos értéket összeadva 75%-ot kapunk, amelyet aztán 0,75-ös értékként lát a kereső motorja.

Distance Fraction

A második metrika, amely befolyásolja a CLS értékét, a Distance Fraction. Ez azt mutatja meg, hogy a betöltés során az eredeti pozíciójához képest milyen távolságra helyezkedik el az adott elem. A fenti példánál maradva ez 25%, azaz 0.25-ös érték.

A Cumulative Layout Score ennek a két értéknek az összeszorzásából kapható meg, a fenti példánál maradva tehát: 0.75 x 0.25 = 0.1875

Hogyan mérhető a CLS?

A cég alapvetően két módszert ajánl a CLS mérésére: a tesztkörnyezetet (Lab), illetve az éles tesztelést (Field).

A tesztkörnyezet alatt a Google egy szimulált Moto G4-en tölti be az adott oldalt, hogy kiszámítsa a CLS pontszámot. Mind a Chrome Dev Tools plugin, mind a Lighthouse segítségével lehetőségünk van ilyen jellegű tesztelésre.

E-kereskedőként nem feltétlenül feladatunk, hogy pontosan kiszámítsuk a CLS értékét, de nem árt észben tartani, hogy a Google egyre komolyabb jelentőséget tulajdonít ennek a tényezőnek. Előreláthatóan 2021-ben bekerül azok közé a paraméterek közé, amelyek jelentősen befolyásolhatják oldalunk Page Rankjét, illetve komoly hatással lehet arra, hogy milyen pozícióban jelenünk meg a Google találati listáin.