Understanding and Optimizing Interaction to Next Paint (INP)
summary
Browsers and metrics treat responsiveness as measurable work: 90% of time on pages happens after load, INP uses the Event Timing API to sample all clicks/taps/keys, chooses the single worst interaction or the 98th percentile for busy apps, and marks <=200 ms as good. Field collection uses web-vitals; lab debugging uses Chrome DevTools performance profiler (Chrome 106+) and Performance Insights. Optimizations shown: yield via setTimeout promise, navigator.scheduling.isInputPending, and scheduler/postTask prioritization; INP is still evolving.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 1:12Responsiveness in web perf
- 2:02Main thread tasks
- 3:38Long tasks impact
- 4:54Event loop mechanism
- 6:47Introducing INP
- 8:18INP measures and excludes
- 10:55INP calculation
- 11:19INP interaction breakdown
- 13:59Measuring INP
- 15:31Analyzing in DevTools
- 16:41Optimizing tasks for INP
- 18:32scheduler.yield
- 19:16isInputPending
- 20:48postTask API
- 22:44INP future
- 23:06Q&A
related talks
16mThe state of responsiveness on the web
25mA look under the hood of the new INP metric
36mInteraction to Next Paint: 2024 Edition
44mBreaking Down Long Tasks
50mOur Websites Need a Lifestyle Change, Not a Diet
23mBrace Your React, New Core Web Vitals are Coming
18mVinicius Dallacqua at performance.sync()
49mThe Unbearable Weight of Massive JavaScript