What’s stopping your web pages from getting silky smooth scrolling, buttery animation and a user experience that’s snappy and fast? Jank-free rendering performance has been shown to positively affect user engagement and experience in many large sites, but remains an area many are unaware of how to diagnose or optimize.
To highlight how widespread rendering is a performance bottleneck, I’ve been giving a few talks walking through a detailed case study of the Pinterest.com feed. A recording of the most recent one is now up where you might learn about common paint issues in modern sites and equally as importantly — how to diagnose them.
By the end of the recording you’ll be equipped with the knowledge to use a number of performance diagnosis features in Chrome DevTools to find and fix rendering issues in your own sites.
- Performance must be treated as an essential design feature from the get-go
- Today all browsers compete on smooth, fluid rendering
- Remember your perf on desktop != perf on mobile
- What can causes jank? heavy
onScroll()handlers, long image resizes, too much inside your event handlers, heavy animation
- Drop shadows, blurs, linear gradients, fixed background images can slow down rendering
- Bootstrap improved their rendering perf. by moving away from (costly) linear gradients
- Care about a high FPS. Your goal is to match the refresh rate of the screen (generally 60fps)
- If you can’t hit 60fps, target a constant 30fps. Better than variable frame rate
- Gives you 16.7ms to get everything completed in for a frame. This is your budget. Go over and you increase your changes of seeing jank.
- Watch DevTools for the flow of things being drawn to the screen. Timeline frames mode.
- Recalc styles: triggered when styles computed, changed
- Paint: process of actually rendering pixels to the screen
- Layout thrashing: do your reads before writes when looking for info about styles
- To combat slow scrolling watch for unnecessary paints from
overflow:scroll, hover effects, touch listeners.
transform: translateZ(0)promotes elements to dedicated layers. Can improve animations at first. Be careful when using them. 3D transforms also create layers.
- Find your paint bottlenecks by turning on Paint Rectangles
- Promote layers that are particularly expensive to paint (gets you out of paint storms). Use Layer Borders
- Desktops can handle lots of layers. Mobiles can’t.
- At the very least, Continuous Page Repainting will show what elements are costly to paint
- Think in terms of fps. Do reads before writes. Keep paint cost in mind and use DevTools.
- Don’t guess it, test it. Measure for yourself, understand the abstractions, know your browser internals
Note: Performance advice is considered addictive. Please remember that the takeaway from this talk is that you should learn how to use the tools available to measure if you have a problem, and not that specific CSS properties should not be used.
Kevin Lorenz took some wicked notes about the talk that might be of interest. If you would like to dive into the paint performance of Twitter Bootstrap in more depth, checkout 100% faster paint times by Paul Irish.
If video isn’t quite your thing, Paul Lewis and I wrote a detailed case study on this topic over on Smashing Magazine.
Also, jokes aside..I do quite like G+ and we certainly have more than two users ; )
Further reading and watching
I must stress that rendering performance is still an area that I’m new to and a few of my more-experienced team mates have some excellent related talks that you might also like to check out:
- Paul Lewis – A Guide To Rendering Performance
- Paul Irish – Performance Tooling
- Jake Archibald – Rendering Without The Lumpy Bits
- Nat Duca – Chrome Rendering Performance
Also make sure to bookmark http://jankfree.org – Paul Lewis has been doing a fantastic job of keeping it up to date with a curated list of the best rendering performance resources and there’s plenty of juicy content there worth looking at.
For recent articles related to this topic on the blog, check out: