Interaction to następny Paint (INP)

TL;DR — INP measures how quickly twój strona responds gdy someone clicks, taps, lub types. The przeglądarka times the gap między the interaction i the następny visual update, w całym the whole visit, i raporty roughly the worst one. poniżej 200 ms jest good; ponad 500 ms jest poor. It’s one of the three Core Web Vitals, i it replaced an older metric called opóźnienie pierwszego wejścia in 2024.

co INP actually measures

gdy you click a button, tap a menu, lub type in a box, you expect the strona to react — a menu opens, a checkbox ticks, tekst appears. Interaction to następny Paint (INP) measures how long że takes: the time z twój interaction until the przeglądarka paints the następny frame showing something changed.

Here’s the part że matters. INP doesn’t just look at one interaction. It watches każdy click, tap, i keyboard press podczas twój entire visit, then raporty (close to) the slowest one. So a single janky interaction — a search box że freezes dla half a second każdy time you type — może sink the whole score.

Scrolling, hovering, i zooming don’t count. tylko clicks, taps, i keyboard interactions są measured.

The thresholds

INP jest reported in milliseconds, i Google buckets it do three ratings:

• Good — 200 ms lub mniej
• Needs improvement — więcej niż 200 ms, up to 500 ms
• Poor — więcej niż 500 ms

dla context: 200 ms jest fast, ale it’s nie a lot of headroom. Everything twój code robi in odpowiedź to a click — plus the przeglądarka drawing the wynik — ma to fit inside it.

Why it replaced FID

The old responsiveness metric był opóźnienie pierwszego wejścia (FID). FID tylko measured the opóźnienie przed the pierwszy interaction on a strona started będąc handled — i it stopped timing the moment the działać began. It didn’t count how long że działać actually took, lub how long the screen took to update.

INP fixed wszystkie of że. It measures the pełny time (start to visual update) dla wszystkie interactions, nie just the pierwszy one. Google made the switch official on March 12, 2024, i FID był gone z the narzędzia entirely by September 2024.

co makes INP bad — in plain terms

Almost zawsze, it’s JavaScript hogging the main thread. The przeglądarka może tylko robić one thing at a time on że thread, so if a chunk of script jest busy running, twój click ma to wait in wiersz. Common culprits:

• Heavy działać running inside the click/tap handler itself.
• Big “long tasks” of JavaScript blocking everything.
• Third-party scripts — analytics, cookie-zgoda banners, chat widgets, znacznik managers. te są niektóre of the worst offenders, even on prosty treść witryny.

The fix, broadly, jest to robić mniej działać gdy someone interacts, i to break big jobs do mały pieces so the przeglądarka może squeeze twój interaction in między them.

Want the rzeczywisty mechanics — the three-part opóźnienie breakdown, the 75th-percentile math, exactly how to fix każdy cause, i the SEO angle? Switch to the Advanced tab.

TL;DR — INP jest the Core Web Vital dla responsiveness. It observes the opóźnienie of wszystkie click, tap, i keyboard interactions w całym a visit i raporty the wartość at the 75th percentile (one outlier dropped per 50 interactions) — nie just the pierwszy input like FID zrobił. An interaction’s opóźnienie = input opóźnienie + processing duration + presentation opóźnienie. Good ≤ 200 ms, poor > 500 ms, judged on pole data at p75. It replaced FID on March 12, 2024 (FID fully removed z narzędzia September 2024). Fix it by breaking up long tasks, yielding to the main thread z scheduler.yield(), doing mniej in event handlers, shrinking the DOM, i deferring third-party scripts. It’s a pole metric — Total Blocking Time jest the lab proxy, i the two don’t zawsze agree.

co INP measures — i how it differs z FID

Google’s definition jest 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.”

że “all interactions… throughout the lifespan” phrasing jest the whole story. INP jest a visit-level metric, nie a load-time one — i Google’s reasoning jest że the vast majority of a użytkownik’s time on a strona happens po it loads, so responsiveness podczas używać matters więcej niż the pierwszy impression alone.

The contrast z opóźnienie pierwszego wejścia jest the cleanest way to understand it: “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.” FID timed one thing o one interaction — the wait przed jego handler started — i ignored oba how long the handler ran i how long the screen took to update. INP measures the pełny opóźnienie of każdy interaction.

