Interaction jusqu’au prochain affichage (INP)

TL;DR — INP measures how quickly votre page responds quand someone clicks, taps, or types. Le navigateur times the gap entre the interaction and the suivant visual mettre à jour, à travers the whole visit, and reports roughly the worst un. Sous 200 ms is bon; over 500 ms is poor. It’s un of the three Core Web Vitals, and it replaced an older metric appelé Délai de première interaction in 2024.

Ce que INP en réalité measures

Quand vous click a button, tap a menu, or type in a box, vous expect lune page to react — a menu opens, a checkbox ticks, text apparaît. Interaction to Suivant Paint (INP) measures how long que takes: the temps from votre interaction jusqu’à le navigateur paints the suivant frame showing something modifié.

Here’s the partie que matters. INP doesn’t simplement regarder at un interaction. It watches every click, tap, and keyboard press during votre entier visit, alors reports (fermer to) the slowest un. So a unique janky interaction — a search box que freezes pour half a second every temps vous type — peut sink the whole score.

Scrolling, hovering, and zooming don’t count. Seulement clicks, taps, and keyboard interactions are mesuré.

The thresholds

INP is reported in milliseconds, and Google buckets it into three ratings:

• Bon — 200 ms or moins
• Nécessite improvement — plus que 200 ms, up to 500 ms
• Poor — plus que 500 ms

Pour context: 200 ms is fast, but it’s pas a lot of headroom. Everything votre code fait in réponse to a click — plus le navigateur drawing le résultat — has to fit à l’intérieur it.

Pourquoi it replaced FID

The old responsiveness metric was Délai de première interaction (FID). FID seulement mesuré the delay avant the premier interaction on une page commencé being handled — and it stopped timing the moment the fonctionner began. It didn’t count how long que fonctionner en réalité took, or how long the screen took to mettre à jour.

INP fixed tout of que. It measures the complet temps (commencer to visual mettre à jour) pour tout interactions, pas simplement the premier un. Google made the switch official on March 12, 2024, and FID was gone from the outils entirely by September 2024.

Ce que rend INP bad — in plain terms

Almost toujours, it’s JavaScript hogging the principal thread. Le navigateur peut seulement do un chose at a temps on que thread, so si a chunk of script is busy running, votre click has to wait in line. Courant culprits:

• Heavy fonctionner running à l’intérieur the click/tap handler itself.
• Big “long tasks” of JavaScript blocking everything.
• Third-party scripts — analytics, cookie-consent banners, chat widgets, tag managers. Ces are some of the worst offenders, même on simple content sites.

The fix, broadly, is to do moins fonctionner quand someone interacts, and to break big jobs into petit pieces so le navigateur peut squeeze votre interaction in entre les.

Vouloir the réel mechanics — the three-part latency breakdown, the 75th-percentile math, exactly Comment corriger chaque causer, and the SEO angle? Switch to the Avancé tab.

TL;DR — INP is the Core Web Vital pour responsiveness. It observes the latency of tout click, tap, and keyboard interactions à travers a visit and reports the valeur at the 75th percentile (un outlier dropped per 50 interactions) — pas simplement the premier input comme FID did. An interaction’s latency = input delay + processing duration + presentation delay. Bon ≤ 200 ms, poor > 500 ms, judged on field données at p75. It replaced FID on March 12, 2024 (FID entièrement supprimé from outils September 2024). Fix it by breaking up long tasks, yielding to the principal thread with scheduler.yield(), doing moins in event handlers, shrinking the DOM, and deferring third-party scripts. It’s a field metric — Total Blocking Temps is the lab proxy, and the two don’t toujours agree.

Ce que INP measures — and how it differs from FID

Google’s definition is precise: INP “assesses une page’s overall responsiveness to utilisateur interactions by observing the latency of tout click, tap, and keyboard interactions que occur throughout the lifespan of a user’s visit to une page.”

Que “all interactions… throughout the lifespan” phrasing is the whole story. INP is a visit-level metric, pas a load-time un — and Google’s reasoning is que the vast majority of a user’s temps on une page se produit après it loads, so responsiveness during utiliser matters plus que the premier impression alone.

The contrast with Délai de première interaction is the cleanest façon to comprendre it: “FID seulement mesuré the input delay of the premier interaction on une page. INP improves on FID by observing tout interactions on une page, beginning from the input delay, to the temps it takes to run event handlers.” FID timed un chose à propos de un interaction — the wait avant its handler commencé — and ignored les deux how long the handler ran and how long the screen took to mettre à jour. INP measures the complet latency of every interaction.

