Metrika JS Long Tasks (JSLT): když váš web zapomene dýchat

Představte si, že kliknete na tlačítko a nic se nestane. Web prostě zamrzne. Většinou za to může „long task“ – tedy příliš dlouho prováděná úloha v JavaScriptu. Moment, kdy prohlížeč usilovně přemýšlí a ignoruje všechno ostatní.

V tomto článku si vysvětlíme, jak digitální zácpy v podobě dlouhých úloh měří metrika JS Long Tasks a co tyto zácpy mohou znamenat pro vaše uživatele a váš byznys.

Zamrzávání webu kvůli JavaScriptu: více než 50 ms je už moc

Programovací jazyk webu, JavaScript, je sice přírody dříč, ale má jednu zásadní vlastnost. Běží standardně jen v jednom vlákně.

Prohlížeč je jako kuchař, který umí dělat pouze jednu věc najednou. Pokud krájí cibuli na obří guláš, nemůže zároveň zvednout telefon šéfovi.

Long Task (dlouhá úloha v JavaScriptu) je jakákoliv operace, která trvá déle než 50 ms. Tato hranice vychází z modelu RAIL. Uživatel vnímá odezvu do 100 ms jako okamžitou. Těch zbývajících 50 ms je rezerva pro prohlížeč, aby stihl zareagovat na vaše kliknutí.

Takhle to vidí prohlížeč. Druhé kliknutí uživatele se trefilo do dlouhé úlohy. Prohlížeč je teď onen kuchař, který krájí cibuli a nemůže vzít telefon svému šéfovi.

Hlavní vlákno prohlížeče je něco jako scénář, podle kterého prohlížeč zaměstnává procesor a paměť. Když běží long task, hlavní vlákno je zablokované. Uživatel v tu chvíli nemůže klikat nebo psát.

Hodně JS metrik, hodně zmatků

Všichni chceme zelená čísla Core Web Vitals. Metrika JS Long Tasks není součástí téhle základní sady, ale může leccos napovědět.

Klienti se expertů z PageSpeed.ONE často ptají, jaký je rozdíl mezi Long Tasky a metrikami jako Interaction to Next Paint (INP) nebo Total Blocking Time (TBT).

Konkrétně metriky TBT a JSLT jsou si podobné. Stručně řečeno: TBT je přísný test v laboratoři, Long Tasks v RUM jsou záznamy o tom, jak se web skutečně zadýchává v rukou uživatelů. Total Blocking Time (TBT) se však měří synteticky a jen při načítání. JSLT se měří u reálných uživatelů. Více o rozdílech mezi syntetickým a RUM měřením najdete v článku synth vs CrUX vs RUM.

Připravili jsme pro vás přehlednou srovnávací tabulku:

Vlastnost	Total Blocking Time (TBT)	JS Long Tasks (JSLT)
Zdroj dat	Laboratoř (simulovaný bot)	Reální uživatelé (RUM)
Časové okno	Jen při načítání (FCP → TTI)	Celá životnost stránky (i po načtení)
Co se počítá	Jen čas nad limit 50 ms	Celá délka trvání všech úloh
Hlavní cíl	Rychlá technická kontrola	Business analýza a skutečné UX
Typický nástroj	Lighthouse, PageSpeed.ONE Monitoring	SpeedCurve RUM

A metrika INP? Jak TBT, tak JSLT mohou mít přímou, ale často i nepřímou souvislost s tou metrikou ze sady Core Web Vitals.

Příběhy z praxe: Innogy a e-shop klienta

Kdo neumí měřit, ten neumí řídit. My měříme, abychom řídili rychlost webů, protože má vliv na byznysové parametry.

Pojďme se podívat, jak to vypadá v reálném světě u našich klientů.

Innogy: Jak jsme zkrotili interaktivitu

U klienta Innogy jsme v PageSpeed.ONE bojovali s pomalými JS metrikami na mobilních zařízeních. Analýza ukázala, že hlavní vlákno blokují objemné skripty a složité styly.

Rozbitím dlouhých úloh na menší části jsme snížili metriku INP o 38 %.

Web je nyní plynulý i na levnějších telefonech. Případovou studii připravujeme.

Méně javascriptových ucpávek, více objednávek