One nuance worth getting right, ponieważ it’s a common myth: INP jest nie literally the worst interaction. To avoid punishing a strona dla a single random spike, the przeglądarka drops one outlier dla każdy 50 interactions, then raporty the wartość at the 75th percentile of strona views. On a niski-interaction visit, że lands on the slowest interaction; on a heavy one, a couple of outliers get excluded pierwszy.

co counts as an interaction jest również narrower than people assume. tylko clicks, taps, i keyboard presses są measured. Scrolling, hovering, i zooming są explicitly excluded. i a single gesture może fire several events — a tap produces pointerdown, pointerup, i click — który INP groups as one interaction, nie three. w że group, INP takes the longest individual event duration, nie the sum of wszystkie of them — so a fast pointerdown następny to a slow click nadal raporty as one interaction sized by the slow event. If a strona ma no qualifying interactions podczas a visit, INP simply isn’t reported dla it.

The three parts of an interaction’s opóźnienie

każdy interaction’s opóźnienie breaks do three sequential pieces. ten jest the model to zachować in twój head, ponieważ każdy part points at a różny fix:

Interaction latency = Input delay + Processing duration + Presentation delay

1. Input opóźnienie — the time przed twój event handlers może even start running, zwykle ponieważ the main thread jest busy finishing a long task.
2. Processing duration — the time it takes wszystkie of twój event handler callbacks to execute.
3. Presentation opóźnienie — the time z gdy twój handlers finish until the przeglądarka paints the następny frame on screen.

The web-vitals attribution build exposes wszystkie three (inputDelay, processingDuration, presentationDelay) so you może see który part dominates on a rzeczywisty interaction. Per the Web Almanac’s 2024 data, presentation opóźnienie jest często the largest single piece at the median — ale processing duration jest gdzie the optymalizacja leverage zwykle lives, ponieważ it’s the part że balloons on poorly-built strony.

The thresholds — i the p75 pole caveat

Google Search Central states the target plainly — “an INP of less than 200 milliseconds” — i frames the whole program as: “We highly recommend site owners achieve good Core Web Vitals for success with Search.” The 200 ms budget jest genuinely tight gdy you remember the przeglądarka wants a frame każdy ~16,7 ms at 60 fps; wszystkie of twój handler działać plus renderowanie ma to fit.

Why INP jest a pole metric (i lab data isn’t enough)

ten jest the trap że catches a lot of SEOs: a green Lighthouse score robi nie mean good INP. ale “Lighthouse can’t measure INP” needs three oddzielny cases, nie one, lub you’ll misread twój own tooling:

1. A standard, noninteractive Lighthouse run raporty no INP at wszystkie. It tylko observes the strona ładowanie — it nigdy clicks, taps, lub types anything — so there’s no interaction to time. Lighthouse falls back on Total Blocking Time (TBT) as a load-time proxy instead. Google’s own framing: “Because TBT correlates well with INP, a page with a high TBT is a reasonable indicator that there may be high INP values during load.” The key words są “during load.” TBT says nothing o an interaction że goes bad ten seconds later gdy a lazy-załadowany widget runs — it’s a proxy, nigdy a substitute lub a conversion formula.
2. A manually lub synthetically exercised interaction — clicking a rzeczywisty button in DevTools, lub scripting a click in a lab narzędzie — robi produce a rzeczywisty INP-style opóźnienie liczba dla że one interaction. że’s użyteczny dla reproducing a specific bug. ale it’s nadal one scripted path on one urządzenie: it może’t stand in dla the pole’s mix of rzeczywisty urządzenia, rzeczywisty użytkownicy, rzeczywisty interaction targets, i a pełny visit’s worth of strona lifetime. As Google puts it, the resulting wartość “will be dependent on what interactions are performed during the measurement period,” i rzeczywisty użytkownik behavior jest too variable dla a single lab run to represent it.
3. The pole distribution jest the tylko thing INP actually jest. że’s why the authoritative źródło jest pole data: the Chrome doświadczenie użytkownika raport (CrUX), surfaced przez PageSpeed Insights i the Search Console Core Web Vitals raport. “Field data is the best source of information you can draw on when it comes to understanding which interactions are problematic for actual users.”

