CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues
Now while network performance is important and JavaScript execution
is usually quick, many find that rendering (painting pixels to the screen) is
their bottleneck. Large sites, including Facebook^2 , Flickr^3 and Pinterest^4 , are
starting to care about this side of performance more. They’ve found it can
affect not only the user experience but also user engagement. Measure-
ment is the most important part of any performance profiling and, where
possible, always check your sites and apps using the tools in other brows-
ers to double-check if your slowdown is browser-specific.The Three Pillars of Performance
So, we’ve said that rendering performance is important, but just where
does it fit into the overall performance conversation? The three key factors
to performance on the Web are: network, compute, and render. Let’s briefly
review them.neTwoRK
Always keep an eye on the number of network requests your site makes.
Most of the time, each file is going to end up being requested separately
and these requests may have a quite large latency on them; that is, it’s
going to take a long time for a server to receive and process a request for
a page. On mobile, they’ll also keep the radio alive on your device, which
is the biggest drain on power after your screen. Keeping those requests
down means we can minimize how long the radio is kept on. Also keep in
mind that bandwidth and latency are different things so even if you’re on
a 3G or 4G connection, your latency might not improve. This is one reason
why best practices like concatenating your scripts, inlining CSS and using
image sprites are so important.2 http://smashed.by/fb-tweet
3 http://smashed.by/flickr-parallax
4 http://smashed.by/pinterest