Interaction -e sonraki Paint (INP)

TL;DR — INP measures nasıl quickly sizin sayfa responds ne zaman someone tıklamalar, taps, veya types. browser times gap arasında interaction ve sonraki visual update, genelinde whole visit, ve raporlar kabaca worst bir. altında 200 ms dır good; üzerinde 500 ms dır poor. o’s bir of three temel Web Vitals, ve o replaced bir older metric called ilk Input Delay in 2024.

ne INP aslında measures

-dığınızda click bir button, tap bir menu, veya type in bir box, siz expect sayfa -e react — bir menu opens, bir checkbox ticks, text görünür. Interaction -e sonraki Paint (INP) measures nasıl uzun şu takes: time -den sizin interaction until browser paints sonraki frame gösterme something changed.

burada’s part şu önem taşır. INP yapmaz sadece bak at bir interaction. o watches her click, tap, ve keyboard press during sizin entire visit, o hâlde raporlar (close -e) slowest bir. bu nedenle bir tek janky interaction — bir arama box şu freezes bençin half bir ikinci her time siz type — -ebilir sink whole score.

Scrolling, hovering, ve zooming yapmayın count. yalnızca tıklamalar, taps, ve keyboard interactions dır measured.

thresholds

INP dır reported in milliseconds, ve Google buckets o -e three ratings:

• Good — 200 ms veya daha az
• gerektirir improvement — -den fazla 200 ms, up -e 500 ms
• Poor — -den fazla 500 ms

bençin context: 200 ms dır fast, ama o’s değil bir lot of headroom. Everything sizin code yapar in response -e bir click — plus browser drawing sonuç — sahiptir -e fit bençinde o.

neden o replaced FID

eski responsiveness metric idi ilk Input Delay (FID). FID yalnızca measured delay önce ilk interaction on bir sayfa started olma ele alınır — ve o stopped timing moment çalışır began. o didn’t count nasıl uzun şu çalışır aslında took, veya nasıl uzun screen took -e update.

INP düzeltilmiş tümü of şu. o measures full time (başla -e visual update) bençin tümü interactions, değil sadece ilk bir. Google yapılmış switch resmî on March 12, 2024, ve FID idi gone -den araçlar entirely tarafından September 2024.

ne yapar INP bad — in plain terms

Almost her zaman, o’s JavaScript hogging main thread. browser -ebilir yalnızca yap bir thing at bir time on şu thread, bu nedenle eğer bir chunk of script dır busy çalışbir, sizin click sahiptir -e wait in line. yaygın culprits:

• Heavy çalışır çalışbir bençinde click/tap handler itself.
• Big “long tasks” of JavaScript blocking everything.
• üçüncü-party scripts — analytics, cookie-consent banners, chat widgets, tag managers. bunlar dır bazı of worst offenders, hatta on simple bençerik siteler.

düzelt, broadly, dır -e yap daha az çalışır ne zaman someone interacts, ve -e break big jobs -e küçük pieces bu nedenle browser -ebilir squeeze sizin interaction in arasında them.

iste gerçek mechanics — three-part latency breakdown, 75th-percentile math, tam olarak nasıl düzeltileceğben her neden ol, ve SEO angle? Switch -e Advanced tab.

TL;DR — INP dır temel Web Vital bençin responsiveness. o observes latency of tümü click, tap, ve keyboard interactions genelinde bir visit ve raporlar değer at 75th percentile (bir outlier dropped per 50 interactions) — değil sadece ilk input like FID yaptı. bir interaction’s latency = input delay + processing duration + presentation delay. Good ≤ 200 ms, poor > 500 ms, judged on field data at p75. o replaced FID on March 12, 2024 (FID fully removed -den araçlar September 2024). düzelt o tarafından breaking up uzun tasks, yielding -e main thread ile scheduler.yield(), doing daha az in event handlers, shrinking DOM, ve deferring üçüncü-party scripts. o’s bir field metric — Total Blocking Time dır lab proxy, ve two yapmayın her zaman agree.

ne INP measures — ve nasıl o differs -den FID

Google’s definition dır precise: INP “assesses bir sayfa’s overall responsiveness -e kullanıcı interactions tarafından observing latency of tümü click, tap, ve keyboard interactions şu occur throughout lifespan of bir kullanıcı’s visit -e bir sayfa.”

şu “all interactions… throughout the lifespan” phrasing dır whole story. INP dır bir visit-level metric, değil bir load-time bir — ve Google’s reasoning dır şu vast majority of bir kullanıcı’s time on bir sayfa olur sonra o loads, bu nedenle responsiveness during kullan önem taşır -den fazla ilk impression alone.

contrast ile ilk Input Delay dır cleanest way -e understand o: “FID yalnızca measured input delay of ilk interaction on bir sayfa. INP improves on FID tarafından observing tümü interactions on bir sayfa, beginning -den input delay, -e time o takes -e çalıştır event handlers.” FID timed bir thing hakkında bir interaction — wait önce onun handler started — ve ignored her ikisi nasıl uzun handler ran ve nasıl uzun screen took -e update. INP measures full latency of her interaction.

bir nuance worth getting yapğru, çünkü o’s bir yaygın myth: INP dır değil literally worst interaction. -e kaçın punishing bir sayfa bençin bir tek random spike, browser drops bir outlier bençin her 50 interactions, o hâlde raporlar değer at 75th percentile of sayfa views. On bir low-interaction visit, şu lands on slowest interaction; on bir heavy bir, bir couple of outliers al excluded ilk.

ne counts olarak bir interaction dır ayrıca narrower -den kişiler assume. yalnızca tıklamalar, taps, ve keyboard presses dır measured. Scrolling, hovering, ve zooming dır explicitly excluded. ve bir tek gesture -ebilir fire several events — bir tap produces pointerdown, pointerup, ve click — hangi INP gruplar olarak bir interaction, değil three. bençinde şu grup, INP takes longest individual event duration, değil sum of tümü of them — bu nedenle bir fast pointerdown sonraki -e bir slow click hâlâ raporlar olarak bir interaction sized tarafından slow event. eğer bir sayfa sahiptir no qualifying interactions during bir visit, INP basitçe değildir reported bençin o.

three parts of bir interaction’s latency

her interaction’s latency breaks -e three sequential pieces. bu model -e koru in sizin head, çünkü her part benşaret eder at bir farklı düzelt:

Interaction latency = Input delay + Processing duration + Presentation delay

1. Input delay — time önce sizin event handlers -ebilir hatta başla çalışbir, genellikle çünkü main thread dır busy finishing bir uzun task.
2. Processing duration — time o takes tümü of sizin event handler callbacks -e execute.
3. Presentation delay — time -den ne zaman sizin handlers finish until browser paints sonraki frame on screen.

web-vitals attribution oluştur exposes tümü three (inputDelay, processingDuration, presentationDelay) bu nedenle -ebilirsiniz see hangi part dominates on bir gerçek interaction. Per Web Almanac’s 2024 data, presentation delay dır çoğu zaman largest tek piece at median — ama processing duration dır nerede optimization leverage genellikle lives, çünkü o’s part şu balloons on poorly-oluşturulmuş sayfalar.

thresholds — ve p75 field caveat

Google arama Central states target plainly — “bir INP of -den az 200 milliseconds” — and frames the whole program as: “biz highly recommend site owners achieve good temel Web Vitals bençin success ile arama.” 200 ms budget dır genuinely tight -dığınızda remember browser ister bir frame her ~16,7 ms at 60 fps; tümü of sizin handler çalışır plus rendering sahiptir -e fit.

neden INP dır bir field metric (ve lab data değildir enough)

bu trap şu catches bir lot of SEOs: bir green Lighthouse score yapmaz anlamına gel good INP. ama “Lighthouse can’t measure INP” gerektirir three separate durumlar, değil bir, veya siz’ll misread sizin kendi tooling:

1. bir standard, noninteractive Lighthouse çalıştır raporlar no INP at tümü. o yalnızca observes sayfa loading — o never tıklamalar, taps, veya types anything — bu nedenle orada’s no interaction -e time. Lighthouse falls back on Total Blocking Time (TBT) olarak bir load-time proxy instead. Google’ın kendi framing: “çünkü TBT correlates well ile INP, bir sayfa ile bir high TBT dır bir reasonable indicator şu orada -ebilir olmak high INP values during load.” The key words are “during load.” TBT söyler nothing hakkında bir interaction şu goes bad ten seconds later ne zaman bir lazy-loaded widget runs — o’s bir proxy, never bir substitute veya bir conversion formula.
2. bir manually veya synthetically exercised interaction — clicking bir gerçek button in DevTools, veya scripting bir click in bir lab araç — yapar produce bir gerçek INP-style latency number bençin şu bir interaction. şu’s yararlı bençin reproducing bir specific bug. ama o’s hâlâ bir scripted path on bir device: o -ebilir’t stand in bençin field’s mix of gerçek devices, gerçek kullanıcılar, gerçek interaction targets, ve bir full visit’s worth of sayfa lifetime. olarak Google puts o, resulting değer “-ecek olmak dependent on ne interactions dır performed during ölçüm period,” ve gerçek kullanıcı behavior dır de variable bençin bir tek lab çalıştır -e temsil et o.
3. ** field distribution dır yalnızca thing INP aslında dır.** şu’s neden authoritative kaynak dır field data: Chrome kullanıcı Experience rapor (CrUX), surfaced aracılığıyla PageSpeed Insights ve arama Console temel Web Vitals rapor. “Field data dır en iyi kaynak of information -ebilirsiniz draw on ne zaman o comes -e understanding hangi interactions dır problematic bençin gerçek kullanıcılar.”

kullan lab (durumlar 1 ve 2) -e bul ve reproduce bir slow interaction; kullan field (durum 3) -e yapğrula whether o’s aslında dragging down gerçek visitors’ scores.

neden sizin INP score dır poor

Almost her INP sorun traces back -e main thread olma blocked ne zaman bir kullanıcı interacts. usual suspects:

• uzun tasks. herhangi bir main-thread task üzerinde 50 ms dır bir uzun task; amount üzerinde 50 ms dır onun “blocking period.” -iken bir runs, sizin interaction -ebilir’t olmak ele alınır. bu tek biggest neden ol.
• Heavy event handlers. Doing de much synchronously bençinde bir click/input handler inflates processing duration yapğrudan.
• büyük DOM size. Bigger DOMs maliyet daha -e render, hangi inflates her ikisi input ve presentation delay.
• üçüncü-party scripts. Per Web Almanac, consent providers, tag managers, analytics, ve chat widgets dır top offenders — ve onlar hit hatta simple bençerik siteler. onlar’re ilk place ben bak on bir sayfa ben didn’t oluştur.
• Post-load JavaScript. sadece çünkü bir sayfa rendered yapmaz anlamına gel o finished loading — scripts evaluating sonra ilk paint -ebilir block early interactions.

nasıl düzeltileceğben o

strategies, kabaca sırayla of impact:

1. Break up uzun tasks. Google’s temel advice on handlers dır -e “yap olarak little çalışır olarak olası in them.” Split bir big job -e smaller tasks bu nedenle browser -ebilir interleave bir kullanıcı interaction. ne zaman tasks dır broken up, ” browser -ebilir respond -e higher-priority çalışır much sooner — dahil kullanıcı interactions.”

2. Yield -e main thread. modern, recommended way dır scheduler.yield() (Chrome 129+, Firefox 142+): await scheduler.yield() pauses sizin code, lets browser ele al pending çalışır, ve resumes ile priority — bu nedenle diğer tasks won’t cut line ahead of sizin continuation. classic fallback dır setTimeout(..., 0), hangi hâlâ çalışır ama sends sizin code -e back of task queue (ve browsers enforce bir 5 ms floor sonra several nested çbirğrılar). bir thing -e durdur doing: isInputPending() — Google now söyler “we no longer recommend using this API.” See Scripts tab bençin pattern.