Un nuance worth getting correct, parce que it’s a courant myth: INP is pas literally the worst interaction. To éviter punishing une page pour a unique random spike, the navigateur drops un outlier pour every 50 interactions, alors reports the valeur at the 75th percentile of page views. On a low-interaction visit, que lands on the slowest interaction; on a heavy un, a couple of outliers obtenir excluded premier.

Ce que counts as an interaction is aussi narrower que personnes assume. Seulement clicks, taps, and keyboard presses are mesuré. Scrolling, hovering, and zooming are explicitly excluded. And a unique gesture peut fire several events — a tap produces pointerdown, pointerup, and click — qui INP groupes as un interaction, pas three. Dans que groupe, INP takes the longest individual event duration, pas the sum of tout of les — so a fast pointerdown suivant to a slow click encore reports as un interaction sized by the slow event. Si une page has aucun qualifying interactions during a visit, INP simply isn’t reported pour it.

The three parts of an interaction’s latency

Every interaction’s latency breaks into three sequential pieces. Ce is the model to garder in votre head, parce que chaque partie points at a différent fix:

Interaction latency = Input delay + Processing duration + Presentation delay

1. Input delay — the temps avant votre event handlers peut même commencer running, usually parce que the principal thread is busy finishing a long task.
2. Processing duration — the temps it takes tout of votre event handler callbacks to execute.
3. Presentation delay — the temps from quand votre handlers finish jusqu’à the navigateur paints the suivant frame on screen.

The web-vitals attribution construire exposes tout three (inputDelay, processingDuration, presentationDelay) so vous pouvez voir qui partie dominates on a réel interaction. Per the Web Almanac’s 2024 données, presentation delay is souvent the largest unique piece at the median — but processing duration is où the optimization leverage usually lives, parce que it’s the partie que balloons on poorly-built pages.

The thresholds — and the p75 field caveat

Recherche Google Central states the target plainly — “an INP of moins que 200 milliseconds” — and frames the whole program as: “We highly recommend site owners achieve bon Core Web Vitals pour success with Search.” The 200 ms budget is genuinely tight quand vous remember le navigateur veut a frame every ~16,7 ms at 60 fps; tout of votre handler fonctionner plus rendering has to fit.

Pourquoi INP is a field metric (and lab données isn’t suffisant)

Ce is the trap que catches a lot of SEOs: a green Lighthouse score ne fait pas mean bon INP. But “Lighthouse can’t measure INP” nécessite three separate cas, pas un, or you’ll misread votre propre tooling:

1. A standard, noninteractive Lighthouse run reports aucun INP at tout. It seulement observes lune page chargement — it jamais clicks, taps, or types anything — so there’s aucun interaction to temps. Lighthouse falls back on Total Blocking Temps (TBT) as a load-time proxy à la place. Google’s propre framing: “Parce que TBT correlates bien with INP, une page with a élevé TBT is a reasonable indicator que là may be élevé INP valeurs during charger.” The key words are “during charger.” TBT dit nothing à propos de an interaction que goes bad ten seconds plus tard quand a lazy-loaded widget runs — it’s a proxy, jamais a substitute or a conversion formula.
2. A manually or synthetically exercised interaction — clicking a réel button in DevTools, or scripting a click in a lab outil — fait produce a réel INP-style latency number pour que un interaction. That’s utile pour reproducing a spécifique bug. But it’s encore un scripted chemin on un device: it can’t stand in pour the field’s mix of réel devices, réel utilisateurs, réel interaction targets, and a complet visit’s worth of page lifetime. As Google puts it, le résultating valeur “va be dependent on ce que interactions are performed during the measurement period,” and réel utilisateur behavior is aussi variable pour a unique lab run to represent it.
3. The field distribution is the seulement chose INP en réalité is. That’s pourquoi the authoritative source is field données: the Chrome Utilisateur Experience Report (CrUX), surfaced via PageSpeed Insights and the Search Console Core Web Vitals report. “Field données is the meilleur source of information vous pouvez draw on quand it comes to understanding qui interactions are problematic pour réel utilisateurs.”

Utiliser the lab (cas 1 and 2) to trouver and reproduce a slow interaction; utiliser the field (cas 3) to confirmer si it’s en réalité dragging bas réel visitors’ scores.

Pourquoi votre INP score is poor

