I just spotted this rather awesome post from @aerotwist https://aerotwist.com/blog/my-performance-audit-workflow/.
I'd previously sent Paul an email, so thanks Paul if you saw it and the post was partly in reply to my email.
It's nice to see I follow a fairly similar approach.
Further into the post Paul mentions 'Runtime Performance' and highlights 'in a nutshell what he's on the hunt for':
- Large invalidations of element styles (recalculate styles) and geometry (layout).
- Repeated layout and style changes inside a single frame aka Layout Thrashing.
- Animation of layout properties.
- Large paint areas aka Paint Storms.
- Expensive painting.
- Badly written touch and scroll handlers.
- Memory churn.
As well as a link that had previously passed me by:
I'm particularly impressed with Chome's timeline https://developers.google.com/chrome-developer-tools/docs/timeline and find it highly rewarding, especially on mobile / tablet devices pushing for that gloriously smooth 60fps.
What I'm finding frustrating at the minute is I can see spikes and where there's room for improvement but I struggle to narrow down and find out what's causing the issue and how to rectify it.
There's some great resources on the web, here's a few:
What I'd love to see are more posts / screencasts showing specific examples and how to improve them. I particularly like screencasts as I often learn handy shortcuts / workflow tricks along the way as an added bonus.
If you haven't seen it already, here's a video of Paul Irish and Paul Lewis doing exactly this. It's awesome. Enjoy.
Like this post? Hire Me!