Ugráló elrendezések javítása: a leggyakoribb okok
Az ugráló elrendezés az a hiba, amelyet a látogatók a legerősebben éreznek, a fejlesztők pedig a legritkábban látnak – mert egy gyors gépen, telt gyorsítótárral semmi nem ugrik. Hat ok szinte az összes esetet lefedi.
A lényeg röviden
- Hat ok szinte az összes esetet lefedi – méret nélküli képek, utólag betöltődő betűtípusok, beágyazott idegen tartalmak, utólag megjelenő sávok, későn betöltődő CSS és dinamikusan beszúrt tartalmak.
- Az értéket a saját gépen rendszeresen túl jónak mérik: gyors kapcsolat, telt gyorsítótár, más képernyőméret.
- A leghatásosabb egyedi intézkedés az, hogy minden képnek és minden beágyazott elemnek rögzített méretet vagy oldalarányt adtok.
- Egy betöltés után megjelenő és a tartalmat lefelé toló sáv a második leggyakoribb ok – és a legkönnyebben elhárítható.
A hat ok
1. Méretmegadás nélküli képek
width és height nélkül a böngésző nem tudja, mennyi helyet foglaljon le – a szöveg elcsúszik, amint a kép megérkezik.
Elhárítás: mindkét attribútum beállítása, és a CSS-ben height: auto kiegészítés, hogy a méretezés megmaradjon.
2. Utólag betöltődő betűtípusok
A szöveg először a helyettesítő betűtípussal jelenik meg, és a váltásnál ugrik, mert a kettő eltérő szélességgel fut.
Elhárítás: a betűtípus előzetes betöltése, font-display: swap, és a helyettesítő betűtípus méreteinek a célbetűtípushoz igazítása.
3. Beágyazott idegen tartalmak
A videók, térképek, értékelési widgetek ismert magasság nélkül érkeznek, és megérkezéskor mindent lefelé tolnak.
Elhárítás: rögzített oldalarányú helyőrző megadása, amelybe a tartalom betöltődik.
4. Utólag megjelenő sávok
Egy hozzájárulási sáv vagy akciósáv, amely a betöltés után felül jelenik meg, és az egész oldalt lefelé tolja.
Elhárítás: a hely lefoglalása a kezdetektől, vagy rátétként való megjelenítés betolás helyett.
5. Későn betöltődő CSS
Ha a stíluslap csak az első felépítés után lép életbe, az oldal egyszer formázatlanul, majd formázottan jelenik meg.
Elhárítás: a látható területhez szükséges szabályok korai kiszolgálása – teljesen, nem részekben.
6. Dinamikusan beszúrt tartalmak
Egy megjegyzés, egy lista vagy egy terület, amelyet a JavaScript a betöltés után szúr be a meglévő tartalom fölé.
Elhárítás: a látható terület alá beszúrni, vagy helyet lefoglalni.
Tudtad?
Az ötödik ok a legalattomosabb, mert helyben szinte soha nem lép fel: gyors kapcsolaton a stíluslap az első felépítés előtt érkezik meg, és semmi nem ugrik. Lassú kapcsolaton utána érkezik – és az egész oldal kétszer épül fel.
A CSS egy részének korai kiszolgálása eközben nem elég: ha hiányzik belőle egy szabály, amely a látható területet érinti, pontosan az az elem ugrik. Vagy teljesen a látható területre, vagy sehogy – a félmegoldások itt rosszabbak, mint a semmi.
Helyes mérés
| Mérési út | Mit mutat | Buktató |
|---|---|---|
| Saját gép, fejlesztői eszközök | durva támpontokat | túl gyors, telt gyorsítótár |
| Laborteszt vizsgálóeszközben | megismételhető értéket | egy feltételrendszer, nem a valóság |
| Valódi látogatók terepadatai | ami ténylegesen történik | elég forgalmat kíván |
| Mobilon, fojtott kapcsolattal | a legőszintébb egyedi teszt | tudatosan be kell állítani |
Egy eset, amely megjegyezhető: egy oldalnak helyben kifogástalan értéke volt, a vizsgálóeszközben pedig nagyon rossz. Az ok egy részlegesen előre kiszolgált stíluslap volt – hiányzott belőle három szabály a látható rész területeire.
Helyben ez soha nem tűnt fel, mert a teljes fájl gyorsabban érkezett meg, mint az első felépítés. Fojtás alatt utána érkezett, és három terület ugrott. A tanulság: ugráló elrendezéseknél a helyi benyomás nem ellenbizonyíték, csak egy másik forgatókönyv – és többnyire a valószerűtlenebb.
Az elhárítás sorrendje
- Minden kép ellenőrzése.
widthésheightbeállítva, a CSS-benheight: auto. Többnyire ez a probléma fele. - A beágyazott idegen tartalmak befoglalása. Rögzített oldalarányú helyőrző.
- A megjelenő sávok ellenőrzése. Rátétként, nem betolással.
- A betűtípus-betöltés ellenőrzése. Előzetes betöltés, helyettesítő betűtípus igazítása.
- A CSS kiszolgálásának ellenőrzése. Teljesen a látható területre.
- Újbóli mérés – fojtottan. Mégpedig minden egyes lépés után, különben nem tudjátok, mi hatott.
Segíts megtalálni és elhárítani az ugráló elrendezéseket az oldalunkon. Adatok: - Mért érték az elrendezéselcsúszásra: [érték, eszköz, mobil vagy asztali] - Elemek, amelyek a mérés szerint elcsúsznak: [lista, ha ismert] - Vannak a képeken width/height attribútumok? [igen / nem / részben] - Hogyan szolgáljuk ki a CSS-t? [külső fájl / előre beágyazva / részben előre] - Beágyazott idegen tartalmak: [videók, térképek, értékelések, csevegés] - Megjelenik valami a betöltés után? [sáv, megjegyzés, akciósáv] - Hogyan töltődnek be a betűtípusok? [megadás] Feladatok: 1. Rendeld hozzá minden elcsúszó elemet a hat ok egyikéhez: méret nélküli képek, utólag betöltődő betűtípusok, beágyazott idegen tartalmak, utólag megjelenő sávok, későn betöltődő CSS, dinamikusan beszúrt tartalmak. 2. Nevezd meg okonként a konkrét elhárítást kódpéldával. 3. Ha a CSS csak részben van előre kiszolgálva: magyarázd el, miért lehet ez rosszabb a semminél, és mit kell megvizsgálni. 4. Adj sorrendet hatás/ráfordítás szerint. 5. Mondd meg, hogyan mérjek minden lépés után, hogy tudjam, mi hatott. Ne találj ki mérési értékeket.
Összegzés
Hat ok, és az első – a méretmegadás nélküli képek – többnyire a felét teszi ki. Fél óra alatt elhárítható, és azonnal hat.
A nehezebb rész a mérés: aki helyben vizsgálódik, olyan forgatókönyvet mér, amelyet alig egy látogató tapasztal meg. Fojtottan mérni, minden lépés után külön – különben három dolgot háríttok el, és nem tudjátok, melyik hatott.
Gyakori kérdések
Miért ugrik a tartalom egy oldal betöltésekor?
Többnyire hat ok egyike miatt: méretmegadás nélküli képek, más futószélességű, utólag betöltődő betűtípusok, ismert magasság nélküli beágyazott idegen tartalmak, utólag megjelenő sávok, későn életbe lépő CSS, és a JavaScript által a látható terület fölé beszúrt tartalmak.
Mi a leghatásosabb egyedi intézkedés?
Minden képnek megadni a width és height értéket, és a CSS-ben kiegészíteni a height: auto beállítással. A böngésző így a kezdetektől a megfelelő helyet foglalja le, miközben a méretezés megmarad. Ez az intézkedés a gyakorlatban gyakran a probléma felét kiteszi.
Miért jobb az érték helyben, mint a vizsgálóeszközben?
Mert a saját gépen gyors a kapcsolat, és telt a gyorsítótár: a stíluslapok, a betűtípusok és a képek az első oldalfelépítés előtt megérkeznek, és semmi nem ugrik. Valósághű feltételek mellett utána érkeznek meg – ezért kell fojtottan mérni.
Árthat a részben előre kiszolgált CSS?
Igen. Ha az előre kiszolgált részből hiányzik egy szabály, amely a látható rész egyik területét érinti, pontosan az az elem ugrik, amint a teljes stíluslap megérkezik. Vagy teljesen a látható területre, vagy sehogy – a félmegoldások itt rosszabbak, mint a semmi.
Hogyan javítható az ugráló hozzájárulási sáv?
Úgy, hogy rátétként jelenik meg, nem betolással – vagyis a tartalom felett fekszik anélkül, hogy lefelé tolná. Alternatívaként a hely a kezdetektől lefoglalható. Ez az ok az egyik leggyakoribb, és egyben a legkönnyebben elhárítható.
Marketing, amely magát állítja be
A Studio Engine bétája nyitva áll. Foglalj helyet, és alakítsd az elejétől fogva.
Csatlakozom a bétához →