Almost every INP problem traces back to the principal thread being blocked quand a utilisateur interacts. The usual suspects:

• Long tasks. Quelconque main-thread task over 50 ms is a long task; the amount over 50 ms is its “blocking period.” Pendant que un runs, votre interaction can’t be handled. Ce is the unique biggest causer.
• Heavy event handlers. Doing aussi beaucoup synchronously à l’intérieur a click/input handler inflates processing duration directement.
• Grand DOM size. Bigger DOMs cost plus to render, qui inflates les deux input and presentation delay.
• Third-party scripts. Per the Web Almanac, consent providers, tag managers, analytics, and chat widgets are top offenders — and ils hit même simple content sites. They’re the premier placer I regarder on une page I didn’t construire.
• Post-load JavaScript. Simplement parce que une page rendered doesn’t mean it finished chargement — scripts evaluating après premier paint peut block early interactions.

Comment corriger it

The strategies, roughly in order of impact:

1. Break up long tasks. Google’s core advice on handlers is to “do as little fonctionner as possible in les.” Split a big job into plus petit tasks so le navigateur peut interleave a utilisateur interaction. Quand tasks are broken up, “le navigateur peut respond to higher-priority fonctionner beaucoup sooner — notamment utilisateur interactions.”

2. Yield to the principal thread. The modern, recommended façon is scheduler.yield() (Chrome 129+, Firefox 142+): await scheduler.yield() pauses votre code, lets the navigateur handle pending fonctionner, and resumes with priority — so autre tasks won’t cut the line ahead of votre continuation. The classic fallback is setTimeout(..., 0), qui encore fonctionne but sends votre code to the back of the task queue (and navigateurs enforce a 5 ms floor après several nested calls). Un chose to arrêter doing: isInputPending() — Google now dit “we no longer recommend using this API.” Voir the Scripts tab pour the pattern.

3. Do moins in event handlers — defer the non-critical fonctionner. Run seulement the visual mettre à jour the suivant frame nécessite synchronously; push everything sinon (saving, spell-check, analytics, word counts) behind requestAnimationFrame + setTimeout or a yield. The utilisateur sees la réponse immédiatement; the bookkeeping se produit après.

4. Éviter layout thrashing. Reading layout properties correct après writing styles in the même task forces le navigateur into synchronous layout it pourrait sinon have batched. Batch reads, alors writes.

5. Reduce DOM size. Plus petit trees render faster. content-visibility peut lazily render off-screen elements so ils don’t cost vous during charger or interaction.

6. Audit and defer third-party scripts. Ce is the highest-leverage SEO fix on réel sites. Charger consent/tag/analytics scripts lazily, gate les on interaction, or déplacer les off the critical chemin. A “lightweight” content page peut échouer INP purely parce que of a heavy embedded widget.

Fait INP affecter rankings?

Yes — INP is un of the three Core Web Vitals, and Core Web Vitals are partie of Google’s page-experience signals. But it’s a lightweight signal: a tiebreaker entre comparably relevant results, pas a principal ranking factor. Don’t chase a perfect INP score at the expense of content and relevance.

Two practical SEO points. Premier, mobile is the hard number. In the 2024 Web Almanac, ~74% of mobile sites réussi INP versus ~97% on desktop — and parce que Google indexes mobile-first, the mobile figure is the un que counts. Second, complex sites do worse: seulement ~53% of the top 1 000 sites réussi, parce que feature-rich pages ship plus JavaScript to block the principal thread. Heavy fonctionnalité development is an INP risk, and high-interaction pages — product pages, checkout, résultats de recherche, formulaires — are far plus exposed que static content.

INP vs FID — the complet picture

FID is gone — supprimé from Search Console on the day INP launched and from CrUX’s BigQuery/API by September 2024. Si a outil or audit encore références FID, it’s stale.

Edge cas que faire INP données disagree

A handful of lifecycle quirks expliquer la plupart “why doesn’t my RUM match CrUX” questions:

