CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues
Conclusions
Jank-free experiences are critical for the mobile Web to come anywhere
close to what users are accustomed to with a native app. That’s how high
the bar is and you can rise to the challenge of clearing it.
But building amazing experiences on the mobile Web takes more than
just a good designer and fancy CSS — you absolutely must care about
performance. Users expect a native feel, and smooth animation that never
drops a frame can give it to them. When your pages scroll slowly, anima-
tions stutter and effects lag heavily... that’s jank and it can impact your
user experience and engagement.
Keep in mind that performance can vary massively between browsers
and a performance smell in one might not be present in another. Use their
developer tools to see what’s really happening under the hood.
Check that your style recalculations aren’t changing more styles than
you expect. Keep your paint areas small. If you notice lots of large or full-
screen paints, there may be a problem. Reduce unnecessary image resizing
because even one large resize can make you miss 60fps.
If all goes well, you’ll make your users happy with more fluid, silky
smooth experiences, regardless of the device they’re using. You’ll have
cleared that jank-free bar and can give yourself a well-deserved pat on the
back.
To learn more about optimizing the paint performance of your pages,
check out Jankfree.org and remember, if you think you have a performance
problem on mobile, don’t guess it — test it!