Breaking Down Long Tasks
summary
Metric-level claim: Interaction to Next Paint (INP) replaces FID in March 2024 and measures worst interactions not just the first; field data shows p75 has 36% of sites needing improvement. Practical tools: the web-vitals attribution build (adds ~600 bytes), the Chrome extension or console snippet for logging, and web-vitals → RUM export. Experimental fixes: scheduler.postTask / scheduler.yield and React startTransition; attribution-improving diagnostics come from the Long Animation Frames API (origin-trial) and have already exposed a slow third‑party like Moment.js.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 1:08Long tasks and INP metric
- 5:25Measuring INP field vs lab
- 11:23Attribution build for diagnostics
- 15:16Reproducing slow interactions
- 19:10Analyzing with performance profiler
- 23:21Reducing presentation delay
- 26:12Long animation frames vs tasks
- 29:03Yielding to main thread
- 34:57Summary of optimizations
- 36:02Q&A: Event types & prioritization
- 38:11Q&A: Breaking tasks & perceived perf
- 39:35Q&A: Timing for performance tests
- 40:39Q&A: Dev vs prod monitoring
- 42:04Q&A: Web Vitals in GA
- 42:46Q&A: CSS containment & DOM size
- 43:49Q&A: Simple performance metrics
related talks
24mUnderstanding and Optimizing Interaction to Next Paint (INP)
18mVinicius Dallacqua at performance.sync()
23mBrace Your React, New Core Web Vitals are Coming
16mThe state of responsiveness on the web
50mOur Websites Need a Lifestyle Change, Not a Diet
54mThe Latest in Metrics & Measurement
25mA look under the hood of the new INP metric
53mINP Case Studies