Jak zlepšit skóre INP (Interaction to Next Paint) na webových stránkách

Jak zlepšit skóre INP na webových stránkách? Stručná odpověď: musíte snížit zátěž hlavního vlákna, která zpožďuje vykreslení dalšího snímku poté, co uživatel klikne, klepne nebo provede interakci z klávesnice. K tomu je potřeba rozdělit dlouhé úlohy JavaScriptu, odstranit zbytečné skripty, odlehčit posluchače událostí, optimalizovat zdroje blokující vykreslování, mít pod kontrolou kódy třetích stran a měřit na základě reálných uživatelských dat. Dobré skóre INP je 200 ms nebo méně; rozmezí 200–500 ms vyžaduje zlepšení a hodnota nad 500 ms je považována za špatnou.

INP, neboli Interaction to Next Paint, je v roce 2026 jednou z kritických metrik Core Web Vitals pro SEO a uživatelský komfort. Google už nesleduje jen rychlost načtení stránky, ale i to, jak plynule s ní uživatel po načtení interaguje. Pozdní otevření menu po kliknutí na produktový filtr, tuhnutí tlačítka „přidat do košíku“, pomalá odezva mobilního menu nebo zadrhávání při psaní do formulářového pole – to jsou typické příznaky problémů s INP.

V tomto průvodci se naučíte měřit hodnotu INP, odhalovat technická úzká hrdla způsobující špatné skóre a seznámíte se s konkrétními optimalizačními kroky, které můžete provést jako vývojář, majitel webu nebo správce WordPressu. Na praktických příkladech se také podíváme na nepřímý vliv hostingové infrastruktury, využití CDN a zabezpečeného připojení na výkon. Pokud chcete zvolit infrastrukturu zaměřenou na výkon, můžete zvážit Web hosting balíčky a pro projekty postavené na WordPressu WordPress hosting možnosti.

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

INP měří celkovou rychlost odezvy na interakce uživatele na stránce. Uživatel klikne na tlačítko, přepne záložku, otevře menu, píše do formulářového pole nebo klepne na prvek na mobilu. Prohlížeč tuto interakci zpracuje, spustí JavaScript, provede výpočty stylů a layoutu a následně vytvoří nový vizuální stav na obrazovce. Doba, která uplyne od interakce po tuto vizuální aktualizaci, je hodnocena v rámci INP.

V minulých letech byl důležitý FID (First Input Delay), který se však zaměřoval pouze na zpoždění první interakce. INP oproti tomu komplexněji hodnotí interakce v průběhu celého životního cyklu stránky. Proto lépe reprezentuje reálnou uživatelskou zkušenost v e-shopech, na blozích, v SaaS panelech, firemních webech a členských systémech.

Prahové hodnoty doporučené Googlem jsou následující:

INP je důležité nejen pro SEO, ale i pro konverzní poměr. Pokud se například na mobilu otevře tlačítko filtru na stránce kategorie až za 700 ms, může si uživatel myslet, že akce nefunguje, a znovu na něj kliknout nebo stránku opustit. Naproti tomu rozhraní reagující na úrovni 150–180 ms jsou vnímána jako spolehlivější, rychlejší a profesionálnější.

Jak změřit skóre INP?

Než začnete s optimalizací INP, je nutné provést správné měření. Laboratorní nástroje vám sice ukážou odhadované problémy, ale reálná uživatelská data odrážejí skutečné podmínky zařízení, připojení a prohlížečů v terénu. Nejzdravější přístup je používat oba typy dat společně.

1. Rychlá kontrola pomocí PageSpeed Insights

PageSpeed Insights zobrazí skutečnou uživatelskou hodnotu INP, pokud jsou k dispozici data z Chrome User Experience Report. Výsledky pro mobily a desktopy zkoumejte odděleně. Upřednostněte především mobilní data, protože na telefonech se slabším procesorem se hlavní vlákno snáze zablokuje. Pokud je hodnota INP stránky nad 200 ms, poznamenejte si sekce s příležitostmi a diagnostikou níže.

2. Sledujte přehled Core Web Vitals v Search Console

Přehled Core Web Vitals v Google Search Console uvádí problémy podle skupin URL. Zde můžete zjistit, zda nejsou problematické podobné šablony, nikoli jen jedna stránka. Pokud mají například špatné INP všechny stránky s detailem produktu, problém je pravděpodobně v šabloně, skriptu košíku, pluginu pro komentáře nebo kódu variant produktu.

3. Použijte panel Performance v Chrome DevTools