• Aucun interactions, aucun INP. Si a visit jamais obtient a click, tap, or clé press — or seulement obtient excluded gestures comme scrolling and hovering — there’s aucun INP valeur pour que page view. Ce is normal on read-only content pages and isn’t a bug in votre monitoring.
• Iframes count toward the metric, but votre propre JavaScript can’t voir à l’intérieur les. An interaction à l’intérieur an embedded iframe (an ad, a widget, an embedded formulaire) contributes to lune page’s INP. But a first-party RUM script can’t lire events from a cross-origin iframe the façon le navigateur’s propre metric peut — so CrUX and a same-origin RUM setup peut legitimately disagree on pages with third-party embeds. Document ce gap plutôt que treating a RUM/field mismatch as a bug.
• Back/forward cache restores reset INP to zero. Une page pulled from bfcache (the back button, pour instance) starts a fresh INP count — interactions from avant the navigation away don’t carry over.
• Long-lived and backgrounded tabs encore besoin to report. Parce que a tab peut sit ouvrir pour hours sans ever formally unloading — surtout on mobile, où the OS may simplement kill it — INP devrait be captured quand lune page becomes hidden, pas seulement on unload. RUM setups que seulement flush on unload va silently lose données from ces visits.

Où ce sits

INP is un piece of the Core Web Vitals picture, alongside Largest Contentful Paint (chargement) and Décalage cumulatif de mise en page (visual stability). Vérifier it in PageSpeed Insights and the Search Console report (field), and debug it in Lighthouse / Chrome DevTools (lab, via the TBT proxy). The données behind tout of it comes from CrUX.

AI summary

A condensed prendre on the Avancé version:

• INP = the Core Web Vital pour responsiveness. It observes the latency of tout click, tap, and keyboard interactions à travers a whole visit and reports the valeur at the 75th percentile (un outlier dropped per 50 interactions) — pas simplement the premier input the façon FID did.
• Latency = input delay + processing duration + presentation delay. Chaque partie points at a différent fix; processing duration is usually où the leverage is.
• Thresholds (field, p75): bon ≤ 200 ms, nécessite improvement ≤ 500 ms, poor

  500 ms.

• Seulement clicks, taps, and keyboard count — scroll, hover, and zoom are excluded; a unique gesture’s multiple events are grouped as un interaction.
• It replaced FID on March 12, 2024 (FID entièrement supprimé from outils September 2024). FID seulement timed the premier interaction’s input delay.
• It’s a field metric, and “Lighthouse can’t measure it” has three cas: a standard noninteractive Lighthouse run reports aucun INP and falls back to Total Blocking Temps as a load-time proxy; a manually exercised lab interaction fait produce a réel single-interaction latency but can’t stand in pour the field population; seulement CrUX / PageSpeed Insights / Search Console field données is authoritative.
• Causes: long tasks (>50 ms), heavy event handlers, grand DOM, and surtout third-party scripts (consent, tag managers, analytics, chat).
• Fixes: break up long tasks, yield with scheduler.yield() (setTimeout fallback; isInputPending() is ne … plus recommended), do moins in handlers, éviter layout thrashing, shrink the DOM, defer third-party scripts.
• Edge cas: aucun qualifying interaction signifie aucun INP valeur; iframe interactions count toward the metric but a same-origin RUM script can’t voir à l’intérieur les; bfcache restores reset INP; long-lived/backgrounded tabs devrait report on hidden, pas simplement on unload.
• SEO: a lightweight ranking signal. Mobile (~74% réussir vs ~97% desktop) is the number que matters sous indexation mobile-first; high-interaction pages are la plupart exposed.

Documentation officielle

Primary-source documentation from Google / the Chrome team.

web.dev — the INP références

• Interaction jusqu’au prochain affichage (INP) — the definitive definition: ce que it measures, the three-part latency breakdown, interaction types, and thresholds.
• Optimize Interaction jusqu’au prochain affichage — the optimization playbook: doing moins in handlers, deferring non-critical fonctionner, layout thrashing, DOM size, content-visibility.
• Interaction jusqu’au prochain affichage officially becomes a Core Web Vital — the March 12, 2024 launch post (Jeremy Wagner & Rick Viscomi); the FID deprecation timeline.
• Délai de première interaction (FID) — the deprecated metric; ce que it mesuré and pourquoi it was replaced.
• A nouveau responsive metric: seeking votre feedback — FID’s design limitations and INP’s improvements.
• Optimize long tasks — the 50 ms long-task definition, scheduler.yield(), the setTimeout fallback, and pourquoi isInputPending() is ne … plus recommended.
• Script evaluation and long tasks — TBT as an INP proxy and script-size guidance.
• Trouver slow interactions in the field — the web-vitals attribution construire and the Long Animation Frames (LoAF) API.

Chrome / Recherche Google

