Interaction to Next Paint: 2024 Edition
summary
Defines Interaction to Next Paint as the time from a tap/click/key press to the next frame paint, measures the longest qualifying logical interaction or the 99th percentile when many interactions occur, and treats tasks over 50ms as blocking. Shows async like fetch yields control so INP usually measures the event handler plus presentation delay, not network wait. Recommends immediate useful feedback (disable button or spinner), avoid beforeunload prompts, audit tag managers, break long work with yields like yieldToMain/setTimeout, scheduler.doYield or requestAnimationFrame-after-next-paint.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 1:08What is INP
- 3:35How tasks affect responsiveness
- 9:15Community questions on INP
- 12:46Real-world INP behavior
- 15:32Cheating INP pitfalls
- 16:35Problematic page links
- 19:01Yielding to improve INP
- 25:24Scheduler.yield demo
- 27:09Next steps for INP optimization
- 29:55Q&A
related talks
24mUnderstanding and Optimizing Interaction to Next Paint (INP)
16mThe state of responsiveness on the web
25mA look under the hood of the new INP metric
44mBreaking Down Long Tasks
23mBrace Your React, New Core Web Vitals are Coming
43mMeasuring Interactions and Navigations
49mThe Unbearable Weight of Massive JavaScript
48mFrom Here to There