Panel Performance v Chrome DevTools ukazuje, které funkce JavaScriptu se spouští v okamžiku kliknutí a které úlohy překračují 50 ms a tvoří dlouhé úlohy. Nahrajte kliknutí na menu a prozkoumejte fialové, žluté a zelené bloky v hlavním vlákně. Dlouhé běhy skriptů, opakované přepočítávání stylů a náročné layout úlohy jsou kritickými signály pro INP.

4. Nasaďte monitorování reálných uživatelů

U projektů s vysokou návštěvností je velmi cenné používat RUM (Real User Monitoring). Pomocí knihovny Web Vitals můžete sbírat data o INP a analyzovat je podle URL, typu zařízení, prohlížeče, země a cíle interakce. Data mohou například ukázat, že pouze u uživatelů Androidu trvá kliknutí na mobilní menu 620 ms. Tato informace vám umožní provést cílenou opravu namísto obecné optimalizace.

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

Většina problémů s INP nepochází z odezvy serveru, ale z toho, že prohlížeč v okamžiku uživatelské interakce vykonává příliš mnoho práce. Infrastruktura, doručování souborů, cache a závislosti na třetích stranách však mohou tuto zátěž nepřímo zvyšovat.

Objemné JavaScriptové soubory

Moderní weby načítají velké množství JavaScriptových souborů – šablony, slidery, živý chat, reklamy, analytiku, A/B testování, mapy a komponenty sociálních médií. Soubory se nejen stahují, ale prohlížeč je také parsuje, kompiluje a spouští. Pokud tento proces zaměstnává hlavní vlákno, dochází k opožděné reakci na uživatelské kliknutí.

Dlouhé úlohy

Práce hlavního vlákna trvající déle než 50 ms se považuje za dlouhou úlohu (long task). Jediná 300ms úloha může zdržet uživatelovo kliknutí. Pokud například skript po stisknutí tlačítka filtru přepočítává na straně klienta všech 1000 produktů, může snadno vyhnat hodnotu INP nad 500 ms.

Složitý DOM a nákladné operace layoutu

Příliš mnoho HTML uzlů, hluboce zanořené komponenty, časté změny stylů a chyba zvaná layout thrashing (opakované čtení a zápis) INP zhoršují. Toto riziko se týká zejména mega menu, stránek s výpisem produktů a dlouhých jednostránkových aplikací.

Skripty třetích stran

Reklamní sítě, sledovací pixely, nástroje pro heatmapy, kódy živé podpory a embedy sociálních médií spouštějí kód mimo vaši kontrolu. Pokud tyto kódy v okamžiku interakce využívají hlavní vlákno, může i vaše čistě napsané rozhraní reagovat se zpožděním.

Nabobtnalé pluginy a šablony WordPressu

Na webech na WordPressu může každý plugin přidávat vlastní CSS a JS soubory. Pokud se skript pluginu kontaktního formuláře, který je potřeba pouze na kontaktní stránce, načítá na celém webu, vzniká zbytečná zátěž. Podobně mohou mobilní skóre INP negativně ovlivnit vizuální editory, slidery a vyskakovací okna.

Jak zlepšit skóre INP? Plán implementace krok za krokem

Praktickou odpovědí na otázku, jak zlepšit skóre INP, je přístup: změř, izoluj, zredukuj, rozděl a znovu změř. Následující kroky jsou seřazeny podle priority, kterou technické týmy používají v reálných projektech.

1. Najděte nejproblematičtější interakci

Nejprve určete, která interakce produkuje špatné INP. Je to mobilní menu, tlačítko „přidat do košíku“, panel filtrů, vyhledávací pole nebo odeslání formuláře? Při nahrávání v panelu Performance v DevTools několikrát zopakujte příslušnou akci. V záznamu v sekci Event Timing nebo Interaction prozkoumejte cíl kliknutí a dobu trvání.

Konkrétní příklad: Na jednom e-shopu produkovalo tlačítko filtru kategorií INP 740 ms. Analýza ukázala, že po stisknutí tlačítka se znovu vykreslovaly všechny produktové karty a současně se aktualizovalo 1800 DOM uzlů. Po přesunutí panelu filtru do samostatné komponenty a odložení aktualizace seznamu kleslo INP na 190 ms.

2. Snižte velikost JavaScriptového balíčku

Odstranění nepoužívaného kódu je jedním z nejefektivnějších kroků pro INP. Pomocí nástroje pro analýzu balíčků zjistěte, které knihovny soubor zvětšují. Místo importu celé knihovny importujte pouze potřebný modul. Například místo objemné knihovny pro práci s datem lze použít lehčí alternativy nebo nativní Intl API.

