By Addy Osmani CHAPTER 6
- Check the Timeline for any frames that went over budget (i.e. that are
below that ideal 60fps). If you’re close to the budget, then you’re likely
way over budget on mobile. Aim to complete all of your work within
10ms to have some margin. Note that this margin is for slower devic-
es and you should almost certainly run this analysis on mobile using
remote debugging^16 (if building for mobile, which you should be!).
- Once you’ve noticed you have a janky frame, check what the cause of it
was. Was it a huge paint? CSS layout issue? JavaScript?
- Fix the problem. If it was a paint or layout issue:
i. Go to Settings and enable “Continuous page repainting.”
ii. Walk through the DOM tree, hiding non-essential elements using
the hide (H) shortcut. You might discover hiding particular elements
makes a large difference to your paint times and frame rate.
iii. We now know there is something about an element that has
slowed painting down. Uncheck styles that could have an impact
on paint time (e.g. box-shadow) for the element and check your
frame rate again.
iv. Continue until you’ve located the style responsible for the
slowdown.
- Rinse and repeat.
16 http://smashed.by/remote