3. yap daha az in event handlers — defer non-critical çalışır. çalıştır yalnızca visual update sonraki frame gerektirir synchronously; push everything else (saving, spell-kontrol et, analytics, word counts) behind requestAnimationFrame + setTimeout veya bir yield. kullanıcı sees response immediately; bookkeeping olur sonra.

4. kaçın layout thrashing. okuma layout properties yapğru sonra yazma styles in aynı task forces browser -e synchronous layout o -ebilirdi otherwise sahip batched. Batch reads, o hâlde writes.

5. Reduce DOM size. Smaller trees render faster. content-visibility -ebilir lazily render off-screen elements bu nedenle onlar yapmayın maliyet siz during load veya interaction.

6. denetim ve defer üçüncü-party scripts. bu highest-leverage SEO düzelt on gerçek siteler. Load consent/tag/analytics scripts lazily, gate them on interaction, veya move them off critical path. bir “lightweight” bençerik sayfa -ebilir başarısız ol INP purely çünkü of bir heavy embedded widget.

yapar INP affect sıralamalar?

Yes — INP dır bir of three temel Web Vitals, ve temel Web Vitals dır part of Google’s sayfa-experience sinyaller. ama o’s bir lightweight sinyal: bir tiebreaker arasında comparably relevant sonuçlar, değil bir birincil sıralama faktörü. yapmayın chase bir perfect INP score at expense of bençerik ve relevance.

Two practical SEO benşaret eder. ilk, mobile dır hard number. In 2024 Web Almanac, ~74% of mobile siteler passed INP versus ~97% on desktop — ve çünkü Google indexes mobile-ilk, mobile figure dır bir şu counts. ikinci, complex siteler yap worse: yalnızca ~53% of top 1 000 siteler passed, çünkü feature-rich sayfalar ship daha JavaScript -e block main thread. Heavy feature development dır bir INP risk, ve high-interaction sayfalar — product sayfalar, checkout, arama sonuçları, forms — dır far daha exposed -den static bençerik.

INP vs FID — full picture

FID dır gone — removed -den arama Console on day INP launched ve -den CrUX’s BigQuery/API tarafından September 2024. eğer bir araç veya denetim hâlâ references FID, o’s stale.

Edge durumlar şu yap INP data disagree

bir handful of lifecycle quirks explain en çok “why doesn’t my RUM match CrUX” questions:

• No interactions, no INP. eğer bir visit never alır bir click, tap, veya key press — veya yalnızca alır excluded gestures like scrolling ve hovering — orada’s no INP değer bençin şu sayfa view. bu olağbir on okuyun-yalnızca bençerik sayfalar ve değildir bir bug in sizin izleme.
• Iframes count toward metric, ama sizin kendi JavaScript -ebilir’t see bençinde them. bir interaction bençinde bir embedded iframe (bir ad, bir widget, bir embedded form) contributes -e sayfa’s INP. ama bir ilk-party RUM script -ebilir’t okuyun events -den bir cross-origin iframe way browser’s kendi metric -ebilir — bu nedenle CrUX ve bir aynı-origin RUM setup -ebilir legitimately disagree on sayfalar ile üçüncü-party embeds. belge bu gap yerine treating bir RUM/field mismatch olarak bir bug.
• Back/forward cache restores reset INP -e zero. bir sayfa pulled -den bfcache ( back button, bençin instance) starts bir fresh INP count — interactions -den önce navigation away yapmayın carry üzerinde.
• uzun-lived ve backgrounded tabs hâlâ ihtiyaç duy -e rapor. çünkü bir tab -ebilir sit open bençin hours olmadan ever formally unloading — especially on mobile, nerede OS -ebilir sadece kill o — INP -meli olmak captured ne zaman sayfa olur hidden, değil yalnızca on unload. RUM setups şu yalnızca flush on unload -ecek silently lose data -den bunlar visits.

nerede bu sits

INP dır bir piece of temel Web Vitals picture, alongside Largest Contentful Paint (loading) ve Cumulative Layout Shift (visual stability). kontrol et o in PageSpeed Insights ve arama Console rapor (field), ve debug o in Lighthouse / Chrome DevTools (lab, via TBT proxy). data behind tümü of o comes -den CrUX.

