INP Case Studies
summary
Case studies show concrete wins: real user monitoring built on the web-vitals library and LOF-style traces identify scripts blocking the main thread, leading to measured INP improvements from 69.38% → 78.29%. Replacing heavy libs, offloading animations to the GPU (left → transform), yielding event handlers, and removing a mystery script produce wins like 53% and a 77% drop in worst INP cases; an origin-trial Long animation frames approach surfaces actionable long tasks that developers then fix.
AI-written summary · about
chapters (17)
- 0:00Introduction and context
- 2:30Understanding user frustration
- 3:52Speakers and company overview
- 5:10The evolution of INP
- 7:32INP data and metrics
- 10:44Audience participation quiz
- 12:30Technical factors affecting INP
- 17:03Deep dive into INP sub-parts
- 21:17Debugging tools: LOAF
- 23:46Analyzing third-party scripts
- 26:38Case study: Taboola
- 30:36Case study: Removing dependencies
- 33:25Case study: DeOnlineDrogist
- 37:25Case study: Shopify optimizations
- 39:16Impact of Hotjar and user behavior
- 43:23Advanced performance techniques
- 45:27Conclusion and Q&A
related talks
24mUnderstanding and Optimizing Interaction to Next Paint (INP)
50mOur Websites Need a Lifestyle Change, Not a Diet
44mBreaking Down Long Tasks
25mA look under the hood of the new INP metric
16mThe state of responsiveness on the web
01h 01mUnveiling the Power of Web Performance Metrics for Testers
18mVinicius Dallacqua at performance.sync()
49mThe Unbearable Weight of Massive JavaScript