Interaction để Tiếp theo Paint (INP)

Tóm tắt — INP measures Cách quickly của bạn trang responds Khi ai đó clicks, taps, hoặc types. trình duyệt times khoảng trống giữa interaction và tiếp theo visual cập nhật, trên toàn bộ visit, và các báo cáo khoảng worst một. Dưới 200 ms là good; over 500 ms là poor. nó một của three Cốt lõi Web Chỉ số quan trọng, và nó replaced older chỉ số được gọi là đầu tiên Input Delay trong 2024.

Điều gì INP thực ra measures

Khi bạn nhấp button, tap menu, hoặc loại trong box, bạn expect trang để react — menu opens, checkbox ticks, text xuất hiện. Interaction để tiếp theo Paint (INP) measures Cách dài đó takes: time từ của bạn interaction cho đến khi trình duyệt paints tiếp theo frame cho thấy điều gì đó changed.

Ở đây part đó matters. INP không chỉ xem xét một interaction. nó watches mỗi nhấp, tap, và keyboard press during của bạn đểàn bộ visit, sau đó các báo cáo (close để) slowest một. So single janky interaction — tìm kiếm box đó freezes cho half thứ hai mỗi time bạn loại — có thể sink toàn bộ score.

Scrolling, hovering, và zooming không count. chỉ clicks, taps, và keyboard interactions là measured.

thresholds

INP là reported trong milliseconds, và Google buckets nó vào three ratings:

• Good — 200 ms hoặc ít hơn
• Cần improvement — nhiều hơn 200 ms, lên để 500 ms
• Poor — nhiều hơn 500 ms

cho context: 200 ms là fast, nhưng nó không lot của headroom. Mọi thứ của bạn code làm trong phản hồi để nhấp — plus trình duyệt drawing kết quả — có để fit bên trong nó.

Vì sao nó replaced FID

old responsiveness chỉ số là đầu tiên Input Delay (FID). FID chỉ measured delay trước khi đầu tiên interaction trên một trang đã bắt đầu là handled — và nó đã dừng timing moment hoạt động began. nó đã không count Cách dài đó hoạt động thực ra took, hoặc Cách dài screen took để cập nhật.

INP fixed tất cả đó. nó measures đầy đủ time (bắt đầu để visual cập nhật) cho all interactions, không chỉ đầu tiên một. Google đã làm chuyển chính thức on March 12, 2024, và FID là đã biến mất từ tools hoàn toàn by September 2024.

Điều gì làm INP bad — trong đơn giản terms

Gần như luôn, nó JavaScript hogging main chuỗi trao đổi. trình duyệt có thể chỉ làm một điều tại time on đó chuỗi trao đổi, so nếu chunk của script là busy đang chạy, của bạn nhấp có để chờ trong line. phổ biến culprits:

• Nặng hoạt động đang chạy bên trong nhấp/tap handler itself.
• Big “dài tasks” của JavaScript blocking mọi thứ.
• thứ ba-party scripts — phân tích, cookie-consent banners, chat widgets, tag managers. những điều này là some của worst offenders, ngay cả on đơn giản nội dung các trang.

khắc phục, broadly, là để làm ít hơn hoạt động Khi ai đó interacts, và để break big jobs vào nhỏ pieces so trình duyệt có thể squeeze của bạn interaction trong giữa them.

Muốn thực mechanics — three-part latency breakdown, 75th-percentile math, chính xác Cách khắc phục mỗi nguyên nhân, và SEO angle? Chuyển để Nâng cao tab.

Tóm tắt — INP là Cốt lõi Web Vital cho responsiveness. nó observes latency của all nhấp, tap, và keyboard interactions trên visit và các báo cáo giá trị tại 75th percentile (một outlier dropped theo 50 interactions) — không chỉ đầu tiên input như FID đã làm. interaction latency = input delay + processing duration + presentation delay. Good ≤ 200 ms, poor > 500 ms, judged on trường dữ liệu tại p75. nó replaced FID vào ngày 12 tháng 3 năm 2024 (FID fully đã xóa từ tools September 2024). khắc phục nó by breaking lên dài tasks, yielding để main chuỗi trao đổi với scheduler.yield(), đang làm ít hơn trong event handlers, shrinking DOM, và deferring thứ ba-party scripts. nó trường chỉ số — Total Blocking Time là lab proxy, và hai không luôn agree.

Điều gì INP measures — và Cách nó differs từ FID

Google definition là 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.” (bản dịch) «assesses một trang overall responsiveness để người dùng interactions by observing đó latency of all nhấp, tap, và keyboard interactions đó occur throughout đó lifespan of một người dùng visit để một trang.»