użyj lab (cases 1 i 2) to find i reproduce a slow interaction; użyj pole (case 3) to confirm whether it’s actually dragging down rzeczywisty visitors’ scores.

Why twój INP score jest poor

Almost każdy INP problem traces back to the main thread będąc blocked gdy a użytkownik interacts. The usual suspects:

• Long tasks. dowolny main-thread task ponad 50 ms jest a long task; the amount ponad 50 ms jest jego “blocking period.” podczas gdy one runs, twój interaction może’t być handled. ten jest the single biggest cause.
• Heavy event handlers. Doing too much synchronously inside a click/input handler inflates processing duration directly.
• duży DOM size. Bigger DOMs cost więcej to render, który inflates oba input i presentation opóźnienie.
• Third-party scripts. Per the Web Almanac, zgoda providers, znacznik managers, analytics, i chat widgets są top offenders — i they hit even prosty treść witryny. They’re the pierwszy place I look on a strona I didn’t build.
• Post-load JavaScript. Just ponieważ a strona wyrenderowany doesn’t mean it finished ładowanie — scripts evaluating po pierwszy paint może blok early interactions.

How to fix it

The strategies, roughly in order of impact:

1. Break up long tasks. Google’s core advice on handlers jest to “do as little work as possible in them.” Split a big job do smaller tasks so the przeglądarka może interleave a użytkownik interaction. gdy tasks są broken up, “the browser can respond to higher-priority work much sooner — including user interactions.”

2. Yield to the main thread. The modern, recommended way jest scheduler.yield() (Chrome 129+, Firefox 142+): await scheduler.yield() pauses twój code, lets the przeglądarka handle pending działać, i resumes z priority — so other tasks won’t cut the wiersz ahead of twój continuation. The classic fallback jest setTimeout(..., 0), który nadal działa ale wysyła twój code to the back of the task queue (i przeglądarki enforce a 5 ms floor po several nested calls). One thing to stop doing: isInputPending() — Google now says “we no longer recommend using this API.” See the Scripts tab dla the pattern.

3. robić mniej in event handlers — defer the non-critical działać. Run tylko the visual update the następny frame needs synchronously; push everything else (saving, spell-sprawdzenie, analytics, word counts) behind requestAnimationFrame + setTimeout lub a yield. The użytkownik sees the odpowiedź immediately; the bookkeeping happens po.

4. Avoid layout thrashing. Reading layout właściwości right po writing styles in the same task forces the przeglądarka do synchronous layout it mógł otherwise mieć batched. Batch reads, then writes.

5. Reduce DOM size. Smaller trees render faster. content-visibility może lazily render off-screen elementy so they don’t cost you podczas load lub interaction.

6. Audit i defer third-party scripts. ten jest the highest-leverage SEO fix on rzeczywisty witryny. Load zgoda/znacznik/analytics scripts lazily, gate them on interaction, lub move them off the critical path. A “lightweight” treść strona może fail INP purely z powodu a heavy embedded widget.

robi INP affect rankings?

Yes — INP jest one of the three Core Web Vitals, i Core Web Vitals są part of Google’s strona-experience signals. ale it’s a lightweight signal: a tiebreaker między comparably relevant wyniki, nie a primary czynnik rankingowy. Don’t chase a perfect INP score at the expense of treść i relevance.

Two practical SEO points. pierwszy, mobilny jest the trudny liczba. In the 2024 Web Almanac, ~74% of mobilny witryny passed INP versus ~97% on komputer stacjonarny — i ponieważ Google indexes mobilny-pierwszy, the mobilny figure jest the one że counts. Second, complex witryny robić worse: tylko ~53% of the top 1 000 witryny passed, ponieważ funkcja-rich strony ship więcej JavaScript to blok the main thread. Heavy funkcja development jest an INP risk, i wysoki-interaction strony — strony produktów, realizacja zakupu, wyniki wyszukiwania, forms — są far więcej exposed than statyczny treść.

INP vs FID — the pełny picture

FID jest gone — removed z Search Console on the day INP launched i z CrUX’s BigQuery/API by September 2024. If a narzędzie lub audit nadal references FID, it’s stale.

Edge cases że make INP data disagree

A handful of lifecycle quirks wyjaśniać najbardziej “why doesn’t my RUM match CrUX” questions:

