SEO

CLS

Vizuální stabilita stránky při načítání

(Cumulative Layout Shift)

Co je CLS

CLS (Cumulative Layout Shift) je metrika vizuální stability, která měří, jak moc se už vykreslený obsah stránky během načítání posouvá. Jednotlivé posuny sčítá do bezrozměrného čísla a za dobrou hodnotu se bere 0,1 a méně.

Jak to vypadá z pohledu čtenáře

Začnete číst druhý řádek odstavce a text vám uteče o kus níž. Najdete ho, znovu se chytnete, a v tu chvíli naskočí nad obsah banner a celé se to posune ještě jednou. Na mobilu přijde horší varianta: miřte prstem na tlačítko objednávky ve chvíli, kdy se stránka rozhodne dosadit cookie lištu. Klik skončí jinde, než měl.

Nikdo nenapíše do zákaznické podpory, že ho trápí CLS. Lidé odejdou s pocitem, že web je rozhašený, a ten pocit se přenese na firmu za ním. Všude, kde se dlouho čte nebo kde se klikají malé prvky, je stabilita důležitější než pár desetin sekundy z celkové rychlosti webu.

Odkud se posuny berou

Obrázky a vložená videa bez uvedené šířky a výšky. Prohlížeč jim nemá jak rezervovat místo, takže je vecpe do textu, až když je stáhne.
Písma dotažená dodatečně. Text se nejdřív vykreslí náhradním fontem a po výměně zabere jiný počet řádků.
Bannery, reklamy a cookie lišty vkládané nad už vykreslený obsah.
Prvky dosazované JavaScriptem po načtení, od hodnocení z Heureky přes chatovací bublinu po dopočítanou dopravu zdarma.

Když chci vidět, co se na stránce hýbe, načtu si ji v nástrojích prohlížeče se zpomaleným připojením a prostě se dívám. Zpomalení udělá z neviditelného cuknutí pomalý film a příčina je většinou zřejmá napoprvé. Opravy pak bývají nudné a levné: doplnit rozměry obrázkům, rezervovat místo pro lištu i reklamní pozice, nevkládat nic nového nad text, který už čtenář vidí. Zvládne to i šablona z krabice, jen to musí někdo doříct vývojáři.

Časté otázky

Jaká hodnota CLS je v pořádku?

Do 0,1. Číslo nemá jednotku, protože vzniká z velikosti posunuté plochy a vzdálenosti, o kterou se obsah pohnul. Hodnotí se reálné návštěvy, takže rozhoduje součet u skutečných uživatelů, ne jeden test.

Proč mi laboratorní test ukáže lepší CLS než reálná data?

Laboratorní test načte stránku a skončí, kdežto skutečný návštěvník scrolluje, odklikává cookie lištu a dostane se k obsahu, který se dopočítává až v průběhu čtení. Posuny mimo první okamžik načtení proto v laboratoři nevidíte.

Stačí obrázkům doplnit rozměry?

Bývá to největší jednotlivý kus práce, ale sám o sobě obvykle nestačí. Zbytek posunů má na svědomí dodatečně načtené písmo a prvky vkládané nad obsah, typicky lišty, bannery a widgety třetích stran.

CLS