AI özet

bir condensed take on Advanced sürüm:

• INP = temel Web Vital bençin responsiveness. o observes latency of tümü click, tap, ve keyboard interactions genelinde bir whole visit ve raporlar değer at 75th percentile (bir outlier dropped per 50 interactions) — değil sadece ilk input way FID yaptı.
• Latency = input delay + processing duration + presentation delay. her part benşaret eder at bir farklı düzelt; processing duration dır genellikle nerede leverage dır.
• Thresholds (field, p75): good ≤ 200 ms, gerektirir improvement ≤ 500 ms, poor

  500 ms.

• yalnızca tıklamalar, taps, ve keyboard count — scroll, hover, ve zoom dır excluded; bir tek gesture’s birden çok events dır grouped olarak bir interaction.
• o replaced FID on March 12, 2024 (FID fully removed -den araçlar September 2024). FID yalnızca timed ilk interaction’s input delay.
• o’s bir field metric, ve “Lighthouse can’t measure it” sahiptir three durumlar: bir standard noninteractive Lighthouse çalıştır raporlar no INP ve falls back -e Total Blocking Time olarak bir load-time proxy; bir manually exercised lab interaction yapar produce bir gerçek tek-interaction latency ama -ebilir’t stand in bençin field population; yalnızca CrUX / PageSpeed Insights / arama Console field data dır authoritative.
• nedenler: uzun tasks (>50 ms), heavy event handlers, büyük DOM, ve especially üçüncü-party scripts (consent, tag managers, analytics, chat).
• düzeltmeler: break up uzun tasks, yield ile scheduler.yield() (setTimeout fallback; isInputPending() dır no longer recommended), yap daha az in handlers, kaçın layout thrashing, shrink DOM, defer üçüncü-party scripts.
• Edge durumlar: no qualifying interaction anlamına gelir no INP değer; iframe interactions count toward metric ama bir aynı-origin RUM script -ebilir’t see bençinde them; bfcache restores reset INP; uzun-lived/backgrounded tabs -meli rapor on hidden, değil sadece on unload.
• SEO: bir lightweight sıralama sinyal. Mobile (~74% geç vs ~97% desktop) dır number şu önem taşır altında mobile-ilk dizine ekleme; high-interaction sayfalar dır en çok exposed.

resmî dokümantasyon

birincil-kaynak dokümantasyon -den Google / Chrome ekip.

web.dev — INP references

• Interaction -e sonraki Paint (INP) — definitive definition: ne o measures, three-part latency breakdown, interaction types, ve thresholds.
• Optimize Interaction -e sonraki Paint — optimization playbook: doing daha az in handlers, deferring non-critical çalışır, layout thrashing, DOM size, content-visibility.
• Interaction -e sonraki Paint officially olur bir temel Web Vital — March 12, 2024 launch post (Jeremy Wagner & Rick Viscomi); FID deprecation timeline.
• ilk Input Delay (FID) — deprecated metric; ne o measured ve neden o idi replaced.
• bir yeni responsive metric: seeking sizin feedback — FID’s design limitations ve INP’s improvements.
• Optimize uzun tasks — 50 ms uzun-task definition, scheduler.yield(), setTimeout fallback, ve neden isInputPending() dır no longer recommended.
• Script evaluation ve uzun tasks — TBT olarak bir INP proxy ve script-size rehberlik.
• bul slow interactions in field — web-vitals attribution oluştur ve uzun Animation Frames (LoAF) API.

Chrome / Google arama

• Performance features reference (Chrome DevTools) — Interactions izle, Live metrikler, ve 200 ms warning.
• CrUX release notes — confirms FID’s kaldırma -den BigQuery/API in September 2024.
• temel Web Vitals & Google arama sonuçları — INP olarak part of sayfa-experience sinyal; ≤ 200 ms target.

Quotes -den kaynak

On—record statements -den Google / Chrome ekip. her bağlantı dır bir deep bağlantı şu jumps -e quoted passage on kaynak sayfa.