U jiného klienta z oboru e-commerce jsme v našich analýzách našli jasnou souvislost. Čím delší byly JS Long Tasks a metrika INP, tím nižší konverze.

Modrá linka je konverzní poměr, oranžové sloupečky hodnota metriky. Čím více dlouhých úloh, tím nižší konverze.

Dlouhé úlohy totiž „zmrazily“ web v důležitých momentech. Právě proto se u klienta dlouhodobě zaměřujeme na JS metriky, jejichž optimalizace pomáhá udržet zákazníky v nákupním procesu.

Stručně řečeno: plynulý web bez Long Tasků může přímo zvyšovat vaše tržby. Je to i váš případ? Dá se to zjistit naší byznysovou analýzou.

Jak optimalizovat metriku JS Long Tasks?

Diagnostika je základ. Bez ní jen věštíte z křišťálové koule. Potřebujete monitoring a Chrome DevTools. Pro praktické tipy na rozdělování dlouhých úloh se podívejte na náš článek o optimalizaci metriky INP.

Jak se pustit více do hloubky? Máte v zásadě dvě cesty.

1. Chrome DevTools: Otevřete panel Performance a nahrajte akci na webu. Long Tasky uvidíte jako bloky s červeným pravým rohem. Je to jasné varování.
2. Long Tasks API: Pokud jste vývojáři, můžete data sbírat tímto přes toto rozhraní v prohlížeči.

// Ukázka sledování Long Tasků v prohlížeči
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`Pozor, Long Task! Trvání: ${entry.duration}ms`);
  }
});
observer.observe({entryTypes: ['longtask']});

Stačí se podívat do konzole a hned vidíte, kdo v kuchyni nestíhá.

Kuchařka pro lepší JS Long Tasks

Optimalizace javascriptových metrik je náročná, co si budeme povídat. Vždy je nutné dívat se na web v širším kontextu a z možných řešení vybírat to nejefektivnější. S tím vám poradenský tým PageSpeed.ONE umí pomoci.

Optimalizace Long Tasků není magie, je to disciplína. Tady jsou základní postupy:

• Yielding (Uvolňování): Pokud máte dlouhý výpočet, přerušte ho. Použijte techniky jako setTimeout(0) nebo moderní scheduler.yield(). Při práci s Reactem se podívejte na naše tipy v článku o optimalizaci Reactu. Prohlížeč si díky tomu stihne „odskočit“ a zpracovat kliknutí uživatele.
• Code Splitting (Rozdělení kódu): Neposílejte do prohlížeče všechen kód naráz. Rozdělte ho na menší balíčky, které se načtou jen tehdy, když jsou potřeba.
• Optimalizace DOMu: Čím méně prvků má vaše stránka, tím rychlejší jsou úpravy. Obří struktura DOM prvků zpomaluje každou operaci prohlížeče.
• Web Workers: Tip pro geeky. Těžké výpočty odsuňte do „vedlejší kanceláře“ (vedlejšího vlákna). Hlavní vlákno tak zůstane volné pro interakci s uživatelem.

Monitoring PLUS: Vaše oko, které nikdy nespí

Sledovat Long Tasky u sebe na počítači je jen začátek. Ale co vaši zákazníci? Náš nástroj Monitoring PLUS sleduje metriky za vás. Díky tomu včas zjistíte, že nový marketingový skript nebo práce samotných vývojářů začaly zhoršovat výkon vašeho webu. Více o monitoringu rychlosti webu najdete v našem průvodci monitoringem.

Pomůžeme vám s monitoringem Core Web Vitals a v případě větších změn vám pošleme upozornění.

Chodí vám upozornění na změny javascriptových metrik a rychlosti vašeho webu obecně?

Závěr

JS Long Tasks mohou být nenápadným zabijákem uživatelské zkušenosti. Můžete mít krásný design, ale pokud web nereaguje, konverze jdou dolů. Soustřeďte se na to, aby vaše hlavní vlákno mělo vždy prostor k dýchání a hlídejte metriky INP, TBT a JSLT.

Co dál?

• Chcete vědět, jak je na tom váš web? Testujte.
• Potřebujete optimalizoovat metriky? Mrkněte se na analýzu SpeedSprint.