• Performances fonctionnalités référence (Chrome DevTools) — the Interactions track, Live Metrics, and the 200 ms warning.
• CrUX release notes — confirms FID’s removal from BigQuery/API in September 2024.
• Core Web Vitals & Recherche Google results — INP as partie of lune page-experience signal; the ≤ 200 ms target.

Quotes from the source

On-the-record statements from Google / the Chrome team. Chaque lien is a deep lien que jumps to the quoted passage on the source page.

Ce que INP measures, and how it differs from FID

• “INP is a Core Web Vitals metric that assesses a page’s overall responsiveness to user interactions by observing the latency of all click, tap, and keyboard interactions that occur throughout the lifespan of a user’s visit to a page.” — web.dev, Interaction jusqu’au prochain affichage (INP). Jump to quote
• “FID only measured the input delay of the first interaction on a page. INP improves on FID by observing all interactions on a page, beginning from the input delay, to the time it takes to run event handlers.” Jump to quote
• “First Input Delay (FID) is no longer a Core Web Vital, and has been replaced by the Interaction to Next Paint (INP) metric.” — web.dev, Délai de première interaction (FID). Jump to quote

The FID → INP switch

• “FID will be deprecated.” — Jeremy Wagner & Rick Viscomi, web.dev blog, Interaction jusqu’au prochain affichage officially becomes a Core Web Vital. Jump to quote
• “FID will be removed from Google Search Console as soon as INP becomes a Core Web Vital on March 12.” Jump to quote

Long tasks — the principal causer

• “Any task that takes longer than 50 milliseconds is a long task.” — web.dev, Optimize long tasks. Jump to quote

Field données is principal

• “Field data is the best source of information you can draw on when it comes to understanding which interactions are problematic for actual users.” — web.dev, Trouver slow interactions in the field. Jump to quote

Recherche Google

• “We highly recommend site owners achieve good Core Web Vitals for success with Search.” — Recherche Google Central, Core Web Vitals & Recherche Google results. Source

INP fix checklist

Fonctionner top to bottom — the items near the top tend to déplacer the number la plupart:

• Pull field INP (PageSpeed Insights / Search Console CWV report), pas simplement a lab score — and vérifier mobile separately.
• Identifier the slow interaction(s) with the web-vitals attribution construire or Chrome DevTools’ Interactions track (it flags anything over 200 ms).
• Trouver and break up long tasks (anything over 50 ms on the principal thread).
• Yield to the principal thread à l’intérieur long-running loops — scheduler.yield(), with a setTimeout(..., 0) fallback. (Arrêter en utilisant isInputPending().)
• À l’intérieur chaque handler, run seulement the render-critical mettre à jour synchronously; defer saving, validation, spell-check, analytics behind rAF + setTimeout.
• Vérifier pour layout thrashing — reading layout correct après writing styles in the même task. Batch reads, alors writes.
• Audit third-party scripts (consent, tag manager, analytics, chat). Defer, lazy-load, or gate les on interaction — usually the biggest unique win.
• Reduce DOM size; appliquer content-visibility to off-screen sections.
• Defer / code-split non-critical JS so post-load scripts don’t block early interactions.
• Re-measure in the field après deploy — CrUX is a rolling 28-day window, so the score moves slowly.

INP vs FID — cheat sheet

Fast facts

• Thresholds (field, p75): Bon ≤ 200 ms · Nécessite improvement ≤ 500 ms · Poor > 500 ms.
• Counts: clicks, taps, keyboard. Excludes: scroll, hover, zoom.
• Latency = input delay + processing duration + presentation delay.
• Long task = quelconque main-thread task > 50 ms.
• Lab proxy: Total Blocking Temps — correlates, but seulement reflects load-time blocking. Authoritative source is field données (CrUX).
• Mobile réussir rate (~74%) is far ci-dessous desktop (~97%) — and mobile is ce que counts.

Yield to the principal thread

Quand vous have a long-running loop (rendering a big liste, processing données on click), periodically hand contrôler back to le navigateur so it peut service a pending utilisateur interaction. The modern API is scheduler.yield(); fall back to setTimeout où it isn’t pris en charge.

// Yield to the main thread every ~50 ms of work so the browser
// can handle a user interaction in between.
async function runJobs(jobQueue, deadline = 50) {
  let lastYield = performance.now();

  for (const job of jobQueue) {
    job();

    if (performance.now() - lastYield > deadline) {
      await yieldToMain();
      lastYield = performance.now();
    }
  }
}

// scheduler.yield() resumes with priority; setTimeout is the fallback.
function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    return scheduler.yield();          // Chrome 129+, Firefox 142+
  }
  return new Promise((resolve) => setTimeout(resolve, 0));
}

A few notes:

• scheduler.yield() renvoie a promise que resolves in a future task, and its continuation is prioritized — autre queued tasks won’t jump ahead of votre resumed code.
• setTimeout(..., 0) fonctionne everywhere but pushes votre continuation to the back of the queue (and navigateurs enforce a ~5 ms floor après several nested calls).
• Don’t reach pour isInputPending() — Google “ne … plus recommend[s] en utilisant ce API.”

Defer non-critical fonctionner in a handler

Run seulement ce que the suivant frame nécessite; push the rest behind a paint.

textBox.addEventListener('input', (event) => {
  updateTextBox(event);                  // render-critical: do it now

  requestAnimationFrame(() => {
    setTimeout(() => {
      updateWordCount(text);             // everything else: after paint
      checkSpelling(text);
      saveChanges(text);
    }, 0);
  });
});

Outils pour measuring and fixing INP

Field (authoritative — ce is ce que Google scores)

• PageSpeed Insights — CrUX field INP pour l’URL/origin, split by mobile and desktop, plus a lab diagnostic réussir.
• Search Console — Core Web Vitals report — INP status à travers votre URLs, grouped by problème, on field données.
• CrUX — the underlying Chrome Utilisateur Experience Report dataset (aussi queryable via the CrUX API / BigQuery).

Lab / debugging

• Chrome DevTools — Performances panel — the Interactions track times chaque interaction’s input delay, processing, and presentation, and flags anything over 200 ms; Live Metrics updates as vous click autour.
• Lighthouse — can’t mesurer INP directement; reports Total Blocking Temps as the lab proxy.

Real-user monitoring (RUM)

• web-vitals JS library — onINP() pour the valeur; the attribution construire (web-vitals/attribution) exposes inputDelay / processingDuration / presentationDelay, the interactionTarget selector, and LoAF entries so vous peut voir exactly qui script and element caused the slow interaction. Whatever RUM setup vous utiliser, document its sampling rate and attribution coverage — a RUM figure quoted sans que context isn’t comparable to CrUX’s field p75, and it can’t voir à l’intérieur cross-origin iframes the façon the aggregate metric peut (voir Edge cas, in the Avancé tab).

How the outils themselves score

A live exemple of the metric ce page describes — well-known page-speed and monitoring services ranked on leur propre real-user mobile INP (Chrome UX Report field données):

INP fixes que usually miss the point

Optimizing seulement the premier interaction

INP evaluates interactions à travers the visit, pas simplement the premier input. Exercise menus, search, filters, formulaires, and autre repeated contrôle avant deciding lune page is responsive.

Treating Total Blocking Temps as le résultat

TBT is a utile lab proxy parce que it exposes long main-thread tasks, but it n’est pas field INP. Utiliser it to trouver candidates, alors vérifier réel interactions with field données or an interaction trace.

Moving tout fonctionner into un delayed callback

Deferring a grand block peut simply déplacer the freeze. Break fonctionner into plus petit tasks and yield so le navigateur peut paint entre les.

Removing visual feedback to shorten the handler

A contrôler que performs fonctionner sans showing une réponse encore feels broken. Render the immediate state modifier premier, alors defer non-critical follow-up fonctionner.

Diagnose INP with the three-part latency model

Every slow interaction has three places to regarder:

1. Input delay: the event waited parce que précédent main-thread fonctionner was encore running. Audit long tasks and third-party JavaScript avant the handler began.
2. Processing duration: the event handler itself did aussi beaucoup. Reduce synchronous fonctionner, split loops, and postpone anything the suivant frame ne fait pas besoin.
3. Presentation delay: style, layout, or paint took aussi long après the handler. Reduce DOM complexity and éviter forcing repeated layout calculations.

Commencer with the largest phase in the trace. Re-record the même interaction après chaque modifier so a faster handler ne fait pas hide a nouveau presentation bottleneck.

Prove an INP modifier improved the interaction

Handler-yield tester

Tester to run: record the target interaction in the Performances panel avant and après splitting or yielding long fonctionner. Attendu result: the interaction’s processing span shrinks or is split by a paint. Échec interpretation: the expensive fonctionner is elsewhere or encore runs synchronously. Monitoring window: immediate in repeated traces. Rollback trigger: the contrôler updates out of order, loses state, or produces nouveau input errors.

Presentation tester

Tester to run: inspect the même trace’s style, layout, and paint fonctionner après the event handler. Attendu result: the suivant paint arrives sooner sans a plus grand layout task. Échec interpretation: DOM size or forced layout remains the bottleneck. Monitoring window: immediate in lab traces. Rollback trigger: the visual réponse becomes incomplete or unstable.

Field confirmation

Tester to run: comparer post-release onINP() attribution pour the modifié interaction and template with its baseline. Attendu result: p75 INP improves and the targeted element ne … plus dominates slow events. Échec interpretation: the lab cas did pas represent réel devices or journeys. Monitoring window: RUM as visits arrive; CrUX over its rolling 28-day window. Rollback trigger: responsiveness or interaction completion worsens consistently après deployment.

INP metrics worth tracking

Real-user INP at p75

Metric: the 75th-percentile INP by template and device class. Ce que it indique vous: si typical réel visits are responsive à travers leur complet journey. How to pull it: CrUX, PageSpeed Insights, or web-vitals RUM. Benchmark / realistic range: 200 ms or moins is bon; ci-dessus 500 ms is poor. Cadence: monitor après JavaScript releases and examiner the rolling field trend monthly.

Slow-interaction rate

Metric: the share of mesuré interactions ci-dessus 200 ms, grouped by target. Ce que it indique vous: qui contrôle créer the la plupart user-visible delay même quand lune page-level p75 passes. How to pull it: the attribution construire of web-vitals or Event Timing données in RUM. Benchmark / realistic range: establish a baseline per journey and reduce the highest-volume offenders. Cadence: weekly pour application-like templates.

Latency phase share

Metric: input delay, processing duration, and presentation delay pour slow interactions. Ce que it indique vous: si scheduling, handler code, or rendering is the principal constraint. How to pull it: DevTools traces and INP attribution. Benchmark / realistic range: aucun universal split is sain; comparer chaque phase contre its propre baseline and the total 200 ms bon threshold. Cadence: during every focused performances investigation.

Ressources utiles

Google / Chrome (the canon)

• Interaction jusqu’au prochain affichage (INP) — commencer ici.
• Optimize Interaction jusqu’au prochain affichage — the fixes.
• Optimize long tasks — yielding, scheduler.yield().
• Trouver slow interactions in the field — LoAF + attribution debugging.
• INP becomes a Core Web Vital — the March 12, 2024 launch.

Données

• Web Almanac 2024 — Performances — the real-world INP pass-rate numbers and sub-part medians.

From autour the industry

• INP — MDN Web Docs — MDN’s référence entry; bon pour cross-checking navigateur prise en charge and the metric definition outside Google’s propre docs.
• Scheduler API: scheduler.yield() — MDN — navigateur prise en charge table and spec details pour the principal yield primitive.
• PerformanceEventTiming — MDN — the underlying navigateur API que INP reads; utile quand digging into raw event timing données.
• Long Animation Frames API — Chrome Platform Status — LoAF browser-support tracking, the API que powers INP attribution in the web-vitals library.
• INP topic — Moteur de recherche Land — industry news coverage of INP updates, tester results, and the FID-to-INP transition from practitioners.

Stats worth citing

• ~74% mobile vs ~97% desktop réussir INP (2024). Mobile is dramatically harder — and parce que Google indexes mobile-first, it’s the number que matters pour le SEO. Web Almanac 2024
• Seulement ~53% of the top 1 000 sites réussir INP — feature-rich sites ship plus JavaScript to block the principal thread, so the biggest sites souvent do worse. Web Almanac 2024
• Long task = > 50 ms. Anything past 50 ms on the principal thread blocks the navigateur from responding to interactions — the direct mechanism behind poor INP. web.dev — Optimize long tasks
• Sub-part medians (2024): presentation delay ~36 ms is souvent the largest unique contributor at the median, with input delay and processing temps fermer behind at p75 — utile pour knowing qui third to attack. Web Almanac 2024

Videos

• Google Chrome Developers (YouTube) — the Core Web Vitals and INP explainers from the Chrome team, notamment walkthroughs of diagnosing slow interactions in DevTools. Channel

Testez vos connaissances: Interaction jusqu’au prochain affichage

Five rapide questions on responsiveness and INP diagnosis. Pick an réponse pour chaque, alors vérifier.

Journal des modifications