ne INP measures, ve nasıl o differs -den 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 -e sonraki Paint (INP). Jump -e 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 -e 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, ilk Input Delay (FID). Jump -e quote

** FID → INP switch**

• “FID will be deprecated.” — Jeremy Wagner & Rick Viscomi, web.dev blog, Interaction -e sonraki Paint officially olur bir temel Web Vital. Jump -e quote
• “FID will be removed from Google Search Console as soon as INP becomes a Core Web Vital on March 12.” Jump -e quote

uzun tasks — birincil neden ol

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

Field data dır birincil

• “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, bul slow interactions in field. Jump -e quote

Google arama

• “We highly recommend site owners achieve good Core Web Vitals for success with Search.” — Google arama Central, temel Web Vitals & Google arama sonuçları. kaynak

INP düzelt checklist

çalışır top -e bottom — items near top tend -e move number en çok:

• Pull field INP (PageSpeed Insights / arama Console CWV rapor), değil sadece bir lab score — ve kontrol et mobile separately.
• Identify slow interaction(s) ile web-vitals attribution oluştur veya Chrome DevTools’ Interactions izle (o flags anything üzerinde 200 ms).
• bul ve break up uzun tasks (anything üzerinde 50 ms on main thread).
• Yield -e main thread bençinde uzun-çalışbir loops — scheduler.yield(), ile bir setTimeout(..., 0) fallback. (durdur kullanarak isInputPending().)
• bençinde her handler, çalıştır yalnızca render-critical update synchronously; defer saving, validation, spell-kontrol et, analytics behind rAF + setTimeout.
• kontrol et bençin layout thrashing — okuma layout yapğru sonra yazma styles in aynı task. Batch reads, o hâlde writes.
• denetim üçüncü-party scripts (consent, tag manager, analytics, chat). Defer, lazy-load, veya gate them on interaction — genellikle biggest tek win.
• Reduce DOM size; uygula content-visibility -e off-screen sections.
• Defer / code-split non-critical JS bu nedenle post-load scripts yapmayın block early interactions.
• Re-measure in field sonra deploy — CrUX dır bir rolling 28-day window, bu nedenle score moves slowly.

INP ve FID karşılaştırması — kısa başvuru

Kısa bilgiler

• Thresholds (field, p75): Good ≤ 200 ms · gerektirir improvement ≤ 500 ms · Poor > 500 ms.
• Counts: tıklamalar, taps, keyboard. Excludes: scroll, hover, zoom.
• Latency = input delay + processing duration + presentation delay.
• uzun task = herhangi bir main-thread task > 50 ms.
• Lab proxy: Total Blocking Time — correlates, ama yalnızca reflects load-time blocking. Authoritative kaynak dır field data (CrUX).
• Mobile geç rate (~74%) dır far below desktop (~97%) — ve mobile dır ne counts.

Yield -e main thread

-dığınızda sahip bir uzun-çalışbir loop (rendering bir big liste, processing data on click), periodically hand control back -e browser bu nedenle o -ebilir service bir pending kullanıcı interaction. modern API dır scheduler.yield(); fall back -e setTimeout nerede o değildir 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));
}

bir few notes:

• scheduler.yield() döndürür bir promise şu resolves in bir future task, ve onun continuation dır prioritized — diğer queued tasks won’t jump ahead of sizin resumed code.
• setTimeout(..., 0) çalışır everywhere ama pushes sizin continuation -e back of queue (ve browsers enforce bir ~5 ms floor sonra several nested çbirğrılar).
• yapmayın ulaş bençin isInputPending() — Google “no longer recommend[s] kullanarak bu API.”

Defer non-critical çalışır in bir handler

çalıştır yalnızca ne sonraki frame gerektirir; push rest behind bir 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);
  });
});

araçlar bençin measuring ve düzeltme INP

Field (authoritative — bu ne Google scores)

• PageSpeed Insights — CrUX field INP bençin URL/origin, split tarafından mobile ve desktop, plus bir lab diagnostic geç.
• arama Console — temel Web Vitals rapor — INP status genelinde sizin URLs, grouped tarafından sorun, on field data.
• CrUX — underlying Chrome kullanıcı Experience rapor dataset (ayrıca queryable via CrUX API / BigQuery).

Lab / debugging

• Chrome DevTools — Performance panel — Interactions izle times her interaction’s input delay, processing, ve presentation, ve flags anything üzerinde 200 ms; Live metrikler updates olarak siz click yaklaşık.
• Lighthouse — -ebilir’t measure INP yapğrudan; raporlar Total Blocking Time olarak lab proxy.

gerçek-kullanıcı izleme (RUM)

• web-vitals JS library — onINP() bençin değer; attribution oluştur (web-vitals/attribution) exposes inputDelay / processingDuration / presentationDelay, interactionTarget selector, ve LoAF entries bu nedenle siz -ebilir see tam olarak hangi script ve element neden oldu slow interaction. Whatever RUM setup siz kullan, belge onun sampling rate ve attribution coverage — bir RUM figure quoted olmadan şu context değildir comparable -e CrUX’s field p75, ve o -ebilir’t see bençinde cross-origin iframes way aggregate metric -ebilir (see Edge durumlar, in Advanced tab).

nasıl araçlar themselves score

bir live örnek of metric bu sayfa describes — well-known sayfa-speed ve izleme services ranked on onların kendi gerçek-kullanıcı mobile INP (Chrome UX rapor field data):

INP düzeltmeler şu genellikle miss benşaret et

Optimizing yalnızca ilk interaction

INP evaluates interactions genelinde visit, değil sadece ilk input. Exercise menus, arama, filters, forms, ve diğer repeated controls önce deciding sayfa dır responsive.

Treating Total Blocking Time olarak sonuç

TBT dır bir yararlı lab proxy çünkü o exposes uzun main-thread tasks, ama o değildir field INP. kullan o -e bul candidates, o hâlde verify gerçek interactions ile field data veya bir interaction trace.

Moving tümü çalışır -e bir delayed callback

Deferring bir büyük block -ebilir basitçe move freeze. Break çalışır -e smaller tasks ve yield bu nedenle browser -ebilir paint arasında them.

Removing visual feedback -e shorten handler

bir control şu performs çalışır olmadan gösterme bir response hâlâ feels broken. Render immediate state change ilk, o hâlde defer non-critical izle-up çalışır.

Diagnose INP ile three-part latency model

her slow interaction sahiptir three places -e bak:

1. Input delay: event waited çünkü earlier main-thread çalışır idi hâlâ çalışbir. denetim uzun tasks ve üçüncü-party JavaScript önce handler began.
2. Processing duration: event handler itself yaptı de much. Reduce synchronous çalışır, split loops, ve postpone anything sonraki frame yapmaz ihtiyaç duy.
3. Presentation delay: style, layout, veya paint took de uzun sonra handler. Reduce DOM complexity ve kaçın forcing repeated layout calculations.

başla ile largest phase in trace. Re-record aynı interaction sonra her change bu nedenle bir faster handler yapmaz hide bir yeni presentation bottleneck.

Prove bir INP change improved interaction

Handler-yield test et

test et -e çalıştır: record target interaction in Performance panel önce ve sonra splitting veya yielding uzun çalışır. beklenen sonuç: interaction’s processing span shrinks veya dır split tarafından bir paint. başarısızlık interpretation: expensive çalışır dır elsewhere veya hâlâ runs synchronously. izleme window: immediate in repeated traces. Rollback trigger: control updates out of sıra, loses state, veya produces yeni input errors.

Presentation test et

test et -e çalıştır: inspect aynı trace’s style, layout, ve paint çalışır sonra event handler. beklenen sonuç: sonraki paint arrives sooner olmadan bir larger layout task. başarısızlık interpretation: DOM size veya forced layout kalır bottleneck. izleme window: immediate in lab traces. Rollback trigger: visual response olur incomplete veya unstable.

Alan doğrulaması

test et -e çalıştır: compare post-release onINP() attribution bençin changed interaction ve template ile onun baseline. beklenen sonuç: p75 INP improves ve targeted element no longer dominates slow events. başarısızlık interpretation: lab durum yaptı değil temsil et gerçek devices veya journeys. izleme window: RUM olarak visits arrive; CrUX üzerinde onun rolling 28-day window. Rollback trigger: responsiveness veya interaction completion worsens consistently sonra deployment.

INP metrikler worth izleme

gerçek-kullanıcı INP at p75

Metric: 75th-percentile INP tarafından template ve device class. ne o söyler siz: whether typical gerçek visits dır responsive genelinde onların full journey. nasıl -e pull o: CrUX, PageSpeed Insights, veya web-vitals RUM. Benchmark / realistic range: 200 ms veya daha az dır good; above 500 ms dır poor. Cadence: izle sonra JavaScript releases ve review rolling field trend monthly.

Yavaş etkileşim oranı

Metric: share of measured interactions above 200 ms, grouped tarafından target. ne o söyler siz: hangi controls oluştur en çok kullanıcı-visible delay hatta ne zaman sayfa-level p75 geçer. nasıl -e pull o: attribution oluştur of web-vitals veya Event Timing data in RUM. Benchmark / realistic range: establish bir baseline per journey ve reduce highest-volume offenders. Cadence: weekly bençin application-like templates.

Gecikme aşaması payı

Metric: input delay, processing duration, ve presentation delay bençin slow interactions. ne o söyler siz: whether scheduling, handler code, veya rendering dır main constraint. nasıl -e pull o: DevTools traces ve INP attribution. Benchmark / realistic range: no universal split dır healthy; compare her phase karşı onun kendi baseline ve total 200 ms good threshold. Cadence: during her focused performance investigation.

kaynaklar worth sizin time

Google / Chrome ( canon)

• Interaction -e sonraki Paint (INP) — başla burada.
• Optimize Interaction -e sonraki Paint — düzeltmeler.
• Optimize uzun tasks — yielding, scheduler.yield().
• bul slow interactions in field — LoAF + attribution debugging.
• INP olur bir temel Web Vital — March 12, 2024 launch.

Data

• Web Almanac 2024 — Performance — gerçek-world INP geç-rate numbers ve sub-part medians.

-den yaklaşık industry

• INP — MDN Web Docs — MDN’s reference entry; good bençin cross-checking browser support ve metric definition outside Google’ın kendi docs.
• Scheduler API: scheduler.yield() — MDN — browser support table ve spec details bençin main yield primitive.
• PerformanceEventTiming — MDN — underlying browser API şu INP reads; yararlı ne zaman digging -e raw event timing data.
• uzun Animation Frames API — Chrome Platform Status — LoAF browser-support izleme, API şu powers INP attribution in web-vitals library.
• INP topic — arama motoru Land — industry news coverage of INP updates, test et sonuçlar, ve FID—e-INP transition -den practitioners.

istatistikler worth alıntılanmaya değer

• ~74% mobile vs ~97% desktop geç INP (2024). Mobile dır dramatically harder — ve çünkü Google indexes mobile-ilk, o’s number şu önem taşır bençin SEO. Web Almanac 2024
• yalnızca ~53% of top 1 000 siteler geç INP — feature-rich siteler ship daha JavaScript -e block main thread, bu nedenle biggest siteler çoğu zaman yap worse. Web Almanac 2024
• uzun task = > 50 ms. Anything past 50 ms on main thread blocks browser -den responding -e interactions — direct mechanism behind poor INP. web.dev — Optimize uzun tasks
• Sub-part medians (2024): presentation delay ~36 ms dır çoğu zaman largest tek contributor at median, ile input delay ve processing time close behind at p75 — yararlı bençin knowing hangi üçüncü -e attack. Web Almanac 2024

Videos

• Google Chrome Developers (YouTube) — temel Web Vitals ve INP explainers -den Chrome ekip, dahil walkthroughs of diagnosing slow interactions in DevTools. Channel

test et yourself: Interaction -e sonraki Paint

Five quick questions on responsiveness ve INP diagnosis. seç bir yanıt her biri bençin, o hâlde kontrol et.

Değişiklik günlüğü