Co je Cumulative Layout Shift (CLS) a jak ho snížit
Cumulative Layout Shift (CLS) je metrika Googlu, která měří, jak moc se obsah stránky nečekaně posouvá, zatímco ho návštěvník čte nebo na něj kliká. Česky se jí říká kumulativní posun layoutu, občas se chybně píše content layout shift. Patří mezi tři metriky Core Web Vitals. Kvůli vysokému CLS dřív přijdete o objednávku než o pozici ve vyhledávání.
Obsah článku
Jaké CLS je dobré
Dobré CLS je 0,1 a méně. Google chce, aby stránka tuto hodnotu splnila u 75 % návštěv, a hodnotí zvlášť mobil a desktop.
| Hodnota CLS | Hodnocení |
|---|---|
| 0 až 0,1 | Dobré |
| nad 0,1 do 0,25 | Vyžaduje zlepšení |
| nad 0,25 | Špatné |
CLS nemá jednotku. Na rozdíl od ostatních metrik to není čas, ale skóre podle toho, kolik obsahu se posunulo a jak daleko.
Jak se CLS počítá
Prohlížeč u každého nečekaného posunu vynásobí dvě čísla:
- jakou část obrazovky posun zasáhl,
- o kolik se prvky pohnuly.
Příklad
Blok zabírá polovinu obrazovky a posune se o čtvrtinu její výšky. Původní a nová pozice dohromady pokrývají 75 % obrazovky, vzdálenost je 25 %.
Posun má skóre 0,75 × 0,25 ≈ 0,19. Jediný posun tak stránku pošle do pásma „vyžaduje zlepšení“.
Posuny, které přijdou rychle po sobě (s mezerou pod 1 sekundu, nejvýš 5 sekund celkem), se sčítají do jednoho okna. CLS stránky je skóre nejhoršího okna za celou návštěvu.
Posuny do 500 ms po kliknutí, ťuknutí nebo stisku klávesy se nepočítají, protože je uživatel čeká. Scrollování mezi takové akce nepatří. Animace přes CSS „transform“ posun nezpůsobí.
Příčiny a opravy
Stránku nejčastěji posouvá obsah, který se načte později a nemá vyhrazené místo.
| Příčina | Jak ji poznáte | Oprava |
|---|---|---|
| Obrázky a videa bez rozměrů | Text pod obrázkem po načtení skočí dolů | Atributy „width“ a „height“, nebo CSS „aspect-ratio“ |
| Reklamy | Článek se posune, když se nad ním načte banner | Vyhraďte slotu místo přes „min-height“ podle nejčastější velikosti reklamy |
| Embedy (YouTube, mapy, sociální sítě) | Prázdné místo se po načtení roztáhne | Kontejner s pevnou výškou nebo „aspect-ratio“ |
| Cookie lišta a promo pruh | Lišta nahoře odsune celý obsah | Zobrazte ji přes obsah, ne do toku stránky |
| Obsah dočítaný JavaScriptem | Produkty nebo formulář naskočí mezi existující obsah | Rezervujte místo předem, další položky načítejte až po kliknutí na „Načíst další“ |
| Webové fonty | Po načtení fontu se změní šířka textu a řádky přeskočí | „font-display: optional“, podobný záložní font, „size-adjust“, preload fontu |
| Animace přes „top“ a „left“ | Animovaný prvek odsouvá okolí | Animujte přes „transform“ |
Jak najít prvek, který posouvá
Google Search Console
Report Core Web Vitals ukáže, které skupiny URL mají CLS špatné nebo k zlepšení, zvlášť pro mobil a desktop. Příklady URL řadí podle počtu zobrazení ve vyhledávání, takže začněte opravou těch nahoře. Jak report číst, popisujeme u Google Search Console.
PageSpeed Insights
Vložte příkladovou URL do PageSpeed Insights. Diagnostika vypíše prvky, které se při načtení posunuly, a přehled Layout shift culprits odhadne příčinu. Často ale ukazuje prvek, který posun utrpěl. Viník bývá nad ním.
Chrome DevTools
V panelu Performance nahrajte načtení stránky. Stopa Layout shifts zobrazí každý posun jako fialový bod. Čím větší bod, tím větší posun, takže začněte u největších. Po kliknutí přehraje animaci a zvýrazní posunuté prvky.
Proč se PageSpeed a Search Console liší
Search Console bere data od skutečných uživatelů Chromu za posledních 28 dní a měří celou návštěvu, kdežto laboratorní test v PageSpeed Insights měří jen načtení stránky. Posuny při scrollování, třeba od obrázků načítaných až při posouvání, test nezachytí.
PageSpeed Insights ukazuje dvě věci: nahoře, jak web fungoval skutečným návštěvníkům, dole jednorázový test robota. CLS měří, jak moc stránka „poskakuje“. Když data od uživatelů ukazují hodně skákání a robot málo, stránka skáče až při používání, třeba při scrollování nebo kliknutí. Robot to nevidí, protože jen načte stránku a odejde. Viníka najdete v Chromu (F12, panel Performance), který poskakování měří, zatímco stránku sami procházíte.
Proč CLS řešit
Protože vás to může stát nemalé peníze. Košík, formulář, tlačítko objednávky. Stačí posun o pár pixelů. Návštěvník pak místo „Odeslat“ klikne na jiný odkaz nebo potvrdí něco, co nechtěl a objednávku už nedokončí.
Pro pozice v SERPu je CLS jen jeden signál. Google v dokumentaci píše, že Core Web Vitals jeho systémy hodnocení používají, ale dobré skóre pozice nezaručuje a relevantní obsah ukáže i při horším zážitku ze stránky. Ladit dokonalé skóre jen kvůli SEO podle Googlu nemusí být dobře strávený čas. CLS proto řešíme jako součást technického SEO, ne jako samostatný cíl.
... další metriky
CLS měří stabilitu a je součástí širší rodiny důležitých metrik pro vaše stránky. Largest Contentful Paint (LCP) měří rychlost načtení hlavního obsahu a Interaction to Next Paint (INP) odezvu na kliknutí. Search Console hodnotí skupinu URL podle nejhorší z nich.
Nevíte, co na vašem webu posouvá obsah?
Domluvit schůzkuČasté otázky
Proč mám CLS špatné jen na mobilu?
Na malé obrazovce zabere stejný posun větší část plochy, takže má vyšší skóre. Lišty a bannery přes celou šířku jsou navíc na mobilu častější. Proto se mobil hodnotí zvlášť.
Počítá se do CLS posun při scrollování?
Ano. Scrollování neomlouvá posun jako kliknutí. Typický případ je obrázek nebo reklama, které se načtou až při posouvání stránky a nemají vyhrazené místo.
Za jak dlouho se oprava projeví v Search Console?
Report pracuje s daty za posledních 28 dní, takže se zlepšení ukazuje postupně. Po opravě spusťte v reportu ověření. Search Console pak 28 dní hlídá, jestli se problém neobjeví znovu.