CLS (Halmozott elrendezéseltolódás)
A CLS az oldal teljes élettartama alatt bekövetkező váratlan elrendezéseltolódások teljes mennyiségét méri, számszerűsítve, hogy mennyi látható tartalom mozdul el váratlanul.
A Halmozott elrendezéseltolódás (CLS) egy Core Web Vital, amely a vizuális stabilitást méri. Számszerűsíti, hogy mennyit mozdul el váratlanul az oldal tartalma betöltés közben. Elrendezéseltolódás akkor következik be, amikor egy látható elem felhasználói beavatkozás nélkül megváltoztatja a pozícióját az egyik renderelt képkockáról a következőre.
Az elrendezéseltolódás (Layout Shift) gyakori okai közé tartoznak a méretmegadás nélküli képek és videók (a böngésző nem tudja, mennyi helyet foglaljon le, amíg be nem töltődnek), a dinamikusan betöltődő hirdetések vagy beágyazások, amelyek lefelé tolják a tartalmat, a webfontok, amelyek betöltéskor átméretezik a szöveget (Flash of Unstyled Text), és a meglévő tartalom fölé dinamikusan beszúrt tartalom.
A gyakorlatban
- Egy híroldal 0,42-ről 0,05-re csökkentette a CLS-ét azzal, hogy helyet foglalt le a hirdetési helyeknek és méreteket adott minden képhez, ami 30%-kal hosszabb átlagos olvasási munkameneteket eredményezett
- Egy e-kereskedelmi termékoldal CLS-e 0,35 volt, mert a vásárlói értékelések csillagai későn töltődtek be, és lejjebb tolták a „Kosárba” gombot, ami téves kattintásokat okozott; ennek javítása 8%-kal növelte a kosárba helyezési arányt
- Egy blog kijavította a későn betöltődő webfontok okozta CLS-problémáját a fontfájl előtöltésével és a font-display: optional használatával, teljesen megszüntetve a szöveg elrendezéseltolódásait
- Egy landing oldal rögzített méreteket foglalt le egy videóbeágyazásnak, amely az alatta lévő tartalom ugrálását okozta, így a CLS 0,28-ról 0,02-re csökkent
Nem biztos benne, hogy ez hogyan vonatkozik Önre?
Egy vezető mérnök bejárja az Ön webhelyét, keresési jelenlétét és azt, ahogyan a megkeresések eljutnak Önhöz, majd leírja az elsőként javítandó három dolgot. A dokumentumot mindenképpen megtartja.