Đó “all interactions… throughout the lifespan” (bản dịch) «all interactions… throughout đó lifespan» phrasing là đó toàn bộ story. INP là một visit-cấp độ chỉ số, không một load-time một — và Google reasoning là đó vast majority of một người dùng time on một trang happens sau điều này loads, so responsiveness during dùng matters hơn đó đầu tiên impression alone.

Đó contrast với Đầu tiên Input Delay là đó sạch nhất way để understand điều này: “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.” (bản dịch) «FID chỉ measured đó input delay of đó đầu tiên interaction on một trang. INP improves on FID by observing all interactions on một trang, beginning từ đó input delay, để đó time điều này takes để chạy event handlers.» FID timed một điều về một interaction — đó chờ trước của nó handler đã bắt đầu — và đã bỏ qua cả hai cách dài đó handler ran và cách dài đó screen took để cập nhật. INP measures đó đầy đủ latency of mỗi interaction.

Một nuance worth getting right, vì nó phổ biến myth: INP là không theo nghĩa đen worst interaction. để tránh punishing trang cho single random spike, trình duyệt drops một outlier cho mỗi 50 interactions, sau đó các báo cáo giá trị tại 75th percentile của trang views. On thấp-interaction visit, đó lands on slowest interaction; on nặng một, couple của outliers nhận excluded đầu tiên.

Điều gì được tính as interaction là cũng hẹp hơn mọi người assume. chỉ clicks, taps, và keyboard presses là measured. Scrolling, hovering, và zooming là explicitly excluded. và single gesture có thể fire several events — tap produces pointerdown, pointerup, và click — mà INP groups as một interaction, không three. Trong đó group, INP takes longest riêng lẻ event duration, không sum của tất cả them — so fast pointerdown tiếp theo để chậm click vẫn các báo cáo as một interaction sized by chậm event. nếu trang có không qualifying interactions during visit, INP đơn giản không phải reported cho nó.

three parts của interaction latency

mỗi interaction latency breaks vào three sequential pieces. Đây là model để giữ trong của bạn head, vì mỗi part points tại khác khắc phục:

Interaction latency = Input delay + Processing duration + Presentation delay

1. Input delay — time trước khi của bạn event handlers có thể ngay cả bắt đầu đang chạy, thường vì main chuỗi trao đổi là busy finishing dài task.
2. Processing duration — time nó takes tất cả của bạn event handler callbacks để execute.
3. Presentation delay — time từ Khi của bạn handlers finish cho đến khi trình duyệt paints tiếp theo frame on screen.

web-vitals attribution xây dựng exposes all three (inputDelay, processingDuration, presentationDelay) so Bạn có thể see mà part dominates on thực interaction. Theo Web Almanac 2024 dữ liệu, presentation delay là thường largest single piece tại median — nhưng processing duration là nơi optimization leverage thường lives, vì nó part đó balloons on poorly-được xây dựng các trang.

thresholds — và p75 trường caveat

Google Search Central trạng thái đó đích plainly — “an INP of less than 200 milliseconds” (bản dịch) «an INP of ít hơn 200 milliseconds» — và frames đó toàn bộ program as: “We highly recommend site owners achieve good Core Web Vitals for success with Search.” (bản dịch) «We highly khuyến nghị chủ trang web achieve good Core Web Vitals cho success với Tìm kiếm.» Đó 200 ms budget là genuinely tight khi bạn remember đó trình duyệt wants một frame mỗi ~16,7 ms tại 60 fps; all of của bạn handler hoạt động plus kết xuất có để fit.

Vì sao INP là trường chỉ số (và lab dữ liệu không phải đủ)

Này là đó trap đó catches một lot of SEOs: một green Lighthouse score không có nghĩa là good INP. Nhưng “Lighthouse can’t measure INP” (bản dịch) «Lighthouse không thể đo lường INP» cần three tách biệt cases, không một, hoặc bạn’ll misread của bạn own tooling:

1. MỘT tiêu chuẩn, noninteractive Lighthouse chạy các báo cáo không INP tại all. Điều này chỉ observes đó trang loading — điều này không bao giờ clicks, taps, hoặc types bất cứ điều gì — so có không interaction để time. Lighthouse falls lại on Total Blocking Time (TBT) as một load-time proxy thay vì. Google own cách diễn đạt: “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.” (bản dịch) «Vì TBT correlates well với INP, một trang với một cao TBT là một reasonable indicator đó ở đó có thể là cao INP các giá trị during load.» Đó key words là “during load.” (bản dịch) «during load.» TBT says không có gì về an interaction đó goes bad ten seconds sau đó khi một lazy-loaded widget chạy — đây là một proxy, không bao giờ một substitute hoặc một conversion formula.
2. MỘT manually hoặc synthetically exercised interaction — clicking một real button trong DevTools, hoặc scripting một nhấp trong một lab tool — làm produce một real INP-style latency number cho đó một interaction. đó là hữu ích cho reproducing một cụ thể bug. Nhưng đây là vẫn một scripted path on một device: điều này không thể stand trong cho đó trường mix of real devices, real người dùng, real interaction targets, và một đầy đủ visit worth of trang lifetime. As Google diễn đạt điều này, đó resulting giá trị “will be dependent on what interactions are performed during the measurement period,” (bản dịch) «sẽ là phụ thuộc on điều gì interactions là performed during đó việc đo lường period,» và real người dùng behavior là cũng variable cho một single lab chạy để represent điều này.
3. Đó trường distribution là điều duy nhất INP thực ra là. đó là vì sao đó có thẩm quyền nguồn là trường dữ liệu: đó Chrome Người dùng Experience Báo cáo (CrUX), surfaced qua PageSpeed Insights và đó Search Console Core Web Vitals báo cáo. “Field data is the best source of information you can draw on when it comes to understanding which interactions are problematic for actual users.” (bản dịch) «Trường dữ liệu là đó best nguồn of information bạn có thể draw on khi điều này xuất hiện để understanding mà interactions là problematic cho thực tế người dùng.»

sử dụng lab (cases 1 và 2) để tìm và reproduce chậm interaction; sử dụng trường (case 3) để xác nhận liệu nó thực ra dragging xuống thực khách truy cập’ scores.

Vì sao của bạn INP score là poor

Gần như mỗi INP vấn đề traces lại để main chuỗi trao đổi là blocked Khi người dùng interacts. thông thường suspects:

• Dài tasks. Bất kỳ main-chuỗi trao đổi task over 50 ms là một dài task; đó amount over 50 ms là của nó “blocking period.” (bản dịch) «blocking period.» Trong khi một chạy, của bạn interaction không thể là handled. Này là đó single biggest nguyên nhân.
• Nặng event handlers. Đang làm cũng nhiều synchronously bên trong một nhấp/input handler inflates processing duration trực tiếp.
• Lớn DOM size. Bigger DOMs cost hơn để render, mà inflates cả hai input và presentation delay.
• Bên thứ ba scripts. Theo đó Web Almanac, consent providers, tag managers, analytics, và chat widgets là top offenders — và they hit ngay cả đơn giản nội dung các trang. họ là đó đầu tiên place I look on một trang I đã không xây dựng.
• Post-load JavaScript. Chỉ vì một trang được kết xuất không có nghĩa là điều này finished loading — scripts evaluating sau đầu tiên paint có thể block sớm interactions.

Cách khắc phục nó

strategies, khoảng trong order của impact:

1. Break lên dài tasks. Google cốt lõi advice on handlers là để “do as little work as possible in them.” (bản dịch) «làm as little hoạt động as có thể trong them.» Split một big job vào nhỏ hơn tasks so đó trình duyệt có thể interleave một người dùng interaction. Khi tasks là hỏng lên, “the browser can respond to higher-priority work much sooner — including user interactions.” (bản dịch) «đó trình duyệt có thể respond để cao hơn-priority hoạt động nhiều sooner — including người dùng interactions.»

2. Yield để đó main chuỗi trao đổi. Đó modern, được khuyến nghị way là scheduler.yield() (Chrome 129+, Firefox 142+): await scheduler.yield() pauses của bạn code, lets đó trình duyệt xử lý pending hoạt động, và resumes với priority — so other tasks sẽ không cut đó line ahead of của bạn continuation. Đó classic fallback là setTimeout(..., 0), mà vẫn hoạt động nhưng gửi của bạn code để đó lại of đó task queue (và các trình duyệt enforce một 5 ms floor sau several nested calls). Một điều để dừng đang làm: isInputPending() — Google hiện tại says “we no longer recommend using this API.” (bản dịch) «we không lâu hơn khuyến nghị dùng này API.» See đó Scripts tab cho đó pattern.

3. Làm ít hơn trong event handlers — defer non-cốt yếu hoạt động. Chạy chỉ visual cập nhật tiếp theo frame cần synchronously; push mọi thứ khác (saving, spell-kiểm tra, phân tích, word được tính) behind requestAnimationFrame + setTimeout hoặc yield. người dùng sees phản hồi immediately; bookkeeping happens sau khi.

