Opravit poskakující rozvržení: nejčastější příčiny
Poskakující rozvržení je chyba, kterou návštěvníci cítí nejsilněji a vývojáři vidí nejméně často – protože na rychlém počítači s naplněnou vyrovnávací pamětí nic nepodskočí. Šest příčin pokryje skoro všechny případy.
To nejdůležitější
- Šest příčin pokryje skoro všechny případy – obrázky bez rozměrů, doněčítaná písma, vložené cizí obsahy, dodatečně zobrazená sdělení, pozdě načtené CSS a dynamicky vkládaný obsah.
- Hodnota se na vlastním počítači pravidelně naměří příliš dobře: rychlé připojení, naplněná vyrovnávací paměť, jiná velikost obrazovky.
- Nejúčinnějším jednotlivým opatřením je dát každému obrázku a každému vloženému prvku pevné rozměry nebo poměr stran.
- Informační pruh, který se objeví po načtení a odsune obsah dolů, je druhou nejčastější příčinou – a nejsnáz odstranitelnou.
Šest příčin
1. Obrázky bez uvedených rozměrů
Bez width a height prohlížeč neví, kolik místa má rezervovat – text se posune, jakmile obrázek dorazí.
Náprava: nastavit oba atributy a v CSS doplnit height: auto, aby se zachovalo škálování.
2. Doněčítaná písma
Text se nejdřív objeví v náhradním písmu a při přepnutí podskočí, protože obě běží v jiné šířce.
Náprava: písmo načíst předem, font-display: swap, a náhradní písmo v jeho rozměrech přiblížit cílovému.
3. Vložené cizí obsahy
Videa, mapy, prvky s hodnoceními přicházejí bez známé výšky a při doručení odsunou všechno dolů.
Náprava: předepsat zástupné místo s pevným poměrem stran, do kterého se obsah načte.
4. Dodatečně zobrazená sdělení
Lišta se souhlasem nebo akční pruh, který se po načtení objeví nahoře a celou stránku odsune dolů.
Náprava: rezervovat místo od začátku, nebo zobrazit překryvně místo vsunutím.
5. Pozdě načtené CSS
Když se styl uplatní až po prvním vykreslení, stránka se zobrazí nejdřív neupravená a pak upravená.
Náprava: pravidla nutná pro viditelnou oblast doručit brzy – úplně, ne po částech.
6. Dynamicky vkládaný obsah
Sdělení, seznam nebo oblast, kterou JavaScript po načtení vloží nad stávající obsah.
Náprava: vkládat pod viditelnou oblast nebo rezervovat místo.
Věděli jste, že…?
Pátá příčina je nejzákeřnější, protože lokálně skoro nikdy nenastane: na rychlém připojení dorazí styl před prvním vykreslením a nic nepodskočí. Na pomalém připojení dorazí až po něm – a celá stránka se vykreslí dvakrát.
Doručit brzy jen část CSS přitom nestačí: když v ní chybí pravidlo týkající se viditelné oblasti, podskočí právě ten prvek. Buď úplně pro viditelnou oblast, nebo vůbec – poloviční řešení jsou tu horší než žádné.
Měřit správně
| Způsob měření | Co ukazuje | Úskalí |
|---|---|---|
| Vlastní počítač, vývojářské nástroje | hrubá vodítka | příliš rychlý, naplněná vyrovnávací paměť |
| Laboratorní test v kontrolním nástroji | opakovatelná hodnota | jedna podmínka, ne skutečnost |
| Terénní data skutečných návštěvníků | co se skutečně děje | potřebuje dost provozu |
| Mobil s přiškrceným připojením | nejpoctivější jednotlivý test | musí se vědomě nastavit |
Jeden případ, který se vryje: stránka měla lokálně bezvadnou hodnotu a v kontrolním nástroji velmi špatnou. Příčinou byl částečně předem doručený styl – chyběla v něm tři pravidla pro oblasti ve viditelné části.
Lokálně to nikdy nevyplulo, protože úplný soubor dorazil dřív než první vykreslení. Při přiškrcení dorazil až po něm a tři oblasti podskočily. Poučení: u poskakujícího rozvržení není lokální dojem protidůkazem, ale jen jiným scénářem – a většinou tím nerealističtějším.
Pořadí při odstraňování
- Prověřit všechny obrázky.
widthaheightnastavené, v CSSheight: auto. Většinou polovina problému. - Orámovat vložené cizí obsahy. Zástupné místo s pevným poměrem stran.
- Prověřit zobrazovaná sdělení. Překryvně místo vsunutím.
- Prověřit načítání písem. Načíst předem, přiblížit náhradní písmo.
- Prověřit doručení CSS. Úplně pro viditelnou oblast.
- Změřit znovu – přiškrceně. A to po každém jednotlivém kroku, jinak nevíte, co zabralo.
Pomoz mi najít a odstranit poskakující rozvržení na naší stránce. Údaje: - Naměřená hodnota posunu rozvržení: [hodnota, nástroj, mobil nebo desktop] - Prvky, které se podle měření posouvají: [seznam, pokud je znám] - Obrázky s atributy width/height? [ano / ne / částečně] - Jak se doručuje CSS? [externí soubor / vloženo předem / částečně předem] - Vložené cizí obsahy: [videa, mapy, hodnocení, chat] - Zobrazuje se něco po načtení? [lišta, sdělení, akční pruh] - Jak se načítají písma? [údaj] Úkoly: 1. Přiřaď každý posouvající se prvek jedné ze šesti příčin: obrázky bez rozměrů, doněčítaná písma, vložené cizí obsahy, dodatečně zobrazená sdělení, pozdě načtené CSS, dynamicky vkládaný obsah. 2. Uveď u každé příčiny konkrétní nápravu s ukázkou kódu. 3. Pokud se CSS doručuje předem jen částečně: vysvětli, proč to může být horší než vůbec, a co se má prověřit. 4. Dej mi pořadí podle účinku na jednotku práce. 5. Řekni mi, jak mám po každém kroku měřit, abych věděl, co zabralo. Nevymýšlej si naměřené hodnoty.
Závěr
Šest příčin, a ta první – obrázky bez uvedených rozměrů – tvoří většinou polovinu. Odstraní se za půl hodiny a působí okamžitě.
Náročnější částí je měření: kdo prověřuje lokálně, měří scénář, který zažije sotva který návštěvník. Měřit přiškrceně, po každém kroku zvlášť – jinak odstraníte tři věci a nevíte, která z nich zabrala.
Časté otázky
Proč obsah při načítání stránky poskakuje?
Většinou z jedné ze šesti příčin: obrázky bez uvedených rozměrů, doněčítaná písma s jinou šířkou, vložené cizí obsahy bez známé výšky, dodatečně zobrazené informační pruhy, pozdě uplatněné CSS, a obsah vložený JavaScriptem nad viditelnou oblastí.
Jaké je nejúčinnější jednotlivé opatření?
Dát každému obrázku width a height a v CSS doplnit height: auto. Prohlížeč pak od začátku rezervuje správné místo a škálování zůstane zachované. Toto opatření tvoří v praxi často polovinu problému.
Proč je hodnota lokálně lepší než v kontrolním nástroji?
Protože na vlastním počítači je připojení rychlé a vyrovnávací paměť naplněná: styly, písma a obrázky dorazí před prvním vykreslením a nic nepodskočí. Za realistických podmínek dorazí až po něm – proto se musí měřit přiškrceně.
Může částečně předem doručené CSS uškodit?
Ano. Když v předem doručené části chybí pravidlo týkající se oblasti ve viditelné části, podskočí právě tento prvek, jakmile dorazí úplný styl. Buď úplně pro viditelnou oblast, nebo vůbec – poloviční řešení jsou tu horší než žádné.
Jak opravit poskakující lištu se souhlasem?
Tak, že se zobrazí překryvně místo vsunutím – tedy leží nad obsahem, aniž by ho odsouvala dolů. Případně se dá místo rezervovat od začátku. Tahle příčina je jednou z nejčastějších a zároveň nejsnáz odstranitelných.
Marketing, který se nastaví sám
Beta verze Studio Engine je otevřená. Zarezervujte si místo a podílejte se od začátku.
Zapojit se do bety →