Chcete otevřít odkaz, ale těsně před klepnutím do stránky dorazí reklama a odkaz se posune. Nebo při čtení ztratíte řádek, protože se nad odstavcem zvětšila fotografie. Stránka potřebuje prostor pro později načtený obsah už před jeho příchodem. Samotná rychlost serveru podobnou nestabilitu nevyřeší.
CLS pomáhá sledovat neočekávané posuny rozložení. Provozovatel magazínu ale nemá skončit u jednoho čísla: potřebuje zjistit, co posun vyvolalo, při jaké šířce a v jaké fázi návštěvy. Krátký úvodní test totiž může přehlédnout závadu, která přijde až u třetího reklamního bloku.
Co metrika znamená a kde hledat příčinu
CLS je bezrozměrné skóre vizuální nestability; dobrou hodnotou je nejvýše 0,1 u 75. percentilu návštěv. Není to počet posunutých pixelů ani doba v sekundách. V diagnostice se mohou zvýraznit prvky, které se pohnuly, i když jejich pohyb vyvolal jiný blok vložený nad nimi.
Při hledání se proto ptejte nejen „který odstavec odskočil“, ale také „co změnilo velikost před ním“. Mezi běžné příčiny patří média bez vyhrazených rozměrů, reklamy, vložený obsah a změna fontu. Ne každý viditelný pohyb se započítává stejně; funkční posouzení stránky proto doplňte skutečným záznamem.
| Co se pohne | Co prověřit nad tímto místem | Možné opatření |
|---|---|---|
| První odstavec | Rozměry horní fotografie nebo banneru | Vyhradit prostor odpovídající poměru stran |
| Střed dlouhého návodu | Pozdě vložený reklamní slot | Dohodnout rozměry a prázdný stav |
| Nadpis a zalomení textu | Výměnu náhradního fontu za webový | Sladit metriky a způsob načítání |
| Text pod videem | Rámeček vloženého přehrávače | Stabilní kontejner pro jednotlivé šířky |
Prohlédněte celý průběh návštěvy
Otevřete konkrétní článek bez přihlášení a projděte jej postupně. Sledujte horní obrázek, příchod reklamy i prvky níže v textu. Zopakujte návštěvu při pomalejším doručování, aby byla vidět plocha ještě před načtením média. Pouhý screenshot hotové stránky tuto fázi neukáže.
Uložte okamžik před posunem i po něm. Vývojář tak snadněji spojí symptom s příčinou. Poznamenejte stav souhlasu a reklamní sestavy. Pokud se problém projevuje jen u určité kampaně, předejte tuto podmínku odpovědnému správci; univerzální zásah do všech odstavců by byl chybný směr.
- Začněte prvním načtením a pokračujte pomalým čtením až ke konci článku.
- Zkontrolujte mobilní šířku, desktop a přechod mezi rozdílnými rozloženími.
- Ověřte stav, kdy reklama dorazí, i situaci, kdy zůstane slot prázdný.
- Oddělte skutečný posun obsahu od pouhého vodorovného přetékání tabulky.
Fotografie a video potřebují správný poměr stran
U obrazových elementů pomáhají odpovídající atributy width a height, případně prostor určený přes poměr stran v CSS. Rozměry mají popisovat skutečný vztah šířky a výšky. Mechanické vložení stejné výšky do všech fotografií může vyrobit deformaci nebo zbytečný ořez.
U responzivního obsahu kontrolujte také výstup šablony. Jiná fotografie na mobilu může mít jiný poměr stran a potřebuje odpovídající rezervaci. U videa ověřte původní rámeček před spuštěním i po načtení přehrávače. Zástupný obrázek, který se po příchodu videa výrazně zvětší, problém pouze odloží.
Dostupnost variant a skutečné vložení navazuje na kontrolu obrázků a médií. Jejich načasování pak samostatně řeší diagnostika LCP hlavní fotografie. Vyhrazené místo a včasný přenos jsou související, ale odlišné úkoly.
U reklamy se domluvte i na prázdném stavu
Reklamní prostor může mít na různých zařízeních různé povolené formáty. Sepište pro každý typ slotu, kde leží a jakou plochu může zabrat. Vývojář potřebuje vědět, zda má přijít jeden pevný rozměr, nebo výběr několika výšek. Bez této informace nelze smysluplně nastavit stabilní kontejner.
Rozhodněte také, co se má stát bez reklamy. Pozdější sbalení velkého prázdného místa může opět posunout čtený text. Trvale obrovská rezerva zase může rozbít čitelnost a orientaci. Prázdný i naplněný slot patří do stejného přejímacího testu. Řešení vybírejte spolu se správcem reklamní plochy a podle skutečných formátů.
| Stav slotu | Co musí návrh řešit | Kontrolní otázka |
|---|---|---|
| Ještě se načítá | Rezervu před příchodem kreativy | Zůstává poloha čteného odstavce? |
| Reklama dorazila | Povolenou výšku a šířku | Nevytlačí nově obsah mimo obrazovku? |
| Bez reklamní nabídky | Dohodnutý prázdný stav | Nesbalí se prostor až během čtení? |
| Jiný mobilní formát | Pravidla konkrétního rozložení | Neplatí zde nesprávná desktopová výška? |
Písmo může změnit výšku celého úvodu
Náhradní písmo a dodatečně načtený font nemusejí mít stejnou šířku znaků a řádkování. Dlouhý titulek pak získá další řádek a posune obsah pod sebou. Posuzujte reálné české titulky s diakritikou, nikoli jen krátký anglický vzorek návrhu.
Změna fontu zasahuje i tabulky, tlačítka a navigaci. Ověřte, že při náhradním písmu zůstanou texty čitelné a vejdou se do ovládacích prvků. Podrobný výběr způsobu načítání přináší návod k webovým písmům ve WordPressu. Font neposuzujte pouze podle podoby hotové stránky na rychlém připojení.
Model: dva reklamní formáty ve stejném místě
Vlastní model: v článku je připravený nízký reklamní rámeček. Na mobilu ale systém někdy vrací vyšší formát, který zvětší prostor až po načtení. Redakce vidí odskočenou tabulku a navrhne přidat tabulce horní odsazení. Tím však příčinu neodstraní a prázdné místo se bude lišit podle sestavy.
Správný postup začne mapou povolených reklamních rozměrů. Správce upraví pravidlo slotu pro danou šířku a otestuje obě varianty i prázdný výsledek. Model neobsahuje skutečné výnosy, naměřené skóre ani doporučení konkrétního reklamního systému. Ukazuje, proč má náprava zasáhnout zdroj změny rozměrů.
Jak převzít opravu a neztratit při ní funkce
- Uložte URL, scénář a záznam konkrétního posunu.
- Zjistěte blok, který změnil prostor; nestačí označit posunutý text.
- Vyzkoušejte nápravu na kopii s reálnými typy článků.
- Projít nechte načítání médií, reklamu i pozdější čtení stránky.
- Na produkci ověřte obě šířky, odkazy, tabulky a původní symptom.
U rozsáhlejší změny rozložení použijte také kontrolní vzorek pro převzetí redesignu. Zachovejte úplnost obsahu a dostupnost odkazů. Skrytí problematického bloku může snížit počet viditelných posunů, ale není přijatelnou opravou, pokud čtenář přijde o důležitou tabulku.
Do výsledku připojte podmínky, při nichž se oprava ověřila. Jestliže se reklamní kreativa nedoručila, označte kontrolu této varianty za neprovedenou. Poctivý protokol rozlišuje stabilní pozorovaný průchod a neotestovanou možnost. U různých reklamních sestav je toto rozlišení důležitější než pěkný snímek konečného stavu.
Mobilní tabulka a reklamní prostor potřebují odlišné testy
Když je tabulka širší než obrazovka, může mít vlastní vodorovný posun. To samo neznamená, že se při načítání mění její svislá poloha. Nezaměňujte stabilitu rozložení s šířkou obsahu. U tabulky ověřte posun uvnitř jejího kontejneru i dostupnost krajních buněk; u reklamy sledujte změnu výšky prostoru nad textem.
Na telefonu si vyberte konkrétní odstavec jako orientační místo. Při pomalém načtení zkontrolujte, zda zůstane pod stejným nadpisem a neodskočí při příchodu sousedního bloku. Pak stránku projděte přirozeným tempem. Čtenář běžně nečeká na kompletní dokončení všech požadavků, než začne číst. Přejímací postup by proto neměl takové čekání automaticky předpokládat.
Při změně reklamních pravidel si nechte potvrdit, které formáty může služba skutečně poslat. Pevná vysoká rezerva vybraná naslepo může být stejně nepříjemná jako posun. Vývojář a správce reklamy mají společně určit přijatelné stavy pro jednotlivé šířky. Dokončení je dohoda a ověření všech povolených stavů, nikoli vyzkoušení pouze jedné pěkné kreativy.
Při nemožnosti vyvolat určitou variantu ji v protokolu výslovně označte. Závěr se pak může opřít o pozorované průchody a přesně určit zbývající podmínku. Nepředstírejte celkové skóre ani pokrytí variant, které kontrola ve skutečnosti neobsahovala.
Časté otázky
Je CLS měření v sekundách?
Ne. Je to bezrozměrné skóre posunů rozložení. Nelze je zaměnit za dobu načítání fotografie.
Stačí prohlédnout hotovou stránku?
Ne. Sledujte průběh načítání i pozdější část návštěvy. Hotový snímek může vypadat dobře po velkém předchozím posunu.
Mám všem obrázkům nastavit stejnou výšku?
Ne. Rezervovaný prostor musí odpovídat skutečnému poměru stran a pravidlům daného rozložení.
Vyřeší cache uskakující reklamu?
Nemusí. Pokud reklamní blok dodatečně mění velikost, potřebujete vyřešit jeho rozměry a chování při načítání.
Proč audit ukazuje odstavec, když problém dělá banner?
Nástroj může označit obsah, který se pohnul. Příčina přitom může ležet nad ním v nově vloženém nebo zvětšeném prvku.