4. tránh layout thrashing. Reading layout properties right sau khi writing styles trong giống nhau task forces trình duyệt vào synchronous layout nó có thể nếu không có batched. Batch đọc, sau đó ghi.

5. Reduce DOM size. Nhỏ hơn trees render nhanh hơn. content-visibility có thể lazily render off-screen elements so họ không cost bạn during load hoặc interaction.

6. Audit và defer thứ ba-party scripts. Đây là highest-leverage SEO khắc phục on thực các trang. Load consent/tag/phân tích scripts lazily, gate them on interaction, hoặc move them off cốt yếu path. “lightweight” nội dung trang có thể fail INP purely vì của nặng embedded widget.

Làm INP ảnh hưởng thứ hạng?

Có — INP là một của three Core Web Vitals, và Core Web Vitals là part của Google trang-experience các tín hiệu. nhưng nó lightweight tín hiệu: tiebreaker giữa comparably relevant kết quả, không chính xếp hạng factor. không chase perfect INP score tại expense của nội dung và relevance.

Hai practical SEO points. đầu tiên, mobile là hard number. Trong 2024 Web Almanac, ~74% của mobile các trang đã truyền INP versus ~97% on desktop — và vì Google indexes mobile-đầu tiên, mobile hình là một đó được tính. thứ hai, phức tạp các trang làm tệ hơn: chỉ ~53% của top 1 000 các trang đã truyền, vì feature-rich các trang ship nhiều hơn JavaScript để block main chuỗi trao đổi. Nặng feature development là INP risk, và cao-interaction các trang — sản phẩm các trang, checkout, kết quả tìm kiếm, forms — là far nhiều hơn exposed hơn static nội dung.

INP so với FID — đầy đủ picture

FID là đã biến mất — đã xóa từ Search Console on day INP launched và từ CrUX BigQuery/API by September 2024. nếu tool hoặc audit vẫn references FID, nó stale.

Các trường hợp biên đó làm INP dữ liệu disagree

MỘT handful of lifecycle quirks giải thích hầu hết “why doesn’t my RUM match CrUX” (bản dịch) «vì sao không my RUM match CrUX» các câu hỏi:

• Không interactions, không INP. nếu visit không bao giờ nhận nhấp, tap, hoặc mấu chốt press — hoặc chỉ nhận excluded gestures như scrolling và hovering — có không INP giá trị cho đó trang view. Đây là thông thường on đọc-chỉ nội dung các trang và không phải bug trong của bạn monitoring.
• Iframes count toward chỉ số, nhưng của bạn own JavaScript có thể’t see bên trong them. interaction bên trong embedded iframe ( quảng cáo, widget, embedded form) contributes để trang INP. nhưng đầu tiên-party RUM script có thể’t đọc events từ cross-origin iframe way trình duyệt own chỉ số có thể — so CrUX và giống nhau-origin RUM setup có thể legitimately disagree trên các trang với thứ ba-party embeds. Document điều này khoảng trống thay vì treating RUM/trường mismatch as bug.
• Lại/forward bộ nhớ đệm restores reset INP để zero. trang pulled từ bfcache ( lại button, chẳng hạn) bắt đầu fresh INP count — interactions từ trước khi navigation away không carry over.
• Dài-lived và backgrounded tabs vẫn cần để báo cáo. vì tab có thể sit open cho hours không có bao giờ formally unloading — especially on mobile, nơi OS có thể chỉ kill nó — INP nên là captured Khi trang becomes hidden, không chỉ on unload. RUM setups đó chỉ flush on unload sẽ silently lose dữ liệu từ những điều này visits.

nơi điều này sits

INP là một piece của Core Web Vitals picture, alongside Largest Contentful Paint (loading) và Cumulative Layout Shift (visual stability). kiểm tra nó trong PageSpeed Insights và Search Console báo cáo (trường), và debug nó trong Lighthouse / Chrome DevTools (lab, qua TBT proxy). dữ liệu behind tất cả nó xuất hiện từ CrUX.

AI summary

condensed take on Nâng cao version:

• INP = đó Cốt lõi Web Vital cho responsiveness. Điều này observes đó latency of all nhấp, tap, và keyboard interactions trên một toàn bộ visit và các báo cáo đó giá trị tại đó 75th percentile (một outlier dropped theo 50 interactions) — không chỉ đó đầu tiên input đó way FID đã làm.
• Latency = input delay + processing duration + presentation delay. Mỗi part points tại một khác nhau cách sửa; processing duration là thường nơi đó leverage là.
• Thresholds (trường, p75): good ≤ 200 ms, cần improvement ≤ 500 ms, poor

  500 ms.

