Web Performance
Web Performance
by Nicholas Boll
Who Am I?
- @NicholasBoll
- nicholas.boll@gmail.com
- I'm a Software Engineer at LogRhythm
- I've been doing web development for a long time
What is this talk about?
- Understanding performance
- Identifying problems
What is this talk not about?
- Micro-optimization
- Frameworks
Why not frameworks?
- Frameworks just make it easier to develop applications
- Your application determines performance
Understanding performance
More than "60 FPS"
It's about the user
RAIL performance model
- Response - 100ms
- Animation - 16ms
- Idle - 50ms
- Load - 1s
Response
- Respond to the user's action in under 100ms
- A user will perceive <100ms delay as instant
- Provide feedback if an action will take over 500ms (loading animation)
Animate
- 60 FPS = 16.66ms frame
- Your work should be under 10ms to sustain 60FPS
- Animation, scrolling and interaction (touchmove/mousemove)
- 1 UI thread for JS, DOM/CSSOM, Layout and Paint
Idle
- Break up work into 50ms chunks
- UI thread is blocked while JS is busy
- This is hard and very app dependent
Load
- <1s keeps the user's focus
- This one is hard in web applications
- Tools like Webpack chunks can help break up page loading
- Concepts like server-side rendering can help
Render pipeline
- JavaScript is only a portion of the pipeline
- JavaScript may or may not trigger the rest of the pipeline
- Some items may be skipped
- CSS Triggers - properties and what they trigger
Identifying problems
Tooling
Script bottlenecks
Demo - Profiles
Rendering Issues
Demo - Timeline
Animation Jank
Loading Issues
Demo - Network
Techniques to mitigate
- Layout boundaries - Layout is isolated
- Animate composition properties - skip Layout & Painting
- Reduce "Layout Thrashing" - frameworks can help
- Expensive tasks before and after animation - awesome video
Further reading
Questions?
Web Performance
by Nicholas Boll