Interactie met volgende verf (INP): complete technische gids en optimalisatiestandaard

Interaction to Next Paint (INP) is een officiële Google Core Web Vital-statistiek die is geïntroduceerd om de algehele interface-responsiviteit van webpagina's te beoordelen.

In tegenstelling tot First Input Delay (FID), waarbij alleen de initiële interactie bij het laden van de pagina wordt geëvalueerd, observeert INP de latentie van alle gebruikersinteracties (klikken, tikken en toetsenbordinvoer) die plaatsvinden gedurende de gehele levensduur van het bezoek van een gebruiker aan een pagina.

Antwoord-eerste samenvatting

Interaction to Next Paint (INP) is een Core Web Vital-metriek die de tijd meet die is verstreken vanaf het moment dat een gebruiker interactie heeft met een pagina (klikken, tikken of op een toets drukken) totdat de browser het bijgewerkte visuele frame op het scherm presenteert.INP-latentie bestaat uit drie subonderdelen: invoervertraging, verwerkingsduur en presentatievertraging.Een passerende INP-score is 200 milliseconden of minder bij het 75e percentiel van echte gebruikersbezoeken.In maart 2024 verving INP officieel First Input Delay (FID) in de algoritmen voor zoekrangschikking van Google.

INP-scoredrempels en beoordelingsschaal

Om een responsieve gebruikerservaring te bieden, moeten webpagina's voldoen aan de volgende Core Web Vitals-drempels voor INP, geëvalueerd op het 75e percentiel van veldbezoeken van echte gebruikers:

Goed: $\le 200\text {ms} $ (Groen) - Snelle, vloeiende UI-reactie die onmiddellijk aanvoelt voor gebruikers.
Verbetering nodig: $> 200\text {ms} $ en $\le 500\text {ms} $ (oranje) - Merkbare vertraging tijdens klikken of tikken die de betrokkenheid van gebruikers beïnvloedt.
Slecht: $> 500\text {ms} $ (Rood) - Ernstige bevriezing van de interface en blokkering van de hoofdthread, wat leidt tot frustratie bij de gebruiker en hoge bouncepercentages.

INP-latentie	Prestatiebeoordeling	Impact op gebruikerservaring	Positiestatus van Google Zoeken
$\le 200\text {ms} $	Goed	Directe visuele feedback na tikken of klikken.	Volledig voldoende voor de Core Web Vitals-beoordeling.
$201\tekst {ms} - 500\tekst {ms} $	Behoefte aan verbetering	Laggy-interacties;merkbare vertraging bij het updaten van de UI-status.	Er kunnen rankingboetes optreden bij concurrerende zoekwoorden.
$> 500\tekst {ms} $	Slechte	Niet-reagerende knoppen, bevroren gebruikersinterface en impasses in de hoofdthread.	Mislukt de Core Web Vitals-beoordeling;actieve rankingstraf.

De drie componenten van INP-interactielatentie

Wanneer een gebruiker interactie heeft met een element op een webpagina, bestaat de totale interactielatentie gemeten door INP uit drie opeenvolgende fasen:

Invoervertraging: de tijd die verstrijkt tussen het moment waarop de gebruiker de fysieke interactie initieert (klikken, tikken of toetsaanslag) en het moment waarop de hoofdthread van de browser de bijbehorende gebeurtenishandlers begint uit te voeren.Invoervertraging wordt voornamelijk veroorzaakt door congestie in de hoofdthread door lange JavaScript-taken op de achtergrond die worden uitgevoerd tijdens het laden van de pagina of het opnieuw renderen van componenten.
Verwerkingsduur: de tijd die is besteed aan het uitvoeren van de JavaScript-code binnen alle geregistreerde gebeurtenislisteners voor die interactie (zoals onclick , onkeydown of update-handlers voor de reactieve status van het raamwerk).
Presentatievertraging: de tijd die verstrijkt nadat gebeurtenishandlers zijn voltooid totdat de browser klaar is met het berekenen van de herberekening van de stijl, de lay-out, het schilderen van bijgewerkte pixels en het weergeven van het volgende visuele frame op de weergavehardware van de gebruiker.

Wiskundig gezien wordt de totale INP-latentie voor een enkele interactie uitgedrukt als:

$$\text{INP-latentie} = \text{Invoervertraging} + \text{Verwerkingsduur} + \text{Presentatievertraging}$$