• No interactions, no INP. If a visit nigdy gets a click, tap, lub key press — lub tylko gets excluded gestures like scrolling i hovering — there’s no INP wartość dla że strona view. ten jest normal on read-tylko treść strony i isn’t a bug in twój monitorowanie.
• Iframes count toward the metric, ale twój own JavaScript może’t see inside them. An interaction inside an embedded iframe (an ad, a widget, an embedded form) contributes to the strona’s INP. ale a pierwszy-party RUM script może’t read events z a cross-origin iframe the way the przeglądarka’s own metric może — so CrUX i a same-origin RUM setup może legitimately disagree on strony z third-party embeds. Document ten gap zamiast treating a RUM/pole mismatch as a bug.
• Back/forward pamięć podręczna restores reset INP to zero. A strona pulled z bfcache (the back button, na przykład) starts a fresh INP count — interactions z przed the navigation away don’t carry ponad.
• Long-lived i backgrounded tabs nadal need to raport. ponieważ a tab może sit otwarty dla hours bez ever formally unloading — especially on mobilny, gdzie the OS może just kill it — INP powinien być captured gdy the strona becomes hidden, nie tylko on unload. RUM setups że tylko flush on unload będzie silently lose data z te visits.

gdzie ten sits

INP jest one piece of the Core Web Vitals picture, alongside Largest Contentful Paint (ładowanie) i Cumulative Layout Shift (visual stability). sprawdzenie it in PageSpeed Insights i the Search Console raport (pole), i debug it in Lighthouse / Chrome DevTools (lab, via the TBT proxy). The data behind wszystkie of it comes z CrUX.

AI summary

A condensed take on the Advanced version:

• INP = the Core Web Vital dla responsiveness. It observes the opóźnienie of wszystkie click, tap, i keyboard interactions w całym a whole visit i raporty the wartość at the 75th percentile (one outlier dropped per 50 interactions) — nie just the pierwszy input the way FID zrobił.
• opóźnienie = input opóźnienie + processing duration + presentation opóźnienie. każdy part points at a różny fix; processing duration jest zwykle gdzie the leverage jest.
• Thresholds (pole, p75): good ≤ 200 ms, needs improvement ≤ 500 ms, poor

  500 ms.

• tylko clicks, taps, i keyboard count — scroll, hover, i zoom są excluded; a single gesture’s multiple events są grouped as one interaction.
• It replaced FID on March 12, 2024 (FID fully removed z narzędzia September 2024). FID tylko timed the pierwszy interaction’s input opóźnienie.
• It’s a pole metric, i “Lighthouse can’t measure it” ma three cases: a standard noninteractive Lighthouse run raporty no INP i falls back to Total Blocking Time as a load-time proxy; a manually exercised lab interaction robi produce a rzeczywisty single-interaction opóźnienie ale może’t stand in dla the pole population; tylko CrUX / PageSpeed Insights / Search Console pole data jest authoritative.
• Causes: long tasks (>50 ms), heavy event handlers, duży DOM, i especially third-party scripts (zgoda, znacznik managers, analytics, chat).
• Fixes: break up long tasks, yield z scheduler.yield() (setTimeout fallback; isInputPending() jest no longer recommended), robić mniej in handlers, avoid layout thrashing, shrink the DOM, defer third-party scripts.
• Edge cases: no qualifying interaction means no INP wartość; iframe interactions count toward the metric ale a same-origin RUM script może’t see inside them; bfcache restores reset INP; long-lived/backgrounded tabs powinien raport on hidden, nie just on unload.
• SEO: a lightweight ranking signal. mobilny (~74% pass vs ~97% komputer stacjonarny) jest the liczba że matters poniżej mobilny-pierwszy indeksowanie; wysoki-interaction strony są najbardziej exposed.

Official documentation

Primary-źródło documentation z Google / the Chrome zespół.

web.dev — the INP references