• Vypněte nepoužívané funkce šablony.
• Nenačítejte skripty sliderů, galerií a animací tam, kde nejsou potřeba.
• Používejte moderní build nástroje podporující tree shaking.
• Neposílejte kód administračního panelu do návštěvnické části.
• Staré polyfilly servírujte pouze prohlížečům, které je skutečně potřebují.

3. Rozdělte dlouhé úlohy na menší části

Aby prohlížeč mohl reagovat na uživatelské interakce, musí se hlavní vlákno v pravidelných intervalech uvolňovat. Místo provádění velkých výpočtů najednou je rozdělte na menší části. K tomuto účelu lze použít setTimeout, scheduler.postTask, requestIdleCallback nebo funkce pro časování ve frameworku. Cílem je vytvořit menší úlohy o délce 20–40 ms namísto jedné 300ms úlohy.

Pokud například potřebujete filtrovat a překreslit tabulku s 5000 řádky, nejprve aktualizujte prvních 50 řádků, které uživatel vidí, a zbytek zpracujte pomocí virtualizace nebo úloh na pozadí. Výsledek kliknutí se tak uživateli zobrazí rychle a zbytek zpracování neblokuje prohlížení.

4. Zjednodušte posluchače událostí

Spouštění náročných funkcí při každé události click, input, scroll a keydown INP zhoršuje. Chybou je zejména odesílání API požadavku při každém stisku klávesy ve vstupním poli nebo přepočítávání celého seznamu. Pomocí technik debounce a throttle snižte frekvenci provádění operací.

• Ve vyhledávacím poli použijte debounce 300 ms.
• U scroll událostí upřednostněte pasivní posluchače (passive listener).
• Místo přidávání listenerů jednotlivě na stovky prvků použijte delegování událostí (event delegation).
• Po kliknutí nejprve poskytněte vizuální zpětnou vazbu a náročnou operaci spusťte až poté.

5. Poskytněte uživateli okamžitou vizuální zpětnou vazbu

Protože INP souvisí s dalším vykreslením (paint), je důležité vytvořit ihned po uživatelské interakci alespoň malou vizuální změnu. Přechod tlačítka do aktivního stavu, indikátor načítání, skeleton obrazovka nebo první snímek otevírajícího se panelu dávají uživateli pocit, že systém pracuje. Místo čekání na náročnou API odpověď a následné změny celého rozhraní najednou navrhněte rychlou zpětnou vazbu a postupnou aktualizaci.

6. Snižte náklady na render a layout

Na INP má vliv nejen JavaScript, ale i CSS a layout. Změna velikosti, pozice a stylu mnoha prvků po kliknutí je nákladná. V CSS animacích je obvykle výkonnější používat vlastnosti transform a opacity namísto width, height, top a left. U rozsáhlých seznamů použijte virtualizaci; nenechávejte v DOM stovky karet, které nejsou vidět na obrazovce.

Vyhněte se chybě layout thrashing. To znamená, že ve smyčce nejprve nepřečtete šířku prvku, pak nezapíšete styl a poté znovu nečtete. Seskupte operace čtení a zápisu. I tato jednoduchá úprava může na složitých stránkách ušetřit desítky milisekund.

7. Kontrolujte kódy třetích stran

U každého externího skriptu si položte otázku: Přispívá tento kód přímo ke konverzi? Pokud je jeho přínos nízký, odstraňte ho, odložte ho nebo ho načítejte pouze na potřebných stránkách. Kód živé podpory může mít smysl na stránce pokladny, ale nemusí být nutné, aby se spouštěl při prvním načtení na všech článcích blogu. Reklamní a analytické skripty načítejte pokud možno s defer nebo async, abyste zabránili jejich vměšování se před kritické interakce.

8. Přesuňte náročné výpočty do Web Workeru

Pokud úlohy jako filtrování produktů, zpracování velkého JSONu, šifrování, transformace dat nebo složité výpočty blokují hlavní vlákno, použijte Web Worker. Worker provádí tuto práci na pozadí, zatímco hlavní vlákno nadále reaguje na uživatelské interakce. Ne každá úloha se musí přesouvat do Workeru, ale pro operace spotřebovávající CPU déle než 100 ms může přinést značný užitek.

9. Optimalizujte náklady na framework a hydrataci

Ve strukturách jako React, Vue, Angular, Next.js nebo Nuxt může INP ovlivnit cena hydratace po prvním načtení. Místo zinteraktivnění celé stránky zvažte přístupy jako architektura ostrovů, částečná hydratace nebo serverové komponenty. Obsah, který nevyžaduje interakci, ponechte statický. Části jako modální okno, pole pro komentáře nebo komponenta doporučení je lepší načítat, až když je uživatel potřebuje.

