INP: Nová kritická metrika nahrazující FID
12. března 2024 dokončil Google přechod Core Web Vitals: FID (First Input Delay) a odešel, INP (Interaction to Next Paint) a vstoupil. Tichá změna v panelech Google Search Console, která však má skutečný dopad na SEO hodnocení milionů webů. Podle i údaje ze zprávy Chrome User Experience Report (CrUX), 43 % webových stránek stále selhává INP „Dobrý“ práh (pod 200 ms), výrazně vyšší číslo než na 30 % webů, které selhaly FID.
FID only measured the delay to first input: how much time had passed since the user clicked for the first time when the browser began processing that event. It was an easy metric to beat because it only measured the first interaction and didn't hold up účet dalšího nátěru. INP je radikálně odlišný: změřte schopnost reagovat celkově po celou dobu trvání relace, přičemž jako konečné skóre zvolíte nejhorší percentil interakcí.
Co se naučíte
- Jak se INP liší od FID a proč měří skutečnou odezvu
- INP Dobré/Potřebuje zlepšení/Špatné prahové hodnoty (200 ms / 500 ms)
- Jak měřit INP pomocí Chrome DevTools, web-vitals.js a PageSpeed Insights
- Pět nejběžnějších vzorů JavaScriptu, které rozšiřují INP
- Jak interpretovat data pole CrUX vs syntetická data Lighthouse
- Pracovní postup ladění k nalezení a opravě pomalých interakcí
Co INP měří: Technická definice
INP sleduje všechny interakce uživatele se stránkou během návštěvy: kliknutí, klepnutí a stisknutí kláves. U každé interakce změřte dobu od zadání uživatele v okamžiku prohlížeče vybarví další rámeček to odráží vizuální odezvu na tento vstup. Tento interval se nazývá latence interakce a skládá se ze tří částí:
- Vstupní zpoždění: čas, který uplyne, než prohlížeč začne událost zpracovávat (hlavní vlákno bylo zaneprázdněno)
- Doba zpracování: doba provádění obslužných programů událostí JavaScriptu
- Zpoždění prezentace: čas, který prohlížeč potřebuje k rozložení, vymalování a složení nového rámce
INP bere 98. percentil všech interakcí v relaci (nebo nejhorší hodnota, pokud existuje méně než 50 interakcí). Ne průměrná, ne typická hodnota: téměř nejhorší. Díky tomu je INP mnohem citlivější na špičky latence než FID.
INP Thresholds
| Hodnocení | Hodnota INP | SEO dopad |
|---|---|---|
| Dobrý | < 200 ms | Pozitivně přispívá k hodnocení |
| Potřebuje zlepšení | 200 ms - 500 ms | Neutrální, oblast pro zlepšení |
| Chudý | > 500 ms | Pokuta za hodnocení Google |
FID vs INP: Podstatný rozdíl
Abyste pochopili, proč je přechod z FID na INP důležitou změnou, zvažte tento scénář: máte stránku elektronického obchodu. Při prvním načtení uživatel klikne na „Přidat do košíku“ a událost je zpracována za 50 ms (výborné FID). Poté přejděte na stránku, filtrujte produkty, otevře rozbalovací nabídku kategorie. Tato druhá interakce trvá 800 ms, protože se jedná o náročný výpočet běží na hlavním vlákně.
Con FID: skóre bylo 50 ms - Dobrý.
Con INP: skóre je 800 ms - Chudý.
INP odráží skutečnou uživatelskou zkušenost během relace, nejen první kliknutí. To je důvod, proč mnoho webů, které měly vynikající FID, má nyní problematické INP.
Jak měřit INP
1. Chrome DevTools – Panel výkonu
Nejpřesnějším způsobem diagnostiky INP je panel Výkon v nástrojích Chrome DevTools. Postupujte takto:
- Otevřete DevTools (F12) a přejděte na kartu Výkon
- Kliknutím na červený kroužek zahájíte nahrávání
- Spusťte interakce, které chcete měřit (kliknutí, psaní atd.)
- Zastavit nahrávání
- Ve výsledném panelu vyhledejte červené pruhy v sekci Interakce
- Kliknutím na interakci zobrazíte rozdělení: zpoždění vstupu, doba zpracování, zpoždění prezentace
2. Web Vitals JS Library (data pole)
Knihovna web-vitals of Google umožňuje měřit skutečné INP uživatelů v produkci.
Přidejte jej do svého projektu a odešlete data do analytického koncového bodu:
import { onINP } from 'web-vitals';
onINP((metric) => {
// metric.value: il valore INP in millisecondi
// metric.rating: 'good' | 'needs-improvement' | 'poor'
// metric.entries: le PerformanceEventTiming entries
console.log('INP:', metric.value, metric.rating);
// Invia a analytics
fetch('/api/vitals', {
method: 'POST',
body: JSON.stringify({
metric: 'INP',
value: metric.value,
rating: metric.rating,
url: window.location.href,
}),
});
});3. PageSpeed Insights a CrUX
PageSpeed Insights zobrazuje skutečná data CrUX pro vaši doménu v sekci "Field Data". Upozorňujeme, že data CrUX jsou založena na uživatelích Chrome, kteří mají povolenou synchronizaci, proto odrážejí skutečné zkušenosti na skutečných zařízeních, nikoli syntetické výsledky Lighthouse které běží na hardwarově řízeném.
Laboratorní data vs data pole
Lighthouse a PageSpeed Insights v režimu „Lab“ simulují mobilní zařízení střední třídy na pomalém 4G připojení. Data CrUX (Field Data) odrážejí skutečné uživatele vašeho webu. Je normální, že mezi těmito dvěma měřeními jsou odchylky 30-50 %. Použijte data z pole jako indikátor primární pro rozhodování SEO a laboratorní data pro technické ladění.
Nejběžnější vzory, které způsobují vysoké INP
1. Dlouhé úkoly na hlavním vláknu
Hlavním viníkem vysokého INP je přítomnost Dlouhé úkoly: Úlohy JavaScriptu
které trvají déle než 50 ms. Každý dlouhý úkol blokuje hlavní vlákno prohlížeče a brání mu v reakci
na uživatelský vstup. Nejjednodušší způsob, jak je identifikovat, je panel Výkon nástroje DevTools
nebo API PerformanceObserver:
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.duration > 50) {
console.warn('Long Task rilevato:', {
duration: entry.duration,
startTime: entry.startTime,
});
}
}
});
observer.observe({ type: 'longtask', buffered: true });2. Obsluha těžkých událostí
Obslužné programy kliknutí provádějící náročné výpočty synchronně jsou častou příčinou vysokého INP. Typickým vzorem je handler, který:
- Filtrujte nebo transformujte velká pole v paměti
- Masivně vykreslujte DOM (přidejte stovky prvků)
- Vypočítejte složitá rozvržení nebo vynucte přeformátování prohlížeče
- Analyzuje velký JSON
3. Detekce změny reakce/úhlové změny není optimalizována
V rámci, jako je React nebo Angular, může jediná událost spustit cyklus detekce změn který přepočítá celý strom komponent. Ve složitých součástech nebo při absenci memoizace to může trvat 100-400 ms.
V Angular je řešení ChangeDetectionStrategy.OnPush a použití signálů pro
granulární reaktivita. V Reactu React.memo, useMemo e useCallback
jsou to klíčové nástroje.
4. Skripty třetích stran
Analytics, chatovací widgety, reklamní skripty a další skripty třetích stran často běží v hlavním vláknu a může blokovat odezvu na vstupy. Chcete-li je identifikovat, na panelu Výkon DevTools hledejte dlouhé úkoly pocházející z domén třetích stran.
5. Hydratace v rámcích SSR
V aplikacích s SSR (Next.js, Angular Universal, Nuxt) může být fáze hydratace drahé. Během hydratace framework znovu připojí obslužné rutiny událostí k vykreslenému DOM na straně serveru. Pokud se tato fáze překrývá s interakcí uživatele, INP trpí.
Pracovní postup ladění INP
Zde je doporučený pracovní postup pro diagnostiku a nápravu vysokých NPI:
- Identifikujte problematické interakce pomocí panelu Výkon od DevTools. V sekci Interakce hledejte interakce s latencí > 200 ms.
- Analyzujte rozdělení: která ze tří složek (vstupní zpoždění, zpracování, prezentace) je největší?
- Pokud je vstupní zpoždění: V hlavním vláknu v tu dobu běželo něco jiného kliknutí. Vyhledejte na časové ose dlouhé úkoly předcházející interakci.
-
Pokud a doba zpracování: Obsluha událostí je příliš pomalá.
USA
scheduler.yield()k jejich rozbití (viz další článek). - Pokud a prezentace zpoždění: Vykreslování snímků je pomalé. Hledejte roztříštěná rozvržení, drahé animace CSS nebo nadměrné kompoziční vrstvy.
INP a SEO: Skutečný dopad
Google potvrdil, že Core Web Vitals, včetně INP, jsou faktory hodnocení. Hmotnost Přesně to není veřejné, ale empirické důkazy ukazují, že přechod z „Špatný“ na „Dobrý“ na INP může přinést 2–5% zlepšení hodnocení pro konkurenční stránky. Pro weby s návštěvností významný organický, to se promítá do měřitelného nárůstu návštěvnosti.
Nejvyšší prioritou musí být zobrazení všech hlavních stránek (domovská stránka, stránky kategorií, produktové stránky) na hodnocení "Dobré" (< 200 ms). Stránky se statickým obsahem mají jen zřídka INP problémy; problémy se zaměřují na stránky se složitými interaktivními rozhraními.
Další kroky
Nyní, když víte, jak měřit a identifikovat problémy INP, je dalším krokem naučit se, jak na to
opravit je: další článek této série vysvětluje, jak je používat scheduler.yield()
rozdělit dlouhé úkoly a uvolnit hlavní vlákno mezi jednou interakcí a další.
Pokud jde o vykreslování, článek o optimalizaci LCP se zabývá technikami pro snížení zpoždění prezentace a urychlení vybarvení prvního významného snímku.
Závěry
INP představuje změnu paradigmatu v měření výkonu webu: nestačí že se stránka načítá rychle, musí také odpověď rychle po celou dobu dobu trvání relace. Příležitost má 43 % webů, které nesplňují prahovou hodnotu Good INP konkrétní způsob, jak zlepšit uživatelskou zkušenost i hodnocení SEO.
Výchozím bodem je vždy měření: instalace web-vitals.js ve vašem
webu, shromažďovat skutečná uživatelská data a používat Chrome DevTools k diagnostice interakcí
problémy. Pouze s konkrétními údaji budete schopni činit informovaná optimalizační rozhodnutí.