• Interaction to następny Paint (INP) — the definitive definition: co it measures, the three-part opóźnienie breakdown, interaction types, i thresholds.
• Optimize Interaction to następny Paint — the optymalizacja playbook: doing mniej in handlers, deferring non-critical działać, layout thrashing, DOM size, content-visibility.
• Interaction to następny Paint officially becomes a Core Web Vital — the March 12, 2024 launch post (Jeremy Wagner & Rick Viscomi); the FID deprecation timeline.
• opóźnienie pierwszego wejścia (FID) — the deprecated metric; co it measured i why it był replaced.
• A new responsive metric: seeking twój feedback — FID’s design limitations i INP’s improvements.
• Optimize long tasks — the 50 ms long-task definition, scheduler.yield(), the setTimeout fallback, i why isInputPending() jest no longer recommended.
• Script evaluation i long tasks — TBT as an INP proxy i script-size guidance.
• Find slow interactions in the pole — the web-vitals attribution build i the Long Animation Frames (LoAF) API.

Chrome / Google Search

• wydajność funkcje reference (Chrome DevTools) — the Interactions track, Live Metrics, i the 200 ms ostrzeżenie.
• CrUX release notes — confirms FID’s removal z BigQuery/API in September 2024.
• Core Web Vitals & Google wyniki wyszukiwania — INP as part of the strona-experience signal; the ≤ 200 ms target.

cytaty z the źródło

On-the-record statements z Google / the Chrome zespół. każdy link jest a deep link że jumps to the quoted passage on the źródło strona.

co INP measures, i how it differs z 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 to następny Paint (INP). Jump to cytat
• “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 cytat
• “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, opóźnienie pierwszego wejścia (FID). Jump to cytat

The FID → INP switch

• “FID will be deprecated.” — Jeremy Wagner & Rick Viscomi, web.dev blog, Interaction to następny Paint officially becomes a Core Web Vital. Jump to cytat
• “FID will be removed from Google Search Console as soon as INP becomes a Core Web Vital on March 12.” Jump to cytat

Long tasks — the primary cause

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

pole data jest primary

• “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 pole. Jump to cytat

Google Search

• “We highly recommend site owners achieve good Core Web Vitals for success with Search.” — Google Search Central, Core Web Vitals & Google wyniki wyszukiwania. źródło

INP fix checklist

działać top to bottom — the elementy near the top tend to move the liczba najbardziej:

• Pull pole INP (PageSpeed Insights / Search Console CWV raport), nie just a lab score — i sprawdzenie mobilny osobno.
• zidentyfikuj slow interaction(s) z the web-vitals attribution build lub Chrome DevTools’ Interactions track (it flags anything ponad 200 ms).
• Find i break up long tasks (anything ponad 50 ms on the main thread).
• Yield to the main thread inside long-running loops — scheduler.yield(), z a setTimeout(..., 0) fallback. (Stop używając isInputPending().)
• Inside każdy handler, run tylko the render-critical update synchronously; defer saving, walidacja, spell-sprawdzenie, analytics behind rAF + setTimeout.
• sprawdzenie dla layout thrashing — reading layout right po writing styles in the same task. Batch reads, then writes.
• Audit third-party scripts (zgoda, znacznik manager, analytics, chat). Defer, lazy-load, lub gate them on interaction — zwykle the biggest single win.
• Reduce DOM size; apply content-visibility to off-screen sekcje.
• Defer / code-split non-critical JS so post-load scripts don’t blok early interactions.
• Re-mierzyć in the pole po deploy — CrUX jest a rolling 28-day window, so the score moves slowly.

INP vs FID — cheat sheet

Fast fakty

• Thresholds (pole, p75): Good ≤ 200 ms · Needs improvement ≤ 500 ms · Poor > 500 ms.
• Counts: clicks, taps, keyboard. Excludes: scroll, hover, zoom.
• opóźnienie = input opóźnienie + processing duration + presentation opóźnienie.
• Long task = dowolny main-thread task > 50 ms.
• Lab proxy: Total Blocking Time — correlates, ale tylko reflects load-time blocking. Authoritative źródło jest pole data (CrUX).
• mobilny pass rate (~74%) jest far below komputer stacjonarny (~97%) — i mobilny jest co counts.

Yield to the main thread

gdy you mieć a long-running loop (renderowanie a big lista, processing data on click), periodically hand control back to the przeglądarka so it może service a pending użytkownik interaction. The modern API jest scheduler.yield(); fall back to setTimeout gdzie it isn’t supported.

// 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 kilka notes:

• scheduler.yield() zwroty a promise że resolves in a future task, i jego continuation jest prioritized — other queued tasks won’t jump ahead of twój resumed code.
• setTimeout(..., 0) działa everywhere ale pushes twój continuation to the back of the queue (i przeglądarki enforce a ~5 ms floor po several nested calls).
• Don’t reach dla isInputPending() — Google “no longer recommend[s] using this API.”

Defer non-critical działać in a handler

Run tylko co the następny frame needs; 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);
  });
});

narzędzia dla measuring i fixing INP

pole (authoritative — ten jest co Google scores)

• PageSpeed Insights — CrUX pole INP dla the URL/origin, split by mobilny i komputer stacjonarny, plus a lab diagnostic pass.
• Search Console — Core Web Vitals raport — INP status w całym twój URLs, grouped by problem, on pole data.
• CrUX — the underlying Chrome doświadczenie użytkownika raport dataset (również queryable via the CrUX API / BigQuery).

Lab / debugging

• Chrome DevTools — wydajność panel — the Interactions track times każdy interaction’s input opóźnienie, processing, i presentation, i flags anything ponad 200 ms; Live Metrics updates as you click around.
• Lighthouse — może’t mierzyć INP directly; raporty Total Blocking Time as the lab proxy.

rzeczywisty-użytkownik monitorowanie (RUM)

• web-vitals JS library — onINP() dla the wartość; the attribution build (web-vitals/attribution) exposes inputDelay / processingDuration / presentationDelay, the interactionTarget selector, i LoAF entries so you może see exactly który script i element caused the slow interaction. Whatever RUM setup you używać, document jego sampling rate i attribution coverage — a RUM figure quoted bez że context isn’t comparable to CrUX’s pole p75, i it może’t see inside cross-origin iframes the way the aggregate metric może (see Edge cases, in the Advanced tab).

How the narzędzia themselves score

A live przykład of the metric ten strona describes — well-znany strona-speed i monitorowanie services ranked on ich own rzeczywisty-użytkownik mobilny INP (Chrome UX raport pole data):

INP fixes że zwykle miss the point

Optimizing tylko the pierwszy interaction

INP evaluates interactions w całym the visit, nie just the pierwszy input. Exercise menus, search, filters, forms, i other repeated controls przed deciding the strona jest responsive.

Treating Total Blocking Time as the wynik

TBT jest a użyteczny lab proxy ponieważ it exposes long main-thread tasks, ale it jest nie pole INP. używać it to find candidates, then verify rzeczywisty interactions z pole data lub an interaction trace.

Moving wszystkie działać do one delayed callback

Deferring a duży blok może simply move the freeze. Break działać do smaller tasks i yield so the przeglądarka może paint między them.

Removing visual feedback to shorten the handler

A control że performs działać bez showing a odpowiedź nadal feels broken. Render the immediate state change pierwszy, then defer non-critical follow-up działać.

Diagnose INP z the three-part opóźnienie model

każdy slow interaction ma three places to look:

1. Input opóźnienie: the event waited ponieważ earlier main-thread działać był nadal running. Audit long tasks i third-party JavaScript przed the handler began.
2. Processing duration: the event handler itself zrobił too much. Reduce synchronous działać, split loops, i postpone anything the następny frame robi nie need.
3. Presentation opóźnienie: style, layout, lub paint took too long po the handler. Reduce DOM complexity i avoid forcing repeated layout calculations.

zacznij od the largest phase in the trace. Re-record the same interaction po każdy change so a faster handler robi nie hide a new presentation bottleneck.

Prove an INP change poprawiony the interaction

Handler-yield test

Test to run: record the target interaction in the wydajność panel przed i po splitting lub yielding long działać. Expected wynik: the interaction’s processing span shrinks lub jest split by a paint. awaria interpretation: the expensive działać jest elsewhere lub nadal runs synchronously. monitorowanie window: immediate in repeated traces. Rollback trigger: the control updates out of order, loses state, lub produces new input błędy.

Presentation test

Test to run: inspect the same trace’s style, layout, i paint działać po the event handler. Expected wynik: the następny paint arrives sooner bez a larger layout task. awaria interpretation: DOM size lub forced layout pozostaje the bottleneck. monitorowanie window: immediate in lab traces. Rollback trigger: the visual odpowiedź becomes incomplete lub unstable.

