Performance Beyond Page Load
summary
Focuses on rendering not network latency and shows concrete wins: a 60 FPS goal gives a 16 milliseconds frame budget (often nearer 10 ms after housekeeping), layout→paint→composite pipeline, and specific costly CSS changes. Uses Chrome DevTools FPS meter, paint flashing, timeline and layer borders to find repaint hotspots, then applies fixes like will-change: transform or transform: translateZ(0) to promote layers, debounces input handlers, disables hover with pointer-events: none, removes unused selectors and GIFs, and measures real frame drops (often below 30 FPS).
AI-written summary · about
chapters (29)
- 0:00Intro
- 0:19Performance beyond Page load
- 0:58Let's start with a small survey
- 1:36But, you won't like animations if they're
- 2:17Rendering Performance
- 3:22Bad performance of Shopping portal
- 4:05Discussion of the performance impact
- 4:43Apoorv Saxena
- 7:4110ms isn't a lot of time
- 8:28Browser rendering process
- 11:57Composting
- 12:39Performance impact of operations
- 13:32How to analyse the performance of a webpage
- 13:42Chrome Dev Tools: FPS meter
- 14:44Chrome Dev Tools: Enable paint flashing
- 15:49Chrome Dev Tools: Timeline
- 17:58Rule of Thumb
- 18:53Style Calculations
- 21:48Reduce complexity of CSS selectors
- 23:21Remove unused CSS rules
- 24:05Reduce number of elements being styled
- 24:33Measure your style recalculation cost
- 25:55Reduce paint areas
- 26:49CSS Animations
- 27:16Debounce input handlers
- 28:34Promote elements that update frequently
- 30:55GIFs and Performance
- 32:05Live Performance Audit
- 35:59Path to Performance
related talks
59mRendering Performance
30mFast but not furious: debugging user interaction performance issues
44mFast but not Furious: Debugging User Interaction Performance Issues
58mPanel 3: Performance
30mFast but not furious: debugging user interaction performance issues
49mRendering without lumpy bits
32mParallax Performance
32mDone in 0.0166666666 seconds