Waarom Google FID in maart 2024 heeft vervangen door INP

First Input Delay (FID) meet alleen de invoervertragingscomponent van de allereerste interactie op een pagina.Hoewel FID hielp bij het identificeren van pagina's waar hoofdthreadblokkering de eerste interactie verhinderde, had het te kampen met twee belangrijke technische beperkingen:

Single Interaction Scope: FID negeerde alle daaropvolgende gebruikersinteracties na het laden van de pagina en slaagde er niet in om traagheid vast te leggen tijdens complexe client-side navigatie met één pagina (SPA).
Onvolledige latentiemeting: FID heeft alleen de invoervertraging gemeten, waarbij verwerkingstijd en presentatievertraging volledig worden genegeerd.Een gebeurtenishandler die 2000 ms nodig had om uit te voeren, kreeg een voldoende FID-score als de initiële invoervertraging minder dan 50 ms was.

In maart 2024 heeft Google FID officieel vervangen door INP als een officiële Core Web Vital-rangschikkingsfactor.INP evalueert het 75e percentiel van alle interacties tijdens een sessie en biedt zo een veel uitgebreidere en realistischere beoordeling van de echte gebruikerservaring in moderne webapplicaties.

Kwalificerende gebruikersinteracties versus niet-kwalificerende gebeurtenissen

INP meet discrete gebruikersinteracties waarbij de gebruiker onmiddellijke visuele feedback verwacht.Begrijpen welke interacties meetellen voor INP is essentieel voor diagnostische profilering:

Gemeten interacties

Muisklikken: klikken op knoppen, koppelingen, formulierbesturingselementen of aangepaste interactieve componenten.
Touchscreen-tappen: tikelementen op mobiele apparaten of tablets.
Toetsenbord indrukken: het indrukken van fysieke of virtuele toetsenbordtoetsen (zoals Enter, Space of alfanumerieke toetsen bij tekstinvoer).

Niet-gemeten gebeurtenissen

Scrollen en pannen: het scrollen door een pagina of het pannen van een kaartcomponent activeert geen INP-meting.
Zweven: het verplaatsen van de muiscursor over een element zonder te klikken is uitgesloten van INP.
Animaties voor het laden van pagina's: CSS-animaties die automatisch worden geactiveerd zonder gebruikersinvoer tellen niet mee voor INP.

Bewezen technische strategieën om hoge INP-scores te optimaliseren

Om de INP-latentie onder de drempel van 200 ms te brengen, moeten technische teams de volgende technische optimalisaties implementeren:

Lange hoofdthreadtaken opsplitsen: gebruik requestIdleCallback() , setTimeout() of scheduler.yield() om uitvoeringstaken die langer dan 50 ms duren op te splitsen in kleinere stukken, waardoor de browser inkomende gebruikersinvoer onmiddellijk tussen taakuitvoeringsblokken kan verwerken.
Optimaliseer Framework State Updates: Stel in Vue 3- en Nuxt 4-applicaties niet-kritieke UI-herweergaven uit met behulp van asynchrone componentgrenzen of uitgestelde reactieve ref-updates.
Minimaliseer het slaan van de lay-out: vermijd het lezen van DOM-geometrie-eigenschappen (zoals offsetHeight of getBoundingClientRect() ) onmiddellijk na het muteren van DOM-elementen, waardoor een synchrone herberekening van de lay-out wordt afgedwongen.
Verminder de diepte van de DOM-boom: extra grote DOM-bomen verhogen de stijlberekening en de lay-outkosten tijdens presentatievertraging.Houd het totale aantal DOM-elementen onder de 1.500 knooppunten per pagina.
Optimaliseer scripts van derden: zware scripts van derden (analyses, advertentienetwerken, widgets voor klantchats) kapen vaak de hoofdthread.Stel niet-essentiële scripts van derden uit of ontlast de webwerker.

Continue INP-bewaking met SimpleOps

SimpleOps houdt de INP-prestaties voortdurend bij door het vastleggen van Chrome UX Report (CrUX)-gegevenssetstatistieken van echte gebruikers in combinatie met synthetische Lighthouse-audits.SimpleOps waarschuwt uw team automatisch wanneer de INP van uw website in het 75e percentiel de 200 ms overschrijdt, zodat uw applicatie snel, vloeiend en geoptimaliseerd blijft voor de rankings in zoekmachines.