• Chỉ clicks, taps, và keyboard count — scroll, hover, và zoom là excluded; một single gesture multiple events là grouped as một interaction.
• Điều này replaced FID vào ngày 12 tháng 3 năm 2024 (FID fully đã xóa từ tools September 2024). FID chỉ timed đó đầu tiên interaction input delay.
• đây là một trường chỉ số, và “Lighthouse can’t measure it” (bản dịch) «Lighthouse không thể đo lường điều này» có three cases: một tiêu chuẩn noninteractive Lighthouse chạy các báo cáo không INP và falls lại để Total Blocking Time as một load-time proxy; một manually exercised lab interaction làm produce một real single-interaction latency nhưng không thể stand trong cho đó trường population; chỉ CrUX / PageSpeed Insights / Search Console trường dữ liệu là có thẩm quyền.
• Gây ra: dài tasks (>50 ms), nặng event handlers, lớn DOM, và especially bên thứ ba scripts (consent, tag managers, analytics, chat).
• Các cách sửa: break lên dài tasks, yield với scheduler.yield() (setTimeout fallback; isInputPending() là không lâu hơn được khuyến nghị), làm ít hơn trong handlers, tránh layout thrashing, shrink đó DOM, defer bên thứ ba scripts.
• Các trường hợp biên: không qualifying interaction có nghĩa là không INP giá trị; iframe interactions count toward đó chỉ số nhưng một giống nhau-origin RUM script không thể see bên trong them; bfcache restores reset INP; dài-lived/backgrounded tabs nên báo cáo on hidden, không chỉ on unload.
• SEO: một lightweight tín hiệu xếp hạng. Mobile (~74% truyền so với ~97% desktop) là đó number đó matters dưới mobile-đầu tiên lập chỉ mục; cao-interaction các trang là hầu hết exposed.

Tài liệu chính thức

Chính-nguồn tài liệu từ Google / Chrome team.

web.dev — INP references

• Interaction để tiếp theo Paint (INP) — definitive definition: Điều gì nó measures, three-part latency breakdown, interaction types, và thresholds.
• Optimize Interaction để tiếp theo Paint — optimization playbook: đang làm ít hơn trong handlers, deferring non-cốt yếu hoạt động, layout thrashing, DOM size, content-visibility.
• Interaction để tiếp theo Paint officially becomes Cốt lõi Web Vital — March 12, 2024 launch post (Jeremy Wagner & Rick Viscomi); FID deprecation timeline.
• đầu tiên Input Delay (FID) — deprecated chỉ số; Điều gì nó measured và Vì sao nó là replaced.
• new responsive chỉ số: seeking của bạn feedback — FID design limitations và INP improvements.
• Optimize dài tasks — 50 ms dài-task definition, scheduler.yield(), setTimeout fallback, và Vì sao isInputPending() là không lâu hơn được khuyến nghị.
• Script evaluation và dài tasks — TBT as INP proxy và script-size hướng dẫn.
• tìm chậm interactions trong trường — web-vitals attribution xây dựng và Dài Animation Frames (LoAF) API.

Chrome / Google Search

• Performance features reference (Chrome DevTools) — Interactions track, Trực tiếp Các chỉ số, và 200 ms warning.
• CrUX phát hành notes — xác nhận FID removal từ BigQuery/API trong September 2024.
• Core Web Vitals & Google kết quả tìm kiếm — INP as part của trang-experience tín hiệu; ≤ 200 ms đích.

Quotes từ nguồn

On—record statements từ Google / Chrome team. mỗi link là deep link đó jumps để quoted passage on nguồn trang.

Điều gì INP measures, và Cách nó differs từ 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.” (bản dịch) «INP là một Core Web Vitals chỉ số đó assesses một trang overall responsiveness để người dùng interactions by observing đó latency of all nhấp, tap, và keyboard interactions đó occur throughout đó lifespan of một người dùng visit để một trang.» — web.dev, Interaction để Tiếp theo Paint (INP). Nhảy đến trích dẫn
• “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.” (bản dịch) «FID chỉ measured đó input delay of đó đầu tiên interaction on một trang. INP improves on FID by observing all interactions on một trang, beginning từ đó input delay, để đó time điều này takes để chạy event handlers.» Nhảy đến trích dẫn
• “First Input Delay (FID) is no longer a Core Web Vital, and has been replaced by the Interaction to Next Paint (INP) metric.” (bản dịch) «Đầu tiên Input Delay (FID) là không lâu hơn một Cốt lõi Web Vital, và đã được replaced by đó Interaction để Tiếp theo Paint (INP) chỉ số.» — web.dev, Đầu tiên Input Delay (FID). Nhảy đến trích dẫn

