Fast but not furious: debugging user interaction performance issues

on YouTube ↗30m

" summary

Explains why jank happens when frames miss the 16ms (or 8ms on 60 vs 120 FPS devices) budget and shows concrete tools: Chrome/Firefox performance tab, Layers panel and paint flashing to find costly JS, style recalcs, paints and compositing. Recommends prioritizing will-change + transform to force GPU compositing, avoiding layout-triggering properties, using passive event listeners for scroll/touch, and a padding-bottom aspect-ratio placeholder technique to prevent image content jumps.

AI-written summary · about

" chapters (8)

1. 0:00Understanding performance
2. 3:16Browser rendering mechanics
3. 5:54Layers and the rendering pipeline
4. 9:30Optimizing changes in the UI
5. 11:41Tools for performance testing
6. 15:26Addressing dangerous UI patterns
7. 22:46Image optimization techniques
8. 27:24Closing thoughts and interview

" related talks

• 44mFast but not Furious: Debugging User Interaction Performance IssuesAnna Migas · performance.now() 2018
• 30mFast but not furious: debugging user interaction performance issuesAnna Migas · Nordic.js 2018
• 59mRendering PerformanceAriya Hidayat, Jonathan Klein, ANDRE BEHRENS, Josh Peek, Paul List · Edge Conference 2013 New York
• 49mRendering without lumpy bitsJake Archibald · Mobilism 2013
• 39mPerformance Beyond Page LoadApoorv Saxena · CSSConf.Asia 2015
• 31mJank Busters - Chrome Rendering PerformanceNat Duca, Tom Wiltzius · CSSConf US 2013
• 58mPanel 3: PerformanceShane O'Sullivan, Rowan Beenje, Pavel Feldman, Chris Lord, Matt Delaney · Edge Conference 2013
• 43mNo More Jank: Escaping the Matrix of Frame DropsShree Bhagwat · Fluttercon India 2025