Traceer een falende INP terug naar de regel code in zeven vertakkingen.

Een rode INP-score is pas een prestatieprobleem als je weet welke van de drie fasen de meeste tijd in beslag neemt. De meeste teams slaan die stap over, kopen een caching-plugin of stellen een script uit, en zien vervolgens dat de score in het 75e percentiel niet daalt. Deze handleiding is de beslissingsboom die wij gebruiken: zeven vertakkingen die je van een onvoldoende score in het Chrome UX Report naar de specifieke handler, het script of de tag van derden leiden die hiervoor verantwoordelijk is, met een aangegeven drempelwaarde bij elke vertakking. De handleiding is geschreven voor front-end leads en groeiteams die verantwoordelijk zijn voor zowel conversiecijfers als een Lighthouse-score.

Het verschil is reëel. In de Web Almanac 2025, 77% van de mobiele herkomsten had een goede INP. tegenover 97% op desktop, en slechts 48% van de mobiele websites voldeed aan alle drie de Core Web Vitals-criteria. (HTTP-archiefWat op mobiele apparaten nog steeds problemen geeft, is voornamelijk de interactievertraging, en dat is meestal wel te diagnosticeren.

Wat INP meet en wat het stilletjes negeert.

Interaction to Next Paint rapporteert één interactievertraging per paginabezoek, op het volgende niveau: 75e percentiel vanuit uw oorsprong. Goed is 200 ms of minderVerbetering is nodig bij een responstijd tussen 200 ms en 500 ms; slecht is bij een responstijd boven 500 ms.web.devDrie aspecten van die definitie veranderen de manier waarop je de fout opspoort:

• Alleen klikken, tikken en toetsaanslagen tellen mee. Bewegen met de muis, in- en uitzoomen en Het scrollen wordt niet gemeten.Een haperend scrollen kan ervoor zorgen dat een pagina er onbruikbaar uitziet, terwijl de INP-indicator groen blijft.
• Op pagina's met veel interacties, INP negeert één hoogste interactie voor elke 50Een zeldzame, catastrofale interactie kan dus verborgen blijven op een pagina met veel interactie en opduiken op een pagina met weinig interactie.
• Elke interactie splitst zich op in invoervertraging (voordat je handlers worden uitgevoerd), verwerkingsduur (uw handlers draaien) en presentatievertraging (na uw handgrepen, vóór het spuiten van het frame). Deze drie hebben qua technische problemen vrijwel niets met elkaar gemeen (web.dev).

Dat laatste punt is de kern van de hele methode. Je bent niet bezig met het debuggen van "INP". Je debugt een van de drie fasen, en elke fase heeft een andere oplossing.

Filiaal 0: controleer of het nummer echt is voordat u de code aanraakt.

Open PageSpeed ​​Insights en lees het gedeelte over velden, niet over de labscore. Labtools kunnen INP niet meten, omdat INP een echte gebruiker nodig heeft die op iets klikt. Als de oorsprong geen veldgegevens heeft, heb je een verkeersprobleem, geen prestatieprobleem, en is niets van het onderstaande nog van toepassing. Haal vervolgens de resultaten voor mobiel en desktop apart op — wereldwijd verschilden ze in 2025 met 20 procentpunten. Als mobiel rood is en desktop groen, stop dan met testen op je laptop.

Tak 1: treedt de trage interactie op tijdens het laden of erna?

Instrumenteer het veld met de web-vitals Attributieopbouw. ​​Vier regels leveren je de gegevens op:

import {onINP} from 'web-vitals/attribution';
onINP(({value, rating, attribution}) => {
  navigator.sendBeacon('/rum', JSON.stringify({value, rating, attribution}));
});

Lees attribution.loadState Ten eerste. Als de meeste slechte interacties een belastingstoestand met zich meebrengen van het laden or dom-interactiefGebruikers tikken terwijl uw scripts nog worden geëvalueerd: een leveringsprobleem, opgelost in de bundel en de tagmanager, niet in de handler. Als slechte interacties zich voordoen op volledig geladen pagina's, ga dan naar Branch 2.

Afdeling 2: welke subafdeling is verantwoordelijk voor de tijd?

Log inputDelay, processingDuration en presentationDelay voor elk monster. Onze werkregel: een subonderdeel is verantwoordelijk voor de interactie wanneer het daarvoor verantwoordelijk is. meer dan 50% van het totale INPAls geen van beide de 50% haalt, behandel het dan eerst als een geval van invoervertraging — diffuse congestie in de hoofdthread is meestal de oorzaak van de verergering van de andere twee.

Tak 3: geef het script een naam

De attributieopbouw bevat vermeldingen van lange animatieframes naast elk INP-voorbeeld. attribution.longestScript Geeft je de aanroeper, de functie en het bronbestand voor het slechtste script in de interactie; totalScriptDuration Dit telt alles op wat langer dan 5 ms duurt. Hier komt een vage opmerking als "React is traag" neer op een bestandspad. Controleer het type aanroeper: classic-script or module-script punten bij de evaluatie van de laadtijd, terwijl user-callback or event-listener wijst naar iets dat na het laden wordt uitgevoerd — een observer, een timer, een analytics listener (web.dev).

Aftakking 4: is deze van u of van een derde partij?

Sorteer de scriptattributie op oorsprong. Tagmanagers, toestemmingsplatforms, sessieopnametools en chatwidgets installeren globale listeners die bij elke klik vóór die van jou worden uitgevoerd. Als een externe bron in meer dan een kwart van je slechtste voorbeelden voorkomt, is de oplossing eerder commercieel dan technisch: verklein het bereik van de tag, laad deze bij interactie of verplaats deze naar de serverzijde. Herschrijf je handler niet om de 40 ms terug te winnen die een chatwidget sowieso verbruikt.

Tak 5: reproduceer het in het lab en repareer vervolgens het frame.

Neem de selector van attribution.interactionTargetOpen Chrome DevTools met CPU-throttling aangepast aan de configuratie van uw apparaten en neem de interactie op. Zoek naar een taak die verder gaat dan... 50 ms, de drempelwaarde voor langdurige taken (web.dev), en splits het door middel van opbrengst.

Verzenden scheduler.yield() met een terugvaloptie. Chrome en Edge ondersteunen dit vanaf versie 129 en Firefox vanaf versie 142, maar Safari doet dat niet, noch op desktop, noch op iOS., en MDN geeft aan dat het beperkt beschikbaar is in plaats van standaard (Niet storen, kan ik gebruiken). Voor een Turks of Golfpubliek met een groot aandeel iOS-gebruikers, een setTimeout Terugvalbeveiliging is niet optioneel.

Afdeling 6: meet de markt waaraan u daadwerkelijk verkoopt.

De wereldwijde CrUX-gemiddelden verbergen de markt die u betaalt. De CrUX BigQuery-dataset publiceert tabellen per land. chrome-ux-report.country_tr.YYYYMM Voor Turkije geldt hetzelfde patroon voor elke landcode van twee letters: maandelijks bijgewerkt, met de vormfactor van het apparaat en het effectieve verbindingstype als dimensies (Chrome voor ontwikkelaarsDe openbare CruX API geeft geen landinformatie weer, dus deze slice is alleen beschikbaar voor BigQuery.

Vergelijk uw herkomst met de landentabel voor elke markt waar u verkoopt. Een retailer die Turkije, Duitsland en de Golfregio bedient, vindt bijvoorbeeld regelmatig drie verschillende INP-distributies op basis van één codebase, omdat de apparaatmix en netwerkcondities verschillen. Richt u op de markt met de omzet, niet op de markt waar uw kantoor zich bevindt.

Afdeling 7: bewijs dat het iets verplaatst heeft

Beschouw de oplossing als een experiment, niet als een definitieve implementatie. TrendyolEen Turkse marktplaats heeft een mobiele INP van 963 ms herleid tot een taak van 700-900 ms die werd veroorzaakt door een callback van IntersectionObserver in een React-component, waarbij de statusupdate werd uitgesteld. scheduler.yield()en verlaagde de INP in het 75e percentiel van ongeveer 1,400 ms naar ongeveer 650 ms in zes maanden tijd. De A/B-test toonde aan dat Een stijging van 1% in het aantal doorklikken van productvermeldingen naar productdetails per sessie. (web.dev). rode bus De reactietijd van lazy-loading interacties werd verkort van 870-900 ms naar 350-370 ms, de interactie met tekstinvoer werd met 72% verbeterd en er werd een 7% stijging van de totale omzet (web.dev).

Let op de eerlijke schaal: 1%, niet 40%. Dat brengt ons bij een getal dat correctie verdient.

Het cijfer van 8.4% verdient een kanttekening.

Het meest geciteerde cijfer in dit vakgebied is dat een verbetering van 0.1 seconde in de laadsnelheid van mobiele apparaten de conversie in de detailhandel met 8.4% en in de reisbranche met 10.1% verhoogt. Dit cijfer is afkomstig uit een daadwerkelijk onderzoek – uitgevoerd door 55 bedrijven en Deloitte in opdracht van Google, met 37 merken en meer dan 30 miljoen sessies.web.devMaar het mat wel belastingstatistieken zoals de laadtijd van pagina's en de serverlatentie. niet INPDe gegevens hebben betrekking op 30 dagen aan het einde van 2019; en er was geen controlegroep, dus het betreft een waargenomen correlatie, geen causaal verband. Gebruik het om een ​​budgetgesprek op gang te brengen, niet om het rendement van een oplossing voor de interactievertraging te voorspellen.

[INTERNE GEGEVENS NODIG: Switas voor/na p75 INP en conversiedelta van een klantopdracht, ter vervanging van de openbare casestudies met bewijs uit eigen ervaring.]

Waar deze beslissingsboom vastloopt

• Oorsprongen met weinig verkeer. Bij data met een beperkt aantal gebruikers is het 75e percentiel ruis. Onder de 1,000 interacties per template per week kunt u in het lab profileren en accepteren dat u de winst niet in CruX kunt verifiëren.
• Gebruikers van Safari en Firefox zijn onzichtbaar. CruX is alleen beschikbaar voor Chrome. Als een aanzienlijk deel van uw omzet via iOS Safari binnenkomt, beschrijven uw INP-gegevens een populatie die u niet volledig in kaart brengt.
• Scrollproblemen vallen buiten het bestek van dit artikel. INP negeert scrollen, dus deze boom zal het probleem nooit vinden in een oneindig scrollende lijst die weliswaar onprettig aanvoelt, maar wel groen licht geeft bij tests.
• Het spoort latentie op, geen ontwerpfouten. Een interactie van 180 ms op een verwarrend filterpaneel is een UX-probleem dat deze boomstructuur niet kan detecteren.

FAQ

Is INP hetzelfde als First Input Delay?
Nee. FID meet alleen de vertraging voordat de handlers van de eerste interactie worden uitgevoerd. INP omvat de volledige latentie van een representatieve interactie gedurende het hele bezoek, inclusief de uitvoering van de handlers en de weergave die daarop volgt.

Waarom ziet mijn Lighthouse-score er goed uit, terwijl INP rood is?
Lighthouse is een testtool en kan INP niet meten: er is geen echte gebruiker die op iets klikt. Proxy's zoals Total Blocking Time geven slechts een zwakke correlatie. Lees in plaats daarvan het gedeelte over velden in PageSpeed ​​Insights.

Hoe lang duurt het voordat er een oplossing in CruX verschijnt?
CruX rapporteert gegevens over een periode van 28 dagen, terwijl de BigQuery-tabellen maandelijks worden gepubliceerd. Verwacht na ongeveer vier weken een gedeeltelijk signaal en na twee maandelijkse releases een volledig overzicht.

Kan ik INP repareren zonder het framework aan te raken?
Vaak wel. Trendyol loste dit op door een `yield` binnen één callback te gebruiken in React 16.9, zonder dat een upgrade nodig was. Het uitstellen van tags van derden is bovendien framework-onafhankelijk.

Heeft een toestemmingsbanner invloed op INP?
Dat kan op twee manieren: het script van de banner zelf concurreert tijdens het laden om de hoofdthread, en de toestemmingsbeslissing triggert vaak direct daarna een piek in het laden van tags. Meet de eerste interactie na toestemming apart.

Heb ik een RUM-leverancier nodig, of is de web-vitals-bibliotheek voldoende?
De attributie-opbouw plus een beacon-eindpunt is voldoende om deze boomstructuur te laten draaien. Een leverancier koopt retentie, segmentatie en dashboards, niet betere attributiegegevens.

Moet ik mijn INP optimaliseren voor SEO of voor conversie?
Kies voor conversie. Core Web Vitals zijn een rankingfactor, maar de gedocumenteerde businesscases — 1% bij Trendyol, 7% bij redBus — zijn effecten op de interactiekwaliteit die de investering op zichzelf rechtvaardigen.

Voer dit uit op uw eigen advertentiepagina.

Neem je sjabloon met het meeste verkeer, voorzie het van de attributie-opbouw en doorloop de takken 0 tot en met 7 in volgorde. Als je de boom liever wilt laten draaien op je eigen veldgegevens, inclusief de landselectie en het experimentontwerp, dan is onze webprestatieteam doet precies dat.

Bronnen

• Interactie met Next Paint (INP) — web.dev
• Optimaliseer de interactie naar NextPaint — web.dev
• Vind trage interacties in het veld — web.dev
• Optimaliseer lange taken — web.dev
• Prestaties — Web Almanac 2025, HTTP-archief
• Hoe Trendyol de INP met 50% verlaagde — web.dev
• Hoe redBus de INP verbeterde en de omzet met 7% verhoogde — web.dev
• Milliseconden maken miljoenen — web.dev / 55 / Deloitte
• CruX op BigQuery — Chrome voor ontwikkelaars
• Scheduler: yield() — MDN
• Scheduler-API: opbrengst — caniuse
• web-vitals JavaScript-bibliotheek — GoogleChrome/web-vitals