Martin Michálek  – 15. 6. 2020

Metrika, která udává stabilitu vzhledu stránky během vykreslování.

Jedná se o jednu z metrik rychlosti webu, i když v tomto případě bychom mohli mluvit spíše obecněji o metrikách uživatelském zážitku (UX).

CLS je velmi důležitá metrika, protože je součástí Core Web Vitals, které Google prosazuje jako základní ukazatele.

CLS udává součet posunů layoutu (layout shift) během vykreslování stránky. Cílem je pro ni zajistit co nejvyšší vizuální stabilitu.

Problémy, které řeší

Všichni to známe. Stránka vypadá, že je vykreslená… už už se chystáme kliknout… ale v tom se spustí externí skript, posune nám rozvržení a my klikáme na reklamu.

Vtipně to popisuje následující video od autorů metriky z Googlu:

To, že stránky během vykreslování „poskakují“ není nic nového ani nečekaného. Vyplývá to z asynchronní povahy některých prvků webu. Do stránek se totiž vkládají až po prvotním vykreslení.

Potíže může dělat například:

  • webový font, který se nahrazuje systémové písmo,
  • obrázek nebo video bez definovaných rozměrů,
  • komponenta třetí strany, která se vykreslí pozdě a ještě mění velikost.

CLS skóre

Nástroje měřící Cumulative Layout Shift vrací číslo mezi 01. Čím je hodnota nižší, tím lépe.

Z textu o Web Vitals už víte, že metriky mají své stavy. Takto je to u CLS:

Vyhovuje Chce zlepšit Špatná
≤ 0,1 0,1 - 0,25 > 0,25

Cílem tedy je dostat se pod hodnotu 0,1 nebo v horším případě nepřekročit 0,25.

Ideální je samozřejmě měřit CLS na celé skupině vašich návštěvníků, například pomocí Chrome UX Reportu.

V takovém případě se dívejte na 75. percentil všech návštěv, jak to u Core Web Vitals bývá doporučováno.

Pokud by vás snad zajímaly detaily o tom, jak se tato metrika přesně počítá, zavítejte na web.dev, kde to lidé z Googlu rozebírají.

Tady jen stručně: Cumulative Layout Shift představuje součet všech posunů layoutu. U každého posunu se měří, jak velkou část obrazovky posun ovlivnil a o jakou vzdálenost se zlobící blok posunul.

Pro potřeby vlastních měření v prohlížečích vzniká Layout Instability API s rozhraním LayoutShift, které má podporu v prohlížečích vycházejících z Chrome. To jen, pokud by vás to nějak moc zajímalo.

Jak to měřit?

CLS je možné získat jak ze syntetických měření, tak od reálných uživatelů (RUM nebo „data pole“).

Jako vždy se i tady mohou výsledky i výrazně lišit, protože nástroje pro syntetická měření umí CLS získat pouze z úvodního načtení stránky, kdežto uživatelská měření obvykle měří celý průběh používání stránky.

Syntetická měření

CLS umí strojově vytáhnout například tyto nástroje:

Měření uživatelů

Data od reálných uživatelů vám poskytnou například následující nástroje:

Znáte nějaké další možnosti, jak CLS efektivně změřit? Napište mi je do komentářů.

Na závěr se podíváme na obecné tipy, jak vylepšit špatné CLS.

Optimalizace CLS

Zamezte poskakování při vykreslování. Zaměřte se na to, abyste v layoutu rezervovali prostor obsahu, který se bude vykreslovat asynchronně – webfontům, obrázkům, videím, komponentám vykreslovaným asynchronním JS:

  • Obrázkům nastavte vždy poměr stran pomocí parametrů widthheight.
  • Dalšímu asynchronnímu obsahu jako je video, prvek iframe nebo komponenty vykreslované pomocí JS držte prostor pomocí technik jako je trik s paddingem.
  • Zajistěte, aby vlastní font nezpůsobil při nahrazování výchozího písma výrazné překreslení stránky.
  • Na místo indikátorů načítání používejte tzv. „skeletony“, které napodobují obsah, na který uživatel čeká.

Fanoušky AMP by mohlo zajímat, že tento framework je stavěný od samých základů tak, aby se CLS rovnalo nebo blížilo nule.

Další obecná doporučení v angličtině od Googlu jsou na web.dev.

PageSpeed.cz - test rychlosti webu

Komentáře

Váš názor? Vaše zkušenosti? Našli jste chybu?