10. Na webech na WordPressu snižte zátěž pluginů

Pokud používáte WordPress, vytvořte si pro optimalizaci INP inventář pluginů. Odstraňte duplicitní pluginy, které dělají stejnou práci. Zkontrolujte, zda pluginy pro formuláře, galerie, slidery a vyskakovací okna nenačítají soubory na všech stránkách. Pomocí výkonnostních pluginů s funkcí Asset Unload můžete vypnout nepotřebné CSS a JS soubory na úrovni jednotlivých stránek.

Příklad z praxe: Na jednom firemním WordPress webu bylo mobilní INP domovské stránky 560 ms. Odstranil se plugin slideru a oblast hrdiny se přepracovala pomocí odlehčeného HTML/CSS, skript vyskakovacího okna se zpozdil o 5 sekund a JS soubor kontaktního formuláře se načítal pouze na kontaktní stránce. Výsledkem bylo snížení mobilního INP na 210 ms a po dalších drobných úpravách na 175 ms.

Jak hosting a infrastruktura ovlivňují skóre INP?

INP je primárně metrikou odezvy na straně klienta, takže rozhodující je zátěž hlavního vlákna v prohlížeči. Hostingová infrastruktura však není zcela bez vlivu. Rychlá odezva serveru, správné cachování, moderní verze PHP, podpora HTTP/2 nebo HTTP/3, CDN a komprese zajišťují rychlejší a plynulejší doručování souborů. To pomáhá kontrolovanějšímu běhu hlavního vlákna, zejména během prvního načítání.

Na nekvalitní infrastruktuře zhoršuje uživatelský komfort vysoké TTFB, pozdě přicházející zdroje, nekonzistentní chování cache a vysoké zatížení serveru. Pokud necachovaný WordPress web provádí při každém požadavku náročné PHP a databázové operace, je stránka připravena k interakci později. Proto by se práce na INP neměla zcela oddělovat od optimalizací LCP a TTFB.

• Používejte cachování na straně serveru.
• Upřednostněte PHP 8.x a aktuální verze databáze.
• Statické soubory servírujte přes CDN.
• Aktivujte kompresi Brotli nebo Gzip.
• Udržujte aktuální konfiguraci SSL/TLS; pro zabezpečené připojení si prohlédněte stránku SSL certifikát.
• Pokud zakládáte nový projekt nebo firemní web, použijte pro správný výběr domény nástroj Kontrola domény.

Tabulka priorit pro optimalizaci INP

Následující tabulka shrnuje, kdy provést jaké vylepšení na typickém webu. Výsledky se mohou u každého projektu lišit, proto po změnách znovu měřte pomocí PageSpeed Insights, Search Console a reálných uživatelských dat.

Technický kontrolní seznam pro vývojáře

Vylepšování INP by se mělo přetavit do kontrolního seznamu, který lze v týmu sledovat. Jinak hrozí, že jednorázové zrychlení webu bude po pár měsících znehodnoceno novými pluginy, kódy kampaní a změnami designu.

• Pro každou kritickou šablonu stanovte cíl mobilního INP pod 200 ms.
• V rámci pull requestů kontrolujte nárůst velikosti balíčku.
• Před přidáním nového skriptu třetí strany otestujte jeho dopad na výkon.
• Pomocí nahrávání v DevTools Performance změřte alespoň interakce s mobilním menu, vyhledáváním, formulářem a nákupem.
• Snažte se dlouhé úlohy snížit pod 50 ms; pokud to není možné, rozdělte je.
• V animacích upřednostňujte transform a opacity.
• Pro rozsáhlé seznamy používejte stránkování, nekonečný scroll nebo virtualizaci.
• Data RUM reportujte měsíčně a sledujte upozornění v Search Console.

Časté chyby při optimalizaci INP

Instalace pouze cache pluginu

Cache je důležitá, ale není jediným řešením špatného INP. Cache může zajistit rychlejší doručení stránky, ale automaticky neopraví náročný JavaScriptový kód, který se spouští při uživatelském kliknutí. Cache je proto třeba zvažovat společně s optimalizací kódu.

Sledování laboratorního skóre a zapomínání na reálného uživatele

Testy v Lighthouse jsou užitečné, ale samy o sobě nestačí. Reální uživatelé přicházejí s různými zařízeními, sítěmi a prohlížeči. Zejména low-end Android zařízení odhalují problémy s INP, které nejsou při desktopových testech vidět.

Náhodné odkládání všech skriptů

