CLS a poskakující obsah

Poskakující obsah je jediná chyba webu, kterou návštěvník cítí fyzicky. Klikne na tlačítko, ono se posune, a on místo objednávky otevře nějakou nabídku, kterou vůbec nechtěl.

Co CLS vlastně počítá

CLS sčítá všechny neočekávané posuny obsahu během návštěvy. Každý posun má hodnotu podle toho, jak velká plocha se posunula a jak daleko. Výsledek je bezrozměrné číslo. Do 0,1 je to v pořádku, nad 0,25 špatně. Posuny, které vyvolá sám uživatel kliknutím, se nepočítají.

Klíčové slovo je neočekávané. Rozbalení menu po kliknutí je v pořádku, protože ho čekáte. Naskočení cookie lišty, která odsune celý obsah dolů v momentě, kdy už čtete, v pořádku není. Prohlížeč rozlišuje podle toho, jestli posun následoval do půl sekundy po interakci uživatele.

Metrika se sbírá po celou dobu návštěvy, ne jen při načtení. Web, který vypadá stabilně při načtení a rozsype se při rolování, dopadne stejně špatně jako ten, co skáče hned na začátku.

Pět důvodů, proč stránka poskakuje

Obrázky bez uvedených rozměrů. Prohlížeč neví, kolik místa jim má nechat, vysází text a po stažení obrázku ho odsune. Tohle je nejčastější příčina a zároveň nejlevnější oprava. Stačí u každého obrázku napsat šířku a výšku, zbytek dopočítá stylování.

Vložený obsah bez rezervovaného místa. Mapa, video, widget hodnocení, přihlašovací pole newsletteru. Všechno se načítá později a všechno tlačí obsah pod sebou. Řešení je vždycky stejné: připravit prázdný blok o správné výšce a nechat obsah naskočit do něj.

Zbylé tři jsou fonty, které po prohození změní výšku řádků, oznámení a lišty vkládané nad obsah, a obsah načítaný později skriptem. Do poslední kategorie spadají personalizované bloky, doporučené produkty a A/B testy, které v prvním okamžiku ukážou jednu variantu a pak ji vymění.

• Obrázky a videa bez šířky a výšky
• Vložené mapy, přehrávače a widgety bez rezervovaného místa
• Cookie lišta nebo oznámení nad obsahem
• Prohození fontu s jinou výškou řádku
• Bloky dogenerované JavaScriptem po načtení
• Reklamy a bannery s proměnlivou velikostí
• Skryté prvky, které se objeví až po ověření dat

Reklamní a vložené bloky jsou nejtěžší případ

Reklamní pozice mají proměnlivou výšku a to je s CLS v přímém rozporu. Když jedna kampaň doručí banner 250 pixelů vysoký a druhá 90, obsah pod ním se pokaždé posune jinak. Řešení je rezervovat pevnou výšku podle nejčastějšího formátu a menší kreativu v ní vycentrovat.

Nikdy neumisťujte reklamní ani dynamický blok nad hlavní obsah v horní části stránky. Posun v horní části stránky má na CLS největší váhu, protože posouvá největší plochu. Přesunutí pozice o jednu sekci níž snižuje skóre víc než jakákoli technická finta.

U vložených prvků třetí strany, kde výšku dopředu neznáte, funguje jednoduchý postup. Dejte kontejneru minimální výšku odpovídající obvyklému rozměru a nastavte přetečení tak, aby případný větší obsah nepřetlačil zbytek stránky.

Proč to bolí hlavně u mobilních objednávek

Na mobilu je obrazovka úzká a prvky jdou pod sebou. Jakýkoli posun nahoře přesouvá všechno ostatní. Prst už míří na tlačítko a mezitím naskočí lišta se souhlasem s cookies. Klik jde jinam. Návštěvník to nepovažuje za technický problém, považuje to za nedůvěryhodný web.

