Fast but not furious: debugging user interaction performance issues
summary
Claim: perceived performance includes smooth interactions after load not just FMP or TTI. Uses Chrome and Firefox DevTools — Performance tab, Layers tab, rendering tools and the performance monitor — to find reflows and repaints. Notes numbers: 60fps → ~16ms per frame, 120fps → ~8ms, and pathological pages hit ~80–90% CPU. Built open‑source animation libraries and a repaint detector that shows the first four stars repainting; that tool reliably exposes costly repaints so CSS will-change, transforms and opacity can be used to fix them.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 0:40What is perceived performance
- 8:28Offloading main thread
- 9:33Browser layers
- 11:07Perspective transforms
- 12:07Will change CSS
- 12:58Compositing
- 13:30Trigger changes
- 19:19Performance Monitor
- 20:02Animations
- 22:48Parallax effect
- 23:54Fixed elements
- 24:37Scroll events
- 25:52Hover effects
- 27:00Appending elements
- 28:57Summary
related talks
44mFast but not Furious: Debugging User Interaction Performance Issues
30mFast but not furious: debugging user interaction performance issues
39mPerformance Beyond Page Load
58mPanel 3: Performance
49mEffortless Performance Debugging
59mRendering Performance
59mProfiling JavaScript Like A Pro
17mVisualising Front-End Performance Bottlenecks