Interaction jusqu’au prochain affichage (INP)

TL;DR — INP mesure comment quickly votre page responds quand quelqu’un clicks, taps, or types. Le navigateur times le gap entre le interaction et le suivant visual mettre à jour, à travers le entier visit, et rapports roughly le worst un. Sous 200 ms est bon; over 500 ms est poor. c’est un de le three Core Web Vitals, et il replaced an older metric appelé Délai de première interaction dans 2024.

Ce que INP en réalité measures

Quand vous click a button, tap a menu, or type dans a box, vous expect lune page à react — a menu opens, a checkbox ticks, texte apparaît. Interaction à Suivant Paint (INP) mesure comment long que takes: le temps depuis votre interaction jusqu’à le navigateur paints le suivant frame showing quelque chose modifié.

Ici’s le partie que matters. INP ne fait pas simplement regarder à un interaction. Il watches chaque click, tap, et keyboard press during votre entier visit, alors rapports (fermer à) le slowest un. Donc a unique janky interaction — a recherche box que freezes pour half a deuxième chaque temps vous type — peut sink le entier score.

Scrolling, hovering, et zooming ne pas count. Seulement clicks, taps, et keyboard interactions sont mesuré.

The thresholds

INP est reported dans milliseconds, et Google buckets il dans 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

Le old responsiveness metric était Délai de première interaction (FID). FID seulement mesuré le delay avant le premier interaction on une page commencé étant handled — et il stopped timing le moment le fonctionner began. Il n’a pas count comment long que fonctionner en réalité took, or comment long le screen took à mettre à jour.

INP fixed tout de que. Il mesure le complet temps (commencer à visual mettre à jour) pour tout interactions, pas simplement le premier un. Google fait le switch official on March 12, 2024, et FID était gone depuis le outils entirely par 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 le click/tap handler itself.
• Big “long tasks” de JavaScript blocking tout.
• Tiers scripts — analytics, cookie-consent banners, chat widgets, balise managers. Ces sont some de le worst offenders, même on simple contenu sites.

Le corriger, broadly, est à faire moins fonctionner quand quelqu’un interacts, et à break big jobs dans petit pieces donc le navigateur peut squeeze votre interaction dans entre les.

Vouloir le réel mechanics — le three-partie latency breakdown, le 75th-percentile math, exactly Comment corriger chaque causer, et le SEO angle? Switch à le Avancé tab.

TL;DR — INP est le Core Web Vital pour responsiveness. Il observes le latency de tout click, tap, et keyboard interactions à travers a visit et rapports le valeur à le 75th percentile (un outlier dropped per 50 interactions) — pas simplement le premier entrée comme FID a fait. An interaction’s latency = entrée delay + processing duration + presentation delay. Bon ≤ 200 ms, poor > 500 ms, judged on champ données à p75. Il replaced FID on March 12, 2024 (FID entièrement supprimé depuis outils September 2024). Corriger il par breaking up long tasks, yielding à le principal thread avec scheduler.yield(), doing moins dans event handlers, shrinking le DOM, et deferring tiers scripts. c’est a champ metric — Total Blocking Temps est le lab proxy, et le deux ne pas toujours agree.

«## What INP measures — and how it differs from FID » (Traduction) (Résumé en français de la section vingt-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Google’s definition is precise: INP “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.”

