Parallax Performance
summary
Diagnoses show paint storms causing 150ms frames and 20–30fps on real sites; replacing background-position/top animations with layer-promoted images and GPU-friendly transform and opacity cuts paint and restores smooth motion up to 60fps. Tools used: Chrome DevTools show paint rectangles and the layers panel to spot repaints. The pure-CSS Kellum Keith technique builds Z layers with 3D transforms to avoid JavaScript scroll handlers; when JS is necessary, use requestAnimationFrame, minimize handlers, and limit layers to ~30–40.
AI-written summary · about
chapters (10)
- 0:00Introduction to parallax
- 1:32Terminology and types
- 4:11Understanding jank
- 6:46The browser rendering pipeline
- 8:39Optimizing CSS for performance
- 12:08Layer management and hacks
- 14:14Optimizing scroll input
- 18:52Pure CSS parallax techniques
- 22:10Performance auditing and fixes
- 29:55Summary and best practices
related talks
59mRendering Performance
58mRendering performance from the ground up
25mRendering Performance from the Ground Up
58mPanel 3: Performance
31mJank Busters - Chrome Rendering Performance
39mPerformance Beyond Page Load
44mFast but not Furious: Debugging User Interaction Performance Issues
30mFast but not furious: debugging user interaction performance issues