Nejdražší místo je poslední krok objednávky. Když se v momentě potvrzení posune volba dopravy nebo platby, člověk klikne na jinou variantu, případně odešle nedokončený formulář. V analytice se to projeví jako nevysvětlitelný propad dokončení mezi předposledním a posledním krokem.

Když má e-shop měsíčně tisíc mobilních přechodů do košíku a poskakující obsah zkazí pět procent z nich, je to padesát ztracených objednávek. Při průměrné objednávce 1 500 korun jde o 75 000 korun ročně na chybě, jejíž oprava stojí jednorázově zlomek.

Jak to opravit krok za krokem

Začněte měřením na skutečném telefonu. V PageSpeed Insights najdete v sekci diagnostiky konkrétní prvky, které posun způsobily, včetně jejich podílu na skóre. Opravujte podle podílu, ne podle pořadí v seznamu. Obvykle dva prvky dělají osmdesát procent problému.

Pak projděte pevný seznam. Rozměry u všech obrázků, minimální výška u vložených bloků, cookie lišta jako plovoucí vrstva místo pruhu tlačícího obsah, načítání fontu s náhradním písmem podobných rozměrů, dynamické bloky s rezervovaným místem. Tohle vyřeší většinu webů.

Nakonec ověřte, že se nic nerozbilo při rolování a při otočení telefonu. Kontrolujte tři typy stránek: domovskou, kategorii a poslední krok objednávky. Ten poslední je z hlediska peněz nejdůležitější a přitom ho testuje nejmíň lidí.

• Změřit na mobilu a najít konkrétní posouvající prvky
• Doplnit šířku a výšku ke všem obrázkům
• Rezervovat místo pro mapy, videa a widgety
• Cookie lišta jako plovoucí vrstva, ne pruh nad obsahem
• Náhradní font s podobnými rozměry
• Ověřit rolování, otočení a poslední krok objednávky

Cena opravy a co za ni dostanete

CLS je z celé trojice metrik nejlevnější na opravu. Kontrola s konkrétním seznamem posouvajících prvků a jejich podílem na skóre je součástí auditu za 4 900. U běžného webu jde o práci na jeden až dva dny, protože většina zásahů je v šablonách, ne v obsahu.

Samostatná oprava poskakování vychází od 6 900 do 12 900 podle počtu šablon a podle toho, kolik cizích widgetů web používá. Když se řeší současně s LCP a odezvou, dává smysl kompletní optimalizace od 24 900, protože se stejné soubory neotevírají dvakrát.

U webů starších než pět let bývá levnější postavit nový od 19 990, kde je stabilita rozvržení součástí stavby, než dohánět starou šablonu. Provoz je 990 měsíčně, péče 2 990 měsíčně. Dodávám do 7 dní a kontrolní měření dělám měsíc po nasazení, kdy už jsou v Search Console reálná data.

Časté otázky

Počítá se do CLS i posun po kliknutí na menu?

Ne. Posuny, které následují do půl sekundy po akci uživatele, se nezapočítávají, protože je návštěvník očekává. Rozbalení menu, akordeonu nebo filtru je tedy v pořádku. Problém dělají jen posuny, které přijdou samy od sebe, typicky při dogenerování obsahu nebo naskočení lišty.

Jak vyřešit cookie lištu, aby neposouvala obsah?

Zobrazte ji jako plovoucí vrstvu nad obsahem s pevnou pozicí, ne jako pruh, který obsah odtlačí dolů. Zároveň ji vykreslete co nejdřív, ne s několikasekundovým zpožděním. Kombinace pozdního naskočení a odtlačení obsahu je jedna z nejčastějších příčin špatného skóre u českých webů.

Stačí doplnit rozměry obrázků, nebo je potřeba víc?

U jednodušších webů to řeší většinu skóre a je to práce na pár hodin. Pokud používáte mapy, videa, widgety hodnocení nebo dynamicky doplňované bloky, je potřeba jim rezervovat místo dopředu. Ověřte to vždy na mobilu a hlavně na posledním kroku objednávky, kde chybný klik stojí nejvíc.