Techniky defer a delay je třeba používat opatrně. Špatná konfigurace může rozbít menu, košík, formulář nebo nákupní proces. Skripty kritických interakcí by měly být chráněny, zatímco zbytečné kódy a kódy třetích stran by měly být odkládány kontrolovaně.

Zaměření na vizuální výkon a zanedbání interakce

Komprese obrázků je pro LCP velmi cenná, ale ne vždy vyřeší problém s INP. Pokud je problém v kódu, který se spouští po kliknutí, samotná optimalizace obrázků stačit nebude. Core Web Vitals je třeba řešit holisticky.

SEO strategie zaměřená na INP pro rok 2026

V SEO přístupu pro rok 2026 se technický výkon, kvalita obsahu a spolehlivá infrastruktura hodnotí společně. AI Overviews od Googlu a pokročilé vyhledávací zážitky mají tendenci upřednostňovat stránky, které uživateli nabízejí nejrychlejší a nejuspokojivější odpověď. Optimalizace INP proto není jen prací vývojářů, ale společnou odpovědností týmů SEO, UX, obsahu a infrastruktury.

Na blogovém článku musí svižně fungovat obsahové menu, filtr kategorií nebo formulář pro komentáře; na e-shopu musí výběr velikosti, změna varianty a přidání do košíku reagovat okamžitě. Na firemních webech nesmí mít zpoždění poptávkový formulář, mobilní menu a kontaktní tlačítka. Pokud uživatel vnímá web jako rychlý, zůstane na něm déle, projde více stránek a zvýší se pravděpodobnost konverze.

Na straně Hostragons můžete volbou výkonově orientovaného hostingu, aktuálních serverových technologií a bezpečné infrastruktury vytvořit pevný základ pro své technické SEO práce. Správa domény, hostingu a bezpečnostní konfigurace z jednoho centra snižuje provozní zátěž, což vašemu týmu umožní více se soustředit na uživatelský komfort a kvalitu obsahu. Pro související řešení se podívejte na stránky Firemní hosting, VPS server a SSL certifikát.

Závěr

Podstatou zlepšení skóre INP je nezaměstnávat prohlížeč v okamžiku uživatelské interakce zbytečnou prací. Nejprve pomocí reálných dat najděte nejpomalejší interakce; poté snižte zátěž JavaScriptem, rozdělte dlouhé úlohy, zjednodušte posluchače událostí, snižte náklady na vykreslování a dostaňte pod kontrolu kódy třetích stran. Hosting, cache, CDN a aktuální bezpečnostní konfigurace pak poskytují silný základ, který tento proces podporuje.

Pokud chcete svůj web učinit rychlejším, spolehlivějším a přívětivějším pro uživatele, začněte malým měřením: zkontrolujte mobilní hodnotu INP své nejkritičtější stránky a aplikujte první tři kroky z tohoto průvodce. Pro výkonný start v oblasti infrastruktury se můžete podívat na řešení Hostragons a v klidu a s rozvahou zhodnotit hostingový plán, který odpovídá vašim potřebám.

Často kladené otázky

Jaké by mělo být skóre INP?

Dobré skóre INP je 200 ms nebo méně. Rozmezí 200–500 ms ukazuje oblast, kterou je třeba zlepšit, a hodnota nad 500 ms značí špatný uživatelský komfort. Přednostně by se měla vyhodnocovat mobilní uživatelská data.

Jaký je rozdíl mezi INP a FID?

FID měří pouze zpoždění při první interakci uživatele, zatímco INP hodnotí kvalitu odezvy interakcí v průběhu celého životního cyklu stránky. Proto INP komplexněji odráží skutečnou uživatelskou zkušenost.

Proč na WordPress webech vychází INP špatně?

Obvykle je to kvůli příliš mnoha pluginům, těžké šabloně, zbytečnému CSS/JS načítanému na všech stránkách, sliderům, skriptům vyskakovacích oken a kódům třetích stran. Výrazné zlepšení přináší vyčištění pluginů, vypínání souborů podle stránek a použití odlehčené šablony.

Opraví změna hostingu skóre INP?

Hosting sám o sobě neopraví objemný JavaScript nebo dlouhé úlohy, ale rychlý server, dobrá cache, CDN, aktuální PHP a stabilní doručování zdrojů optimalizaci INP podporují. Jeho vliv je tedy nepřímý, ale zejména u WordPress webů důležitý.

Za jak dlouho se projeví výsledky optimalizace INP?

Po provedení úprav kódu a pluginů lze výsledek vidět v laboratorních testech okamžitě. V Search Console a reálných uživatelských datech Chrome se změna obvykle projeví až za několik týdnů, protože je potřeba nashromáždit dostatek uživatelských dat.