LCP, CLS, TBT? Co znamenají tyto pojmy v testu rychlost stránky

Výsledek testu rychlosti stránky obsahuje řadu zkratek a čísel, které samy o sobě nic neřeknou, dokud člověk neví, co konkrétně měří. Běžný test rychlosti stránky nejčastěji uvádí hodnoty LCP, CLS a TBT, což jsou tři metriky, které dohromady popisují, jak web působí na skutečného návštěvníka – vyzkoušet si ho můžete zde. Pojďme si společně přehledně vysvětlit, co tyto jednotlivé pojmy znamenají a proč na nich záleží.

LCP měří, jak rychle se zobrazí hlavní obsah

LCP, zkratka pro Largest Contentful Paint, měří dobu, za kterou se na obrazovce vykreslí největší viditelný prvek stránky. Nejčastěji jde o hlavní fotografii, banner nebo velký textový blok v horní části stránky. Doporučená hodnota je do 2,5 sekundy, cokoliv nad touto hranicí znamená, že návštěvník čeká déle, než uvidí obsah, kvůli kterému na stránku přišel.

Za pomalým LCP obvykle stojí nejčastěji neoptimalizovaný obrázek, pomalý hosting nebo skripty a styly, které brání prohlížeči začít vykreslovat obsah dřív. U webů s produktovými galeriemi nebo velkými úvodními fotkami patří tato metrika mezi ty, které je možné zlepšit nejrychleji – stačí zmenšit velikost souborů.

Test rychlosti stránky obvykle rozděluje LCP do tří pásem, dobré, potřebuje zlepšit a špatné. Hranice mezi pásmy nejsou náhodné, vycházejí z toho, jak dlouhé čekání ještě vnímá uživatel jako plynulé a od kdy už začíná mít pocit, že se stránka nenačítá. Právě proto stojí za to sledovat konkrétní číslo, ne jen celkové barevné hodnocení.

CLS – jak moc se obsah stránky během načítání hýbe

CLS, tedy Cumulative Layout Shift, sleduje vizuální stabilitu stránky. Popisuje, jak moc se prvky na obrazovce posouvají v době, kdy se stránka teprve načítá. Skóre se pohybuje od nuly výš, přičemž nula znamená žádné neočekávané posuny a čím vyšší číslo, tím nestabilnější stránka pro uživatele je. Cílová hodnota bývá pod 0,1.

Typickým viníkem je obrázek nebo reklama bez předem definovaných rozměrů. Prohlížeč neví, kolik místa má prvku vyhradit, dokud se nenačte, a teprve pak zbytek obsahu posune.

Podobný problém způsobují i webfonty, které se načtou později než systémové písmo. Prohlížeč nejdřív vykreslí text výchozím fontem, a jakmile se stáhne správný, přepočítá jeho rozměry a text se posune. U webů s výraznou typografií jde o častou a přitom snadno přehlédnutelnou příčinu vysokého CLS.

TBT – jak dlouho stránka nereaguje na kliknutí

TBT, Total Blocking Time, měří celkovou dobu mezi prvním vykreslením obsahu a okamžikem, kdy je stránka plně interaktivní, po kterou hlavní vlákno prohlížeče blokovaly dlouhé úlohy v JavaScriptu. Pokud jedna taková úloha trvá déle než 50 milisekund, počítá se do TBT čas nad tímto limitem. Doporučovaná hranice TBT bývá kolem 200 až 300 milisekund na běžném mobilním zařízení.

Vysoký TBT znamená, že návštěvník klikne na tlačítko nebo odkaz, a stránka na to zareaguje se zpožděním, protože prohlížeč je zaneprázdněný zpracováním skriptů. Podrobnější technický popis toho, jak se TBT počítá a co ho typicky způsobuje, popisuje článek o metrice Total Blocking Time.

Nejčastější příčinou vysokého TBT bývá JavaScript, který se stránka snaží zpracovat hned po sobě, aniž by rozdělila práci na menší kousky. Reklamní skripty, analytické nástroje a různé pluginy třetích stran patří mezi typické zdroje dlouhých úloh, které hlavní vlákno prohlížeče zaneprázdní na desítky nebo stovky milisekund najednou.

Co dělat s výsledky testu rychlosti stránky

Tři metriky dohromady dávají mnohem přesnější obraz než jediné celkové skóre. Web s dobrým LCP, ale vysokým TBT bude sice vypadat rychle, jenže bude nereagovat na interakce, zatímco web s dobrým TBT, ale špatným CLS bude reagovat rychle, jenže obsah se pod prsty uživatele bude posouvat. SEO test online proto musíte číst vždy jako celek, ne se soustředit jen na jedno číslo.

Pořadí, ve kterém se metriky opravují, také není lhostejné. Zásah do obrázků kvůli LCP obvykle nezhorší CLS ani TBT, zatímco úprava JavaScriptu kvůli TBT může nechtěně ovlivnit i to, jak rychle se stránka vykreslí. Rozumnou strategií je začít u LCP, pokračovat u CLS a JavaScript řešit až jako poslední krok.

Přehled toho, co všechno komplexní SEO analýza dokáže odhalit kromě rychlosti, popisuje i článek o tom, co SEO analýza odhalí a co od ní naopak nečekat.

Tři čísla, ale jeden celkový dojem

LCP, CLS a TBT dohromady popisují tři různé aspekty toho, jak web působí na návštěvníka, rychlost zobrazení hlavního obsahu, vizuální stabilitu a odezvu na interakce. Jakmile máte alespoň základní tušení, co která metrika měří, dokážete z výsledků testu rychlosti stránky vyčíst přesně, na které konkrétní věci se při optimalizaci zaměřit nejdřív.

Znalost jednotlivých metrik se vám bude hodit i při komunikaci s vývojářem nebo agenturou, která web spravuje. Místo obecného zadání “zrychlete web” se dá přesně říct, která metrika je nejhorší a co by se u ní mělo zlepšit, což zadání zpřesní a šetří čas na obou stranách.

About
Latest Posts

Michal Šigut

Muž mnoha profesí i zájmů, ale primárně táta dvou malých rošťáků. Bavit se s vámi můžu o všem od fyziky přes sport, historii i počítačové hry. Strašně rád hraji deskovky všeho druhu a a s kamarády jsme za tímto účelem založili i takový menší nadšenecký kroužek. A samozřejmě také bloguji. Moje články si můžete přečíst přímo tady.