Mobile Web performance challenges and strategies
By Ramki Krishnan, Technical Program ManagerConsumers are increasingly
relying on their
mobile devices to access the Web, thrusting mobile web performance into the
limelight. Mobile users expect web pages to
display
on their mobile devices as fast as or faster than on their desktops.
As part of Google’s effort to
Make The Web Faster, we invited Guy
Podjarny, CTO of
Blaze.io, to talk about some
of the major performance concerns in the mobile web and ways to alleviate these issues. Guy’s
talk focused on
Front-End
Optimization and highlighted 3 areas: mobile network, software, and hardware. Each
of these impacts performance in myriad ways. The full video is available
here,
and runs just under an hour. If you don’t have time to watch this enlightening talk, this post
discusses some key takeaways.
Mobile networks have high latency, and
reducing the number of
requests and the
size of
downloads are well-known optimization strategies. Guy also mentions using on-demand
image displays such as loading above-the-fold images by default and other images only as they
scroll into view. To handle network reliability, he recommends non-blocking requests
eliminating single points of failure, with a selective aggregation of files needed for content
display. Periodic pinging of the cell tower by the client can also reduce
latency
associated with dropped connections, but judicious timeouts and battery drain on the
mobile device need to be factored in.
Modern mobile browsers are built
mobile-friendly, and they can be helped further by exploiting
localStorage
to store CSS and JavaScript files.
Pipelining
multiple requests on a connection is an option, but developers need to work around
head-of-line blocking by using techniques such as splitting dynamic and static resource
requests on different domains.
Mobile hardware CPUs are weaker than
their desktop counterparts. Guy points out the need to minimize JavaScript when designing
mobile-friendly web pages and avoid reflows or
defer
JavaScript until after page loads. Clever image rendering techniques such as
automatically resizing images to devices and loading full resolution only on zoom can also
help.
Guy’s presentation makes clear that mobile web optimizations need
to mitigate latencies introduced by mobile networks, software, and hardware. Rapidly changing
OSes and browsers add to the challenges facing publishers. New and evolved tools and
technologies will help ensure an optimal web browsing experience for mobile users.
Ramki Krishnan works at Google on the "Make The Web
Faster" team. When not at work, he dreams of being a tennis pro, a humorist, and a rock
drummer all rolled into one.Posted by Scott Knaster,
Editor