That “all interactions… throughout the lifespan” phrasing is the whole story. INP is a visit-level metric, not a load-time one — and Google’s reasoning is that the vast majority of a user’s time on a page happens after it loads, so responsiveness during use matters more than the first impression alone. » (Traduction) (Résumé en français de la section vingt-cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Le contrast avec Délai de première interaction est le cleanest façon à comprendre il: “FID seulement mesuré le entrée delay de le premier interaction on une page. INP améliore on FID par observing tout interactions on une page, beginning depuis le entrée delay, à le temps il takes à exécuter event handlers.” FID timed un chose à propos de un interaction — le wait avant son handler commencé — et ignored les deux comment long le handler ran et comment long le screen took à mettre à jour. INP mesure le complet latency de chaque interaction.

Un nuance worth getting correct, parce que c’est a courant myth: INP est pas literally le worst interaction. À éviter punishing une page pour a unique random spike, le navigateur drops un outlier pour chaque 50 interactions, alors rapports le valeur à le 75th percentile de page views. On a faible-interaction visit, que lands on le slowest interaction; on a heavy un, a couple de outliers obtenir excluded premier.

Ce que counts as an interaction est aussi narrower que personnes assume. Seulement clicks, taps, et keyboard presses sont mesuré. Scrolling, hovering, et zooming sont explicitly excluded. Et a unique gesture peut fire plusieurs events — a tap produces pointerdown, pointerup, et click — qui INP groupes as un interaction, pas three. Dans que groupe, INP takes le longest individual event duration, pas le sum de tout de les — donc a rapide pointerdown suivant à a lent click encore rapports as un interaction sized par le lent event. Si une page a aucun qualifying interactions during a visit, INP simplement n’est pas reported pour il.

Le three parties de an interaction’s latency

Chaque interaction’s latency breaks dans three sequential pieces. Ce est le model à garder dans votre head, parce que chaque partie points à a différent corriger:

Interaction latency = Input delay + Processing duration + Presentation delay

1. Entrée delay — le temps avant votre event handlers peut même commencer running, généralement parce que le principal thread est busy finishing a long task.
2. Processing duration — le temps il takes tout de votre event handler callbacks à execute.
3. Presentation delay — le temps depuis quand votre handlers finish jusqu’à le navigateur paints le suivant frame on screen.

Le web-vitals attribution construire exposes tout three (inputDelay, processingDuration, presentationDelay) donc vous pouvez voir qui partie dominates on a réel interaction. Per le Web Almanac’s 2024 données, presentation delay est souvent le largest unique piece à le median — mais processing duration est où le optimization leverage généralement lives, parce que c’est le partie que balloons on poorly-built pages.

Le thresholds — et le p75 champ caveat

«Google Search Central states the target plainly — “an INP of less than 200 milliseconds” — and frames the whole program as: “We highly recommend site owners achieve good Core Web Vitals for success with Search.” The 200 ms budget is genuinely tight when you remember the browser wants a frame every ~16.7 ms at 60 fps; all of your handler work plus rendering has to fit.

» (Traduction) (Résumé en français de la section trente-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

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

Ce est le trap que catches a lot de SEOs: a green Lighthouse score ne fait pas signifier bon INP. Mais “Lighthouse ne peut pas mesurer INP” nécessite three séparé cas, pas un, or vous’ll misread votre propre tooling:

1. A standard, noninteractive Lighthouse exécuter rapports aucun INP à tout. Il seulement observes lune page chargement — il jamais clicks, taps, or types n’importe quoi — donc il y a aucun interaction à temps. Lighthouse falls back on Total Blocking Temps (TBT) as a charger-time proxy à la place. Google’s propre framing: “Parce que TBT correlates bien avec INP, une page avec a élevé TBT est a reasonable indicator que là peut être élevé INP valeurs during charger.” Le key words sont “during charger.” TBT dit rien à propos de an interaction que goes mauvais ten seconds plus tard quand a lazy-chargé widget exécute — c’est a proxy, jamais a substitute or a conversion formula.
2. A manuellement or synthetically exercised interaction — clicking a réel button dans DevTools, or scripting a click dans a lab outil — fait produce a réel INP-style latency number pour que un interaction. c’est utile pour reproducing a spécifique bug. Mais c’est encore un scripted chemin on un device: il ne peut pas stand dans pour le champ’s mix de réel devices, réel utilisateurs, réel interaction targets, et a complet visit’s worth de page lifetime. As Google puts il, le résultating valeur “va être dependent on ce que interactions sont performed during le measurement period,” et réel utilisateur behavior est aussi variable pour a unique lab exécuter à represent il.
3. Le champ distribution est le seulement chose INP en réalité est. c’est pourquoi le authoritative source est champ données: le Chrome Utilisateur Experience Rapport (CrUX), surfaced via PageSpeed Insights et le Search Console Core Web Vitals rapport. “Champ données est le meilleur source de information vous pouvez draw on quand il comes à understanding qui interactions sont problematic pour réel utilisateurs.”

Utiliser le lab (cas 1 et 2) à trouver et reproduce a lent interaction; utiliser le champ (cas 3) à confirmer si c’est en réalité dragging bas réel visitors’ scores.

Pourquoi votre INP score is poor

Presque chaque INP problème traces back à le principal thread étant bloqué quand a utilisateur interacts. Le usual suspects:

• Long tasks. Quelconque main-thread task over 50 ms est a long task; le amount over 50 ms est son “blocking period.” Pendant que un exécute, votre interaction ne peut pas être handled. Ce est le unique biggest causer.
• Heavy event handlers. Doing aussi beaucoup synchronously à l’intérieur a click/entrée handler inflates processing duration directement.
• Grand DOM size. Bigger DOMs coût plus à rendre, qui inflates les deux entrée et presentation delay.
• Tiers scripts. Per le Web Almanac, consent providers, balise managers, analytics, et chat widgets sont top offenders — et ils hit même simple contenu sites. ils sont le premier placer Je regarder on une page Je n’a pas construire.
• Post-charger JavaScript. Simplement parce que une page rendu ne fait pas signifier il finished chargement — scripts evaluating après premier paint peut bloquer early interactions.

Comment corriger it

Le strategies, roughly dans order de impact:

1. Break up long tasks. Google’s core advice on handlers est à “faire as little fonctionner as possible dans les.” Split a big job dans plus petit tasks donc le navigateur peut interleave a utilisateur interaction. Quand tasks sont broken up, “le navigateur peut respond à higher-priority fonctionner beaucoup sooner — notamment utilisateur interactions.”

«2. Yield to the main thread. The modern, recommended way is scheduler.yield() (Chrome 129+, Firefox 142+): await scheduler.yield() pauses your code, lets the browser handle pending work, and resumes with priority — so other tasks won’t cut the line ahead of your continuation. The classic fallback is setTimeout(..., 0), which still works but sends your code to the back of the task queue (and browsers enforce a 5 ms floor after several nested calls). One thing to stop doing: isInputPending() — Google now says “we no longer recommend using this API.” See the Scripts tab for the pattern. » (Traduction) (Résumé en français de la section quarante-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

3. Faire moins dans event handlers — defer le non-critical fonctionner. Exécuter seulement le visual mettre à jour le suivant frame nécessite synchronously; push tout sinon (saving, spell-vérifier, analytics, word counts) behind requestAnimationFrame + setTimeout or a yield. Le utilisateur voit la réponse immédiatement; le 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 et defer tiers scripts. Ce est le highest-leverage SEO corriger on réel sites. Charger consent/balise/analytics scripts lazily, gate les on interaction, or déplacer les off le critical chemin. A “lightweight” contenu page peut échouer INP purely parce que de a heavy embedded widget.

Fait INP affecter rankings?

Oui — INP est un de le three Core Web Vitals, et Core Web Vitals sont partie de Google’s page-experience signaux. Mais c’est a lightweight signal: a tiebreaker entre comparably pertinent résultats, pas a principal facteur de classement. ne pas chase a perfect INP score à le expense de contenu et pertinence.

Deux practical SEO points. Premier, mobile est le difficile number. Dans le 2024 Web Almanac, ~74% de mobile sites réussi INP versus ~97% on desktop — et parce que Google indexes mobile-premier, le mobile figure est le un que counts. Deuxième, complexe sites faire pire: seulement ~53% de le top 1 000 sites réussi, parce que fonctionnalité-rich pages ship plus JavaScript à bloquer le principal thread. Heavy fonctionnalité development est an INP risque, et élevé-interaction pages — produit pages, checkout, résultats de recherche, formulaires — sont far plus exposed que static contenu.

INP vs FID — the complet picture

FID est gone — supprimé depuis Search Console on le day INP launched et depuis CrUX’s BigQuery/API par September 2024. Si a outil or audit encore références FID, c’est 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 et hovering — il y a aucun INP valeur pour que page view. Ce est normal on lire-seulement contenu pages et n’est pas a bug dans votre monitoring.
• Iframes count toward le metric, mais votre propre JavaScript ne peut pas voir à l’intérieur les. An interaction à l’intérieur an embedded iframe (an ad, a widget, an embedded formulaire) contributes à lune page’s INP. Mais a premier-party RUM script ne peut pas lire events depuis a cross-origin iframe le façon le navigateur’s propre metric peut — donc CrUX et a même-origin RUM setup peut legitimately disagree on pages avec tiers embeds. Document ce gap plutôt que treating a RUM/champ mismatch as a bug.
• Back/forward cache restores reset INP à zero. Une page pulled depuis bfcache (le back button, pour instance) commence a fresh INP count — interactions depuis avant le navigation away ne pas carry over.
• Long-lived et backgrounded tabs encore besoin à rapport. Parce que a tab peut sit ouvrir pour hours sans ever formally unloading — surtout on mobile, où le OS peut simplement kill il — INP devrait être captured quand lune page becomes hidden, pas seulement on unload. RUM setups que seulement flush on unload va silently lose données depuis ces visits.

Où ce sits

INP est un piece de le Core Web Vitals picture, alongside Largest Contentful Paint (chargement) et Décalage cumulatif de mise en page (visual stability). Vérifier il dans PageSpeed Insights et le Search Console rapport (champ), et debug il dans Lighthouse / Chrome DevTools (lab, via le TBT proxy). Le données behind tout de il comes depuis CrUX.

AI summary

A condensed prendre on the Avancé version:

• INP = le Core Web Vital pour responsiveness. Il observes le latency de tout click, tap, et keyboard interactions à travers a entier visit et rapports le valeur à le 75th percentile (un outlier dropped per 50 interactions) — pas simplement le premier entrée le façon FID a fait.
• Latency = entrée delay + processing duration + presentation delay. Chaque partie points à a différent corriger; processing duration est généralement où le leverage est.
• Thresholds (champ, p75): bon ≤ 200 ms, nécessite improvement ≤ 500 ms, poor

  500 ms.

• Seulement clicks, taps, et keyboard count — scroll, hover, et zoom sont excluded; a unique gesture’s plusieurs events sont grouped as un interaction.
• Il replaced FID on March 12, 2024 (FID entièrement supprimé depuis outils September 2024). FID seulement timed le premier interaction’s entrée delay.
• c’est a champ metric, et “Lighthouse ne peut pas mesurer il” a three cas: a standard noninteractive Lighthouse exécuter rapports aucun INP et falls back à Total Blocking Temps as a charger-time proxy; a manuellement exercised lab interaction fait produce a réel unique-interaction latency mais ne peut pas stand dans pour le champ population; seulement CrUX / PageSpeed Insights / Search Console champ données est authoritative.
• Causes: long tasks (>50 ms), heavy event handlers, grand DOM, et surtout tiers scripts (consent, balise managers, analytics, chat).
• Corrections: break up long tasks, yield avec scheduler.yield() (setTimeout fallback; isInputPending() est ne … plus recommended), faire moins dans handlers, éviter layout thrashing, shrink le DOM, defer tiers scripts.
• Edge cas: aucun qualifying interaction signifie aucun INP valeur; iframe interactions count toward le metric mais a même-origin RUM script ne peut pas voir à l’intérieur les; bfcache restores reset INP; long-lived/backgrounded tabs devrait rapport on hidden, pas simplement on unload.
• SEO: a lightweight classement signal. Mobile (~74% réussir vs ~97% desktop) est le number que matters sous indexation mobile-premier; élevé-interaction pages sont la plupart exposed.

Documentation officielle

Primary-source documentation depuis Google / le Chrome team.

web.dev — le INP références

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

Chrome / Recherche Google

• Performances fonctionnalités référence (Chrome DevTools) — le Interactions track, Actif Metrics, et le 200 ms warning.
• CrUX release notes — confirms FID’s removal depuis BigQuery/API dans September 2024.
• Core Web Vitals & Recherche Google résultats — INP as partie de lune page-experience signal; le ≤ 200 ms cible.

Quotes from the source

On-le-record statements depuis Google / le Chrome team. Chaque lien est a deep lien que jumps à le quoted passage on le page source.

«What INP measures, and how it differs from FID » (Traduction) (Résumé en français de la section soixante-dix-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- “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 to Next Paint (INP). Jump to quote » (Traduction) (Résumé en français de la section quatre-vingts, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “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 » (Traduction) (Résumé en français de la section quatre-vingts, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- “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, First Input Delay (FID). Jump to quote » (Traduction) (Résumé en français de la section quatre-vingts, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

The FID → INP switch

«- “FID will be deprecated.” — Jeremy Wagner & Rick Viscomi, web.dev blog, Interaction to Next Paint officially becomes a Core Web Vital. Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “FID will be removed from Google Search Console as soon as INP becomes a Core Web Vital on March 12.” Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-deux, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

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 » (Traduction) (Résumé en français de la section quatre-vingt-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

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, Find slow interactions in the field. Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Recherche Google

«- “We highly recommend site owners achieve good Core Web Vitals for success with Search.” — Google Search Central, Core Web Vitals & Google Search results. Source » (Traduction) (Résumé en français de la section quatre-vingt-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

INP fix checklist

Fonctionner top à bottom — le éléments near le top tend à déplacer le number la plupart:

• Pull champ INP (PageSpeed Insights / Search Console CWV rapport), pas simplement a lab score — et vérifier mobile séparément.
• Identifier le lent interaction(s) avec le web-vitals attribution construire or Chrome DevTools’ Interactions track (il flags n’importe quoi over 200 ms).
• Trouver et break up long tasks (n’importe quoi over 50 ms on le principal thread).
• Yield à le principal thread à l’intérieur long-running loops — scheduler.yield(), avec a setTimeout(..., 0) fallback. (Arrêter en utilisant isInputPending().)
• À l’intérieur chaque handler, exécuter seulement le rendre-critical mettre à jour synchronously; defer saving, validation, spell-vérifier, analytics behind rAF + setTimeout.
• Vérifier pour layout thrashing — reading layout correct après writing styles dans le même task. Batch lit, alors écrit.
• Audit tiers scripts (consent, balise manager, analytics, chat). Defer, lazy-charger, or gate les on interaction — généralement le biggest unique win.
• Reduce DOM size; appliquer content-visibility à off-screen sections.
• Defer / code-split non-critical JS donc post-charger scripts ne pas bloquer early interactions.
• Re-mesurer dans le champ après deploy — CrUX est a rolling 28-day window, donc le score moves slowly.

«## INP vs FID — cheat sheet » (Traduction) (Résumé en français de la section quatre-vingt-dix-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

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() returns a promise that resolves in a future task, and its continuation is prioritized — other queued tasks won’t jump ahead of your resumed code. » (Traduction) (Résumé en français de la section cent sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- setTimeout(..., 0) works everywhere but pushes your continuation to the back of the queue (and browsers enforce a ~5 ms floor after several nested calls). » (Traduction) (Résumé en français de la section cent sept, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Don’t reach for isInputPending() — Google “no longer recommend[s] using this API.” » (Traduction) (Résumé en français de la section cent sept, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

Defer non-critical fonctionner in a handler

Exécuter seulement ce que le suivant frame nécessite; push le 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

Champ (authoritative — ce est ce que Google scores)

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

Lab / debugging

• Chrome DevTools — Performances panel — le Interactions track times chaque interaction’s entrée delay, processing, et presentation, et flags n’importe quoi over 200 ms; Actif Metrics mises à jour as vous click autour.
• Lighthouse — ne peut pas mesurer INP directement; rapports Total Blocking Temps as le lab proxy.

Real-utilisateur monitoring (RUM)

• web-vitals JS library — onINP() pour le valeur; le attribution construire (web-vitals/attribution) exposes inputDelay / processingDuration / presentationDelay, le interactionTarget selector, et LoAF entries donc vous peut voir exactly qui script et element caused le lent interaction. Whatever RUM setup vous utiliser, document son sampling rate et attribution coverage — a RUM figure quoted sans que context n’est pas comparable à CrUX’s champ p75, et il ne peut pas voir à l’intérieur cross-origin iframes le façon le aggregate metric peut (voir Edge cas, dans le Avancé tab).

How the outils themselves score

A actif exemple de le metric ce page décrit — well-known page-speed et monitoring services ranked on leur propre real-utilisateur mobile INP (Chrome UX Rapport champ données):

«## INP fixes that usually miss the point » (Traduction) (Résumé en français de la section cent vingt-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«### Optimizing only the first interaction » (Traduction) (Résumé en français de la section cent vingt-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«INP evaluates interactions across the visit, not just the first input. Exercise menus, search, filters, forms, and other repeated controls before deciding the page is responsive. » (Traduction) (Résumé en français de la section cent vingt-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

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 bloquer peut simplement déplacer le freeze. Break fonctionner dans plus petit tasks et yield donc le navigateur peut paint entre les.

Removing visual feedback à shorten le handler

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

Diagnose INP avec le three-partie latency model

Every slow interaction has three places to regarder:

1. Entrée delay: le event waited parce que précédent main-thread fonctionner était encore running. Audit long tasks et tiers JavaScript avant le handler began.
2. Processing duration: le event handler itself a fait aussi beaucoup. Reduce synchronous fonctionner, split loops, et postpone n’importe quoi le suivant frame ne fait pas besoin.
3. Presentation delay: style, layout, or paint took aussi long après le handler. Reduce DOM complexity et éviter forcing repeated layout calculations.

Commencer avec le largest phase dans le trace. Re-record le même interaction après chaque modifier donc a faster handler ne fait pas hide a nouveau presentation bottleneck.

Prove an INP modifier improved the interaction

Handler-yield tester

Tester à exécuter: record le cible interaction dans le Performances panel avant et après splitting or yielding long fonctionner. Attendu résultat: le interaction’s processing span shrinks or est split par a paint. Échec interpretation: le expensive fonctionner est elsewhere or encore exécute synchronously. Monitoring window: immediate dans repeated traces. Rollback trigger: le contrôler mises à jour out de order, loses state, or produces nouveau entrée erreurs.

Presentation tester

Tester à exécuter: inspect le même trace’s style, layout, et paint fonctionner après le event handler. Attendu résultat: le suivant paint arrives sooner sans a plus grand layout task. Échec interpretation: DOM size or forced layout remains le bottleneck. Monitoring window: immediate dans lab traces. Rollback trigger: le visual réponse becomes incomplete or unstable.

Field confirmation

Tester à exécuter: comparer post-release onINP() attribution pour le modifié interaction et template avec son baseline. Attendu résultat: p75 INP améliore et le targeted element ne … plus dominates lent events. Échec interpretation: le lab cas a fait pas represent réel devices or journeys. Monitoring window: RUM as visits arrive; CrUX over son 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: le 75th-percentile INP par template et device class. Ce que il indique vous: si typical réel visits sont responsive à travers leur complet journey. Comment pull il: CrUX, PageSpeed Insights, or web-vitals RUM. Benchmark / realistic range: 200 ms or moins est bon; ci-dessus 500 ms est poor. Cadence: monitor après JavaScript releases et examiner le rolling champ trend monthly.

Slow-interaction rate

Metric: le share de mesuré interactions ci-dessus 200 ms, grouped par cible. Ce que il indique vous: qui contrôle créer le la plupart utilisateur-visible delay même quand lune page-level p75 passes. Comment pull il: le attribution construire de web-vitals or Event Timing données dans RUM. Benchmark / realistic range: establish a baseline per journey et reduce le highest-volume offenders. Cadence: weekly pour application-like templates.

Latency phase share

Metric: entrée delay, processing duration, et presentation delay pour lent interactions. Ce que il indique vous: si scheduling, handler code, or rendu est le principal constraint. Comment pull il: DevTools traces et INP attribution. Benchmark / realistic range: aucun universal split est sain; comparer chaque phase contre son propre baseline et le total 200 ms bon threshold. Cadence: during chaque focused performances investigation.

Ressources utiles

Google / Chrome (le canon)

• Interaction jusqu’au prochain affichage (INP) — commencer ici.
• Optimize Interaction jusqu’au prochain affichage — le corrections.
• Optimize long tasks — yielding, scheduler.yield().
• Trouver lent interactions dans le champ — LoAF + attribution debugging.
• INP becomes a Core Web Vital — le March 12, 2024 launch.

Données

• Web Almanac 2024 — Performances — le real-world INP pass-rate numbers et sub-partie medians.

«From around the industry » (Traduction) (Résumé en français de la section cent soixante, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- INP — MDN Web Docs — MDN’s reference entry; good for cross-checking browser support and the metric definition outside Google’s own docs. » (Traduction) (Résumé en français de la section cent soixante, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Scheduler API: scheduler.yield() — MDN — browser support table and spec details for the main yield primitive. » (Traduction) (Résumé en français de la section cent soixante, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- PerformanceEventTiming — MDN — the underlying browser API that INP reads; useful when digging into raw event timing data. » (Traduction) (Résumé en français de la section cent soixante, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- Long Animation Frames API — Chrome Platform Status — LoAF browser-support tracking, the API that powers INP attribution in the web-vitals library. » (Traduction) (Résumé en français de la section cent soixante, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.) «- INP topic — Search Engine Land — industry news coverage of INP updates, test results, and the FID-to-INP transition from practitioners. » (Traduction) (Résumé en français de la section cent soixante, sous-partie six : le texte source est conservé pour vérification lors de la relecture francophone.)

Stats worth citing

• ~74% mobile vs ~97% desktop réussir INP (2024). Mobile est dramatically harder — et parce que Google indexes mobile-premier, c’est le number que matters pour le SEO. Web Almanac 2024
• Seulement ~53% de le top 1 000 sites réussir INP — fonctionnalité-rich sites ship plus JavaScript à bloquer le principal thread, donc le biggest sites souvent faire pire. Web Almanac 2024
• Long task = > 50 ms. N’importe quoi past 50 ms on le principal thread bloque le navigateur depuis responding à interactions — le direct mechanism behind poor INP. web.dev — Optimize long tasks
• Sub-partie medians (2024): presentation delay ~36 ms est souvent le largest unique contributor à le median, avec entrée delay et processing temps fermer behind à p75 — utile pour knowing qui third à attack. Web Almanac 2024

Videos

• Google Chrome Developers (YouTube) — le Core Web Vitals et INP explainers depuis le Chrome team, notamment walkthroughs de diagnosing lent interactions dans DevTools. Channel

Testez vos connaissances: Interaction jusqu’au prochain affichage

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

Journal des modifications