** FID → INP chuyển**

• “FID will be deprecated.” (bản dịch) «FID sẽ là deprecated.» — Jeremy Wagner & Rick Viscomi, web.dev blog, Interaction để Tiếp theo Paint officially becomes một Cốt lõi Web Vital. Nhảy đến trích dẫn
• “FID will be removed from Google Search Console as soon as INP becomes a Core Web Vital on March 12.” (bản dịch) «FID sẽ bị gỡ bỏ từ Google Search Console as soon as INP becomes một Cốt lõi Web Vital on March 12.» Nhảy đến trích dẫn

Dài tasks — chính nguyên nhân

• “Any task that takes longer than 50 milliseconds is a long task.” (bản dịch) «Bất kỳ task đó takes lâu hơn 50 milliseconds là một dài task.» — web.dev, Optimize dài tasks. Nhảy đến trích dẫn

Trường dữ liệu là chính

• “Field data is the best source of information you can draw on when it comes to understanding which interactions are problematic for actual users.” (bản dịch) «Trường dữ liệu là đó best nguồn of information bạn có thể draw on khi điều này xuất hiện để understanding mà interactions là problematic cho thực tế người dùng.» — web.dev, Tìm chậm interactions trong đó trường. Nhảy đến trích dẫn

Google Search

• “We highly recommend site owners achieve good Core Web Vitals for success with Search.” (bản dịch) «We highly khuyến nghị chủ trang web achieve good Core Web Vitals cho success với Tìm kiếm.» — Google Search Central, Core Web Vitals & Google Search kết quả. Nguồn

INP khắc phục checklist

Hoạt động top để bottom — items near top tend để move number phần lớn:

• Pull trường INP (PageSpeed Insights / Search Console CWV báo cáo), không chỉ lab score — và kiểm tra mobile riêng.
• Identify chậm interaction(s) với web-vitals attribution xây dựng hoặc Chrome DevTools’ Interactions track (nó flags bất cứ điều gì over 200 ms).
• tìm và break lên dài tasks (bất cứ điều gì over 50 ms on main chuỗi trao đổi).
• Yield để main chuỗi trao đổi bên trong dài-đang chạy loops — scheduler.yield(), với setTimeout(..., 0) fallback. (Dừng sử dụng isInputPending().)
• Bên trong mỗi handler, chạy chỉ render-cốt yếu cập nhật synchronously; defer saving, validation, spell-kiểm tra, phân tích behind rAF + setTimeout.
• kiểm tra cho layout thrashing — reading layout right sau khi writing styles trong giống nhau task. Batch đọc, sau đó ghi.
• Audit thứ ba-party scripts (consent, tag manager, phân tích, chat). Defer, lazy-load, hoặc gate them on interaction — thường biggest single win.
• Reduce DOM size; apply content-visibility để off-screen sections.
• Defer / code-split non-cốt yếu JS so post-load scripts không block sớm interactions.
• Re-đo lường trong trường sau khi deploy — CrUX là rolling 28-day window, so score moves slowly.

INP so với FID — bảng tra nhanh

Fast facts

• Thresholds (trường, p75): Good ≤ 200 ms · Cần improvement ≤ 500 ms · Poor > 500 ms.
• Được tính: clicks, taps, keyboard. Excludes: scroll, hover, zoom.
• Latency = input delay + processing duration + presentation delay.
• Dài task = bất kỳ main-chuỗi trao đổi task > 50 ms.
• Lab proxy: Total Blocking Time — correlates, nhưng chỉ reflects load-time blocking. Có thẩm quyền nguồn là trường dữ liệu (CrUX).
• Mobile truyền rate (~74%) là far dưới desktop (~97%) — và mobile là Điều gì được tính.

Yield để main chuỗi trao đổi

Khi bạn có dài-đang chạy loop (kết xuất big list, processing dữ liệu on nhấp), periodically hand control lại để trình duyệt so nó có thể service pending người dùng interaction. modern API là scheduler.yield(); fall lại để setTimeout nơi nó không phải 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));
}

một vài notes:

• scheduler.yield() trả về một promise đó resolves trong một tương lai task, và của nó continuation là prioritized — other queued tasks sẽ không jump ahead of của bạn resumed code.
• setTimeout(..., 0) hoạt động mọi nơi nhưng pushes của bạn continuation để đó lại of đó queue (và các trình duyệt enforce một ~5 ms floor sau several nested calls).
• không reach cho isInputPending() — Google “no longer recommend[s] using this API.” (bản dịch) «không lâu hơn khuyến nghị[s] dùng này API.»

Defer non-cốt yếu hoạt động trong handler