pole confirmation

Test to run: porównywać post-release onINP() attribution dla the changed interaction i template z jego baseline. Expected wynik: p75 INP poprawia i the targeted element no longer dominates slow events. awaria interpretation: the lab case zrobił nie represent rzeczywisty urządzenia lub journeys. monitorowanie window: RUM as visits arrive; CrUX ponad jego rolling 28-day window. Rollback trigger: responsiveness lub interaction completion worsens consistently po deployment.

INP metrics worth tracking

rzeczywisty-użytkownik INP at p75

Metric: the 75th-percentile INP by template i urządzenie class. co it tells you: whether typical rzeczywisty visits są responsive w całym ich pełny journey. How to pull it: CrUX, PageSpeed Insights, lub web-vitals RUM. Benchmark / realistic range: 200 ms lub mniej jest good; above 500 ms jest poor. Cadence: monitorować po JavaScript releases i sprawdzenie the rolling pole trend monthly.

Slow-interaction rate

Metric: the share of measured interactions above 200 ms, grouped by target. co it tells you: który controls utwórz najbardziej użytkownik-visible opóźnienie even gdy the strona-level p75 passes. How to pull it: the attribution build of web-vitals lub Event Timing data in RUM. Benchmark / realistic range: establish a baseline per journey i reduce the highest-volume offenders. Cadence: weekly dla application-like templates.

opóźnienie phase share

Metric: input opóźnienie, processing duration, i presentation opóźnienie dla slow interactions. co it tells you: whether scheduling, handler code, lub renderowanie jest the main constraint. How to pull it: DevTools traces i INP attribution. Benchmark / realistic range: no universal split jest healthy; porównywać każdy phase wobec jego own baseline i the total 200 ms good threshold. Cadence: podczas każdy focused wydajność investigation.

zasoby worth twój time

Google / Chrome (the canon)

• Interaction to następny Paint (INP) — start here.
• Optimize Interaction to następny Paint — the fixes.
• Optimize long tasks — yielding, scheduler.yield().
• Find slow interactions in the pole — LoAF + attribution debugging.
• INP becomes a Core Web Vital — the March 12, 2024 launch.

Data

• Web Almanac 2024 — wydajność — the rzeczywisty-world INP pass-rate liczby i sub-part medians.

z around the industry

• INP — MDN Web Docs — MDN’s reference entry; good dla cross-checking przeglądarka obsługiwać i the metric definition outside Google’s own docs.
• Scheduler API: scheduler.yield() — MDN — przeglądarka obsługiwać tabela i spec details dla the main yield primitive.
• PerformanceEventTiming — MDN — the underlying przeglądarka API że INP reads; użyteczny gdy digging do raw event timing data.
• Long Animation Frames API — Chrome platforma Status — LoAF przeglądarka-obsługiwać tracking, the API że powers INP attribution in the web-vitals library.
• INP topic — wyszukiwarka Land — industry news coverage of INP updates, test wyniki, i the FID-to-INP transition z practitioners.

Stats worth citing

• ~74% mobilny vs ~97% komputer stacjonarny pass INP (2024). mobilny jest dramatically harder — i ponieważ Google indexes mobilny-pierwszy, it’s the liczba że matters dla SEO. Web Almanac 2024
• tylko ~53% of the top 1 000 witryny pass INP — funkcja-rich witryny ship więcej JavaScript to blok the main thread, so the biggest witryny często robić worse. Web Almanac 2024
• Long task = > 50 ms. Anything past 50 ms on the main thread bloki the przeglądarka z responding to interactions — the bezpośredni mechanism behind poor INP. web.dev — Optimize long tasks
• Sub-part medians (2024): presentation opóźnienie ~36 ms jest często the largest single contributor at the median, z input opóźnienie i processing time close behind at p75 — użyteczny dla knowing który third to attack. Web Almanac 2024

Videos

• Google Chrome programiści (YouTube) — the Core Web Vitals i INP explainers z the Chrome zespół, w tym walkthroughs of diagnosing slow interactions in DevTools. Channel

Test yourself: Interaction to następny Paint

Five quick questions on responsiveness i INP diagnosis. Pick an answer dla każdy, then sprawdzenie.

Dziennik zmian