INP (Interaction to Next Paint) – Co to je a jak ovlivňuje SEO?

📌 INP (Interaction to Next Paint) je nová metrika v Core Web Vitals, která měří responsivitu webu – tedy jak rychle web reaguje na uživatelské akce.

📅 Od března 2024 nahradila metrika INP starší FID (First Input Delay) jako klíčový faktor hodnocení uživatelské zkušenosti.

1️⃣ Co INP měří?

🔹 INP měří celkovou dobu odezvy webu na interakci uživatele – od kliknutí, stisknutí klávesy nebo dotyku po zobrazení odpovědi v UI (např. otevření menu, zobrazení modálního okna).

Metrika zahrnuje tři části:
1️⃣ Zpoždění vstupu (Input Delay) – Jak dlouho trvá, než prohlížeč začne zpracovávat akci uživatele.
2️⃣ Zpracování události (Processing Time) – Jak dlouho trvá provedení kódu souvisejícího s interakcí.
3️⃣ Vykreslení změny (Presentation Delay) – Jak dlouho trvá aktualizace vizuálu na stránce.

💡 Cíl: Web by měl reagovat co nejrychleji – ideálně pod 200 ms.

2️⃣ Jaké hodnoty INP jsou považovány za dobré?

📊 Google hodnotí INP podle těchto práhů výkonu:

3️⃣ Proč Google nahradil FID metrikou INP?

FID (First Input Delay) měřil pouze první interakci, zatímco INP měří všechny interakce na stránce a poskytuje kompletnější obraz o odezvě webu.

🔹 Příklad:

• FID měřil pouze první kliknutí na stránce.
• INP měří všechny interakce, což lépe odráží reálný uživatelský zážitek.

4️⃣ Jak zlepšit INP?

✅ Minimalizace hlavní vlákna (Main Thread Optimization)

• Odstranit zbytečné JavaScriptové blokace – například neefektivní event listenery.
• Lazy loading pro nenačítané skripty.
• Používat Web Workers pro provádění těžkých operací mimo hlavní vlákno.

✅ Optimalizace JavaScriptu

• Redukce těžkých frameworků (React, Angular, Vue) – pokud nejsou dobře optimalizované.
• Použití Code Splitting – načítání jen potřebných částí JS.
• Asynchronní načítání (defer, async u script tagů).

✅ Zlepšení vykreslování (Render Performance)

• Použití CSS GPU akcelerace místo CPU pro animace (transform a opacity místo top, left).
• Optimalizace stylů – omezit přepočet layoutu (Reflows).
• Použití Intersection Observer API místo náročných scroll event listenerů.

✅ Snížení TTFB (Time to First Byte)

• Použití CDN pro statické zdroje.
• Implementace server-side caching.
• Optimalizace serverové odezvy (např. rychlejší databázové dotazy).

✅ Efektivní event handling

• Používat debounce a throttle pro události jako scroll, mousemove.
• Minimalizovat složité DOM operace v event handleru.

5️⃣ Jak měřit INP?

📊 Google nástroje:

• Google PageSpeed Insights (pagespeed.web.dev) – ukáže INP skóre.
• Lighthouse v Chrome DevTools (Performance panel).
• CrUX (Chrome User Experience Report) – reálná uživatelská data.

💡 Tip: Používej Performance panel v Chrome DevTools, kde můžeš sledovat vliv JavaScriptu na interakce.

6️⃣ Jak INP ovlivňuje SEO?

✅ INP je součást Core Web Vitals, což znamená, že ovlivňuje hodnocení webu ve vyhledávání.
✅ Rychlejší odezva = nižší bounce rate, lepší UX, vyšší konverze.
✅ Google preferuje rychlé a responsivní weby, což může mít vliv na pozice v SERPu.

📉 Špatné INP skóre může vést ke zhoršení uživatelského zážitku, vyšší míře opuštění a nižšímu organickému dosahu.

🔹 Shrnutí

📌 INP = nová metrika Core Web Vitals, která měří celkovou dobu odezvy na interakce uživatele.
📌 Nahrazuje FID, protože měří všechny interakce, ne jen první kliknutí.
📌 Doporučená hodnota je ≤ 200 ms pro dobrý uživatelský zážitek.
📌 Optimalizace zahrnuje lepší JavaScript výkon, optimalizaci renderování a rychlejší serverovou odezvu.
📌 INP ovlivňuje SEO – rychlejší web = lepší UX, vyšší konverze a potenciálně lepší pozice ve vyhledávání.

💡 Tip: Pokud chceš, aby měl tvůj web vysoké INP skóre, zaměř se na optimalizaci JavaScriptu a minimalizaci blokací hlavního vlákna. 🚀