Chạy chỉ Điều gì tiếp theo frame cần; push rest behind 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);
  });
});

Tools cho measuring và sửa INP

Trường (có thẩm quyền — Đây là Điều gì Google scores)

• PageSpeed Insights — CrUX trường INP cho URL/origin, split by mobile và desktop, plus lab diagnostic truyền.
• Search Console — Core Web Vitals báo cáo — INP status trên của bạn các URL, grouped by vấn đề, on trường dữ liệu.
• CrUX — underlying Chrome Người dùng Experience Báo cáo dataset (cũng queryable qua CrUX API / BigQuery).

Lab / gỡ lỗi

• Chrome DevTools — Performance panel — Interactions track times mỗi interaction input delay, processing, và presentation, và flags bất cứ điều gì over 200 ms; Trực tiếp Các chỉ số cập nhật as bạn nhấp khoảng.
• Lighthouse — có thể’t đo lường INP trực tiếp; các báo cáo Total Blocking Time as lab proxy.

thực-người dùng monitoring (RUM)

• web-vitals JS library — onINP() cho giá trị; attribution xây dựng (web-vitals/attribution) exposes inputDelay / processingDuration / presentationDelay, interactionTarget selector, và LoAF entries so bạn có thể see chính xác mà script và element gây ra chậm interaction. Whatever RUM setup bạn sử dụng, document của nó sampling rate và attribution coverage — RUM hình quoted không có đó context không phải comparable để CrUX trường p75, và nó có thể’t see bên trong cross-origin iframes way aggregate chỉ số có thể (see Các trường hợp biên, trong Nâng cao tab).

Cách tools themselves score

trực tiếp ví dụ của chỉ số điều này trang mô tả — well-known trang-speed và monitoring services được xếp hạng on của họ own thực-người dùng mobile INP (Chrome UX Báo cáo trường dữ liệu):

INP các cách sửa đó thường miss point

Optimizing chỉ đầu tiên interaction

INP evaluates interactions trên visit, không chỉ đầu tiên input. Exercise menus, tìm kiếm, filters, forms, và khác repeated controls trước khi deciding trang là responsive.

Treating Total Blocking Time as kết quả

TBT là hữu ích lab proxy vì nó exposes dài main-chuỗi trao đổi tasks, nhưng nó không phải trường INP. sử dụng nó để tìm candidates, sau đó verify thực tế interactions với trường dữ liệu hoặc interaction trace.

Moving all hoạt động vào một delayed callback

Deferring lớn block có thể đơn giản move freeze. Break hoạt động vào nhỏ hơn tasks và yield so trình duyệt có thể paint giữa them.

Removing visual feedback để shorten handler

control đó thực hiện hoạt động không có cho thấy phản hồi vẫn feels hỏng. Render immediate state thay đổi đầu tiên, sau đó defer non-cốt yếu follow-lên hoạt động.

Diagnose INP với three-part latency model

mỗi chậm interaction có three places để look:

1. Input delay: event waited vì trước đó main-chuỗi trao đổi hoạt động là vẫn đang chạy. Audit dài tasks và thứ ba-party JavaScript trước khi handler began.
2. Processing duration: event handler itself đã làm cũng nhiều. Reduce synchronous hoạt động, split loops, và postpone bất cứ điều gì tiếp theo frame không cần.
3. Presentation delay: style, layout, hoặc paint took cũng dài sau khi handler. Reduce DOM complexity và tránh forcing repeated layout calculations.

Bắt đầu với largest phase trong trace. Re-record giống nhau interaction sau khi mỗi thay đổi so nhanh hơn handler không hide new presentation bottleneck.

Prove INP thay đổi improved interaction

Handler-yield kiểm thử

Kiểm thử để chạy: record đích interaction trong Performance panel trước khi và sau khi splitting hoặc yielding dài hoạt động. Dự kiến kết quả: interaction processing span shrinks hoặc là split by paint. thất bại interpretation: expensive hoạt động là elsewhere hoặc vẫn chạy synchronously. Monitoring window: immediate trong repeated traces. Rollback trigger: control cập nhật out của order, loses state, hoặc produces new input các lỗi.

Presentation kiểm thử

Kiểm thử để chạy: inspect giống nhau trace style, layout, và paint hoạt động sau khi event handler. Dự kiến kết quả: tiếp theo paint arrives sooner không có lớn hơn layout task. thất bại interpretation: DOM size hoặc forced layout vẫn bottleneck. Monitoring window: immediate trong lab traces. Rollback trigger: visual phản hồi becomes incomplete hoặc không ổn định.

Trường xác nhận

