INP (Interaction to Next Paint): Jak optimalizovat klíčovou metriku Google

INP (Interaction to Next Paint) se čím dál více stává jedním z nejdůležitějších ukazatelů rychlosti webu. Měří, jak svižně stránka reaguje na kliknutí, psaní nebo jiné akce uživatele. Pokud je odezva pomalá, trpí nejen uživatelský zážitek, ale i výsledky ve vyhledávání. Jak tuto metriku zlepšit v praxi?

Co je INP a proč je důležité

INP (Interaction to Next Paint) je metrika z rodiny Core Web Vitals, kterou zavedl Google jako náhradu za dřívější FID (First Input Delay). Jejím cílem je měřit skutečnou odezvu webu na uživatelské interakce. Tedy jak rychle stránka reaguje na kliknutí, psaní, dotyk nebo jiný vstup.

Na rozdíl od FID, který sledoval pouze první interakci, INP vyhodnocuje celé chování stránky během návštěvy. Jinými slovy, nezajímá ho jen první kliknutí, ale to nejpomalejší (nebo reprezentativní) zpoždění, které uživatel zažije.

Jak INP funguje v praxi

INP měří čas od interakce uživatele do okamžiku, kdy se zobrazí vizuální odezva (tzv. next paint). Do této doby se započítávají tři klíčové fáze:

• Input delay – zpoždění, než prohlížeč začne reagovat,
• Processing time – čas, kdy se zpracovává JavaScript (např. klik handler),
• Presentation delay – doba, než se změna vykreslí na obrazovce.

Výsledná hodnota INP tedy nepředstavuje jen jedno číslo, ale souhrn toho, jak web reaguje při reálném používání. Nejde o rychlost načtení stránky, ale o to, jak plynule a okamžitě působí při každé interakci.

Jaké hodnoty jsou dobré

Podle Google Search Central jsou hranice INP nastavené tak, aby odpovídaly tomu, jak uživatelé skutečně vnímají rychlost webu při interakci:

• do 200 ms → dobrá odezva,
• 200–500 ms → potřebuje zlepšení,
• nad 500 ms → špatná odezva.

Tyto hodnoty nejsou náhodné. Vycházejí z analýzy reálného chování uživatelů (tzv. field data), která Google sbírá například prostřednictvím Chrome User Experience Report. 

Nejčastější příčiny špatného INP

Špatné INP obvykle nevzniká jedním problémem, ale kombinací více faktorů zpomalující reakci webu na uživatelské akce. Nejčastěji jde o přetížené hlavní vlákno, neoptimalizovaný JavaScript nebo náročné vykreslování.

1) Dlouhé JavaScriptové úlohy (Long Tasks) – dlouhé běhy JavaScriptu blokují hlavní vlákno, takže prohlížeč nemůže reagovat na interakci. Uživatel klikne, ale reakce přijde až po dokončení skriptu. Typicky jde o velké balíky JS nebo složité výpočty, které běží bez přerušení.

2) Přetížené hlavní vlákno (Main Thread) – hlavní vlákno zpracovává JavaScript, vykreslování i uživatelské vstupy. Pokud je zahlcené více úlohami najednou, interakce se zpožďují a rozhraní působí pomalu nebo zamrzá.

3) Špatná práce s DOM – velké nebo časté změny v DOM nutí prohlížeč opakovaně přepočítávat layout a vykreslovat stránku. To zpomaluje reakce a zvyšuje tzv. presentation delay.

4) Náročné vykreslování – složité animace, velké obrázky nebo změny layoutu (např. přes width/height) mohou zpomalit vykreslení. I když se akce zpracuje rychle, uživatel vidí výsledek se zpožděním.

5) Skripty třetích stran – externí skripty jako analytika, reklamy nebo chat widgety často běží paralelně s vaším kódem a zatěžují stránku. Mohou blokovat hlavní vlákno a negativně ovlivnit odezvu.

6) Špatná priorita úloh – pokud méně důležité operace (např. načítání dat nebo tracking) běží ve stejný moment jako interakce uživatele, mohou zpomalit reakci. Chybí-li prioritizace, trpí právě INP.

