Ugráló weboldal: CLS-hibák felismerése és megelőzése

Váratlan elmozdulás

Nem minden mozgás jelent ugyanazt a problémát; a váratlan tartalomeltolódás a fő kérdés. Figyeld meg, mely elem mozdul, és mi jelenik meg közvetlenül előtte.

A váratlan elmozdulás vizsgálatánál az eltolt elem és kiváltó elem nem feltétlenül ugyanaz. A szöveg lejjebb ugrik, de az ok lehet a fölötte későn megjelenő kép vagy sáv. A mérési felvétel és elrendezési jelzés segít az időpont és érintett régió azonosításában. A szándékos felhasználói művelethez kapcsolódó változás értelmezése eltérhet, ezért a mutató pontos működését az aktuális dokumentáció alapján kell olvasni. A használati problémát ettől függetlenül is érdemes javítani, ha az oldal félrekattintást vagy olvasási nehézséget okoz. A cél stabil térbeli támpont a látogatónak. A hiba nem mindig látszik gyors kapcsolaton vagy ismételt betöltésnél, ezért a próbát több valósághű körülménnyel végezd. A hiba oka konkrét erőforráshoz vagy állapothoz köthető.

Képméret

A böngészőnek helyet kell tudnia hagyni a még le nem töltött képnek. Adj méretet vagy helyes arányt a képekhez és videókhoz.

A kép és videó méretaránya alapján a böngésző már letöltés előtt helyet hagyhat az elemnek. A width és height megadása, illetve megfelelő aránykezelés segít, ha összhangban van a rugalmas stílussal. A különböző képarányú mobilos változatot is helyesen kell kezelni. A képre foglalt hely ne tűnjön el addig, amíg a lazy loading elindul. A tartalmi kép helyettesítő felülete hasznos lehet, de a végleges elem méretéhez igazodjon. A galéria és termékválasztás során változó képarány szintén ugrást okozhat. A tesztben tölts lassabban és figyeld a szöveg helyzetét. A képméretezés helyessége a vizuális stabilitás mellett a tartalom olvasási ritmusát is megőrzi. Betöltéskor a szöveg nem változtat váratlanul helyet.

Dinamikus modul

A hirdetés, ajánló és beágyazás utólag foglalhat területet. Tervezz megfelelő helyet, és gondold át a modul megjelenésének időzítését.

A későn érkező hirdetés, ajánló vagy külső beágyazás számára előre tervezett hely szükséges lehet. A foglalt terület mérete a várható tartalomhoz igazodjon, különben nagy üres folt vagy újabb ugrás marad. A lap tetejére utólag beszúrt értesítés különösen erősen mozdíthatja az olvasott részt. Ha a tartalom nem sürgős, más megjelenési időzítés vagy elhelyezés is szóba jöhet. A döntést a használati helyzet alapján hozd meg, ne kizárólag a mérőszám csökkentéséért. A beágyazott szolgáltatás hibájánál is legyen stabil állapot. A tartalom betöltése, elmaradása és változó magassága mind próbahelyzet. A látogatónak nem kell üldöznie az éppen elmozduló gombot vagy bekezdést. A később érkező tartalom nem löki el az aktív olvasási pontot.

Betűcsere

A helyettesítő és webfont eltérő mérete megváltoztathatja a tördelést. Válassz megfelelő helyettesítő készletet és ellenőrizd a betöltési viselkedést.

A webfont betöltése után más szélességű és magasságú karakterek jelenhetnek meg, ami új sortörést és elemhelyzetet eredményezhet. A hasonló metrikájú helyettesítő betű csökkentheti az eltérést, de a tényleges címeket és gombokat meg kell nézni. A font betöltési stratégiája és szükséges súlyainak száma is számít. A túl sok betűváltozat fölösleges hálózati terhet hozhat, miközben a váltás továbbra is látható. Ne előtölts automatikusan minden fájlt: a kritikus tartalom prioritását együtt kezeld. A tesztben a betű késői érkezése és teljes hiánya is szerepeljen. A szövegnek mindkét esetben olvashatónak és használhatónak kell maradnia, a felület pedig ne váltson kiszámíthatatlanul más magasságra. A címsorok és gombok mérete a betű érkezésekor is stabil marad.

Használat közbeni állapot

A lista bővítése vagy késői értesítés az oldalbetöltés után is elmozdulást okozhat. Járd végig a görgetést és interakciókat, ne csak a nyitóképernyőt nézd.

A stabilitást nemcsak az első betöltés alatt kell nézni. Végtelenített lista, később felnyíló ajánló, felhasználói állapot vagy értesítés használat közben is elmozdíthatja a tartalmat. A görgetés után megjelenő elem és kép késleltetett betöltése gyakran csak hosszabb próbában látszik. A terméklista bővülésekor például őrizni kell a felhasználó tájékozódását. A rögzített fejléc magasságváltása vagy mobilos sáv megjelenése is érintheti az olvasást. Járd végig a tényleges feladatot és figyeld, változik-e váratlanul a célpont helye. A jó laborbetöltés nem bizonyít teljes használati stabilitást. A tervezési szabály legyen az, hogy az új tartalom megjelenése mellett is követhető maradjon a már olvasott vagy éppen aktiválni kívánt elem. A felhasználói feladat alatt nincs váratlan célpontváltozás.

Ellenőrzött kompromisszum

A túl nagy üres hely és a tartalomugrás között tudatos elrendezési döntés szükséges. A várható tartalomra méretezett helyet valós példákon teszteld.

A helyfoglalásnál egyensúly kell a stabilitás és térkihasználás között. Túl kicsi tartalék későbbi ugrást, túl nagy pedig indokolatlan üres részt hozhat. A várható tartalom mintái alapján érdemes méretezni, külön mobilos és asztali viselkedéssel. A reszponzív változatban a szélesség és magasság kapcsolata eltérhet, ezért egyetlen merev érték nem minden nézetben jó. A hibás vagy elmaradó beágyazás helyét is kezeld. A végső próba a szemrevételezést és mérési adatot együtt használja: lehet alacsony mutató mellett is zavaró helyzet, és egyetlen szám nem ír le minden olvasói élményt. A stabil felület célja a kiszámítható használat, nem a tartalom üres dobozok közé szorítása. A stabilitás nem teszi érthetetlenné vagy indokolatlanul hézagossá az oldalt.

Szemléltető helyzet és gyakorlati munkalap

Szemléltető példa: egy blogcikkben a nyitókép később töltődik be, és az olvasott bekezdést lejjebb tolja. A kép előre megadott méretaránya megőrzi a helyet. Ezután a betűbetöltést és a cikkbe utólag beszúrt ajánlómodult is ellenőrzik, mert több forrásból származhat ugrás.

Gyakori kérdések