Kiểm thử để chạy: so sánh post-phát hành onINP() attribution cho changed interaction và template với của nó baseline. Dự kiến kết quả: p75 INP improves và targeted element không lâu hơn dominates chậm events. thất bại interpretation: lab case đã làm không represent thực devices hoặc journeys. Monitoring window: RUM as visits arrive; CrUX over của nó rolling 28-day window. Rollback trigger: responsiveness hoặc interaction completion worsens consistently sau khi deployment.

INP các chỉ số worth theo dõi

thực-người dùng INP tại p75

Chỉ số: 75th-percentile INP by template và device class. Điều gì nó tells bạn: liệu typical thực visits là responsive trên của họ đầy đủ journey. Cách pull nó: CrUX, PageSpeed Insights, hoặc web-vitals RUM. Benchmark / realistic range: 200 ms hoặc ít hơn là good; trên 500 ms là poor. Cadence: monitor sau khi JavaScript releases và review rolling trường trend monthly.

Chậm-interaction rate

Chỉ số: share của measured interactions trên 200 ms, grouped by đích. Điều gì nó tells bạn: mà controls tạo phần lớn người dùng-visible delay ngay cả Khi trang-cấp độ p75 truyền. Cách pull nó: attribution xây dựng của web-vitals hoặc Event Timing dữ liệu trong RUM. Benchmark / realistic range: establish baseline theo journey và reduce highest-volume offenders. Cadence: weekly cho application-như templates.

Latency phase share

Chỉ số: input delay, processing duration, và presentation delay cho chậm interactions. Điều gì nó tells bạn: liệu scheduling, handler code, hoặc kết xuất là main constraint. Cách pull nó: DevTools traces và INP attribution. Benchmark / realistic range: không universal split là healthy; so sánh mỗi phase so với của nó own baseline và total 200 ms good ngưỡng. Cadence: during mỗi focused performance investigation.

các tài nguyên worth của bạn time

Google / Chrome ( canon)

• Interaction để tiếp theo Paint (INP) — bắt đầu ở đây.
• Optimize Interaction để tiếp theo Paint — các cách sửa.
• Optimize dài tasks — yielding, scheduler.yield().
• tìm chậm interactions trong trường — LoAF + attribution gỡ lỗi.
• INP becomes Cốt lõi Web Vital — March 12, 2024 launch.

Dữ liệu

• Web Almanac 2024 — Performance — thực-world INP truyền-rate numbers và sub-part medians.

từ khoảng ngành

• INP — MDN Web Tài liệu — MDN’s reference entry; good cho cross-kiểm tra trình duyệt hỗ trợ và chỉ số definition bên ngoài tài liệu củ chính Google.
• Scheduler API: scheduler.yield() — MDN — trình duyệt hỗ trợ bảng và spec details cho main yield primitive.
• PerformanceEventTiming — MDN — underlying trình duyệt API đó INP đọc; hữu ích Khi digging vào thô event timing dữ liệu.
• Dài Animation Frames API — Chrome Nền tảng Status — LoAF trình duyệt-hỗ trợ theo dõi, API đó powers INP attribution trong web-chỉ số quan trọng library.
• INP topic — công cụ tìm kiếm Land — ngành news coverage của INP cập nhật, kiểm thử kết quả, và FID-để-INP transition từ practitioners.

Số liệu worth citing

• ~74% mobile so với ~97% desktop truyền INP (2024). Mobile là dramatically harder — và vì Google indexes mobile-đầu tiên, nó number đó matters Đối với SEO. Web Almanac 2024
• chỉ ~53% của top 1 000 các trang truyền INP — feature-rich các trang ship nhiều hơn JavaScript để block main chuỗi trao đổi, so biggest các trang thường làm tệ hơn. Web Almanac 2024
• Dài task = > 50 ms. Bất cứ điều gì past 50 ms on main chuỗi trao đổi chặn trình duyệt từ responding để interactions — trực tiếp mechanism behind poor INP. web.dev — Optimize dài tasks
• Sub-part medians (2024): presentation delay ~36 ms là thường largest single contributor tại median, với input delay và processing time close behind tại p75 — hữu ích cho knowing mà thứ ba để attack. Web Almanac 2024

Videos

• Google Chrome Nhà phát triển (YouTube) — Core Web Vitals và INP explainers từ Chrome team, including walkthroughs của diagnosing chậm interactions trong DevTools. Channel

Tự kiểm tra: Interaction để tiếp theo Paint

Five nhanh các câu hỏi on responsiveness và INP diagnosis. Pick câu trả lời cho mỗi, sau đó kiểm tra.

Nhật ký thay đổi