7) Reálné podmínky uživatelů – INP vychází z reálných dat, takže zohledňuje i slabší zařízení, pomalejší CPU nebo horší připojení. Web, který je rychlý na výkonném počítači, může být v praxi výrazně pomalejší.

Na hodnotu INP mají zásadní vliv především blokující JavaScript (long tasks), přetížené hlavní vlákno, náročné operace s DOM a rendering i skripty třetích stran. Všechny tyto faktory spolu úzce souvisejí a vedou k jednomu výsledku – prohlížeč nedokáže včas zpracovat interakci a reagovat na uživatele. Právě tuto celkovou odezvu a její zpomalení INP velmi přesně zachycuje.

Jak optimalizovat INP

1) Rozdělení JavaScriptu (code splitting) – velké JavaScriptové balíky rozdělte na menší části, které se načítají až ve chvíli, kdy jsou skutečně potřeba. Tím snížíte zátěž hlavního vlákna při načtení stránky a omezíte blokování interakcí, protože prohlížeč nemusí zpracovávat vše najednou.

2) Odstranění long tasks – dlouhé běhy JavaScriptu rozdělte na menší úseky pomocí nástrojů jako requestIdleCallback, setTimeout (tzv. chunking) nebo Web Workers. Cílem je, aby se náročné operace nepřerušovaně „nelepily“ na hlavní vlákno a neblokovaly reakci na uživatele.

3) Prioritizace interakce – zajistěte, aby uživatelské akce (kliknutí, psaní) měly vždy přednost před méně důležitými procesy. Ostatní skripty, jako je tracking nebo načítání doplňkového obsahu, by měly běžet na pozadí nebo se spouštět se zpožděním.

4) Optimalizace renderingu – minimalizujte změny layoutu a omezte náročné přepočty stránky. Místo vlastností jako width nebo top používejte transform a opacity, které jsou prohlížečem zpracovávány efektivněji a méně zatěžují vykreslování.

5) Lazy loading a defer skriptů – používejte atributy defer nebo async, aby se JavaScript nenačítal blokujícím způsobem. Skripty se tak spustí až ve vhodný moment a nebrání rychlé reakci stránky na první i další interakce.

6) Audit třetích stran – pravidelně kontrolujte externí skripty (analytika, reklamy, widgety) a odstraňte ty, které nejsou nezbytné. U zbylých zvažte odložené načítání nebo spuštění až po interakci, aby zbytečně nezatěžovaly výkon stránky.

Optimalizace INP není o jedné změně, ale o celkovém přístupu k výkonu. Cílem je uvolnit hlavní vlákno, omezit blokující operace a zajistit, aby prohlížeč mohl kdykoliv rychle reagovat na uživatele.

INP a infrastruktura

INP se často spojuje hlavně s frontendem, ale významnou roli hraje i infrastruktura. Server, síť i způsob nasazení aplikace ovlivňují, jak rychle se načtou skripty a jak plynule může web reagovat na interakce. Pokud se JavaScript načítá pomalu kvůli vysoké latenci nebo chybějící cache, zvyšuje se riziko blokování hlavního vlákna a zhoršení odezvy.

Důležitý je také backend. Mnoho interakcí závisí na API nebo databázi, a pokud server reaguje pomalu, uživatel čeká na výsledek. To se přímo promítá do vnímané rychlosti webu, i když samotný prohlížeč funguje správně.

Roli hraje i stabilita a škálování. Výpadky nebo kolísání výkonu mohou způsobit výrazné zpomalení některých interakcí, které INP zachytí. Proto je důležitá dostatečná kapacita a schopnost infrastruktury reagovat na zátěž.

Pomáhá také průběžný monitoring a práce s daty. Platforma jako ZonerCloud umožňuje kombinovat výkon, škálování a dohled nad provozem, zatímco pro menší projekty může stačit hosting od CZECHIA.COM.

INP tedy není jen otázkou optimalizace JavaScriptu v prohlížeči. Pokud infrastruktura nestíhá, projeví se to i na interakcích. Rychlý server, nízká latence a stabilní provoz jsou proto základem pro plynulý uživatelský zážitek i dobré hodnoty této metriky.