mance rules8 are an excellent starting
point; Google’s PageSpeed provides
similar guidelines. 5
The best practices for optimizing
website performance, as articulated
in YSlow and PageSpeed, were developed largely with the desktop world in
mind. Now that mobile devices need to
be accounted for as well, some of those
practices might not have the intended
benefits—or might even degrade performance on mobile.
Mobile users expect a more applica-
tion-like experience. Smooth load expe-
riences, fast and animated transitions,
and application-centric error messages
are part of what makes using Internet
services on mobile devices bearable and
perhaps even enjoyable in spite of slow
networks, tiny screens, and cold fingers
(at least for those of us in the north).
Mobile users demand that you deliver
more with less, and the old rules of web-
site design and implementation for the
desktop need a lot of adaptation to cre-
ate a slick mobile Web-app experience.
Which Recommendations
should Be followed?
Although the recommendations in
Google’s PageSpeed and Yahoo!’s
YSlow work well for desktop develop-
figure 1. mobile data traffic projection.
12
Exabytes per month
66% caGR 2012–2017
11. 2 eb
7. 4 eb
6
4. 7 eb
2. 8 eb
1. 6 eb
0.9 eb
0
Source: cisco global mobile Data traffic forecast, 2012–2017
2012 2013 2014
2015
2016
2017
figure 2. megabytes per month by year and platform. figure 2. megabytes per month by
year and platform.
3,000
megabytes per month
September 2012
october 2011
1,500
0
android
ios
Palm os
Proprietary
Windows
Blackberry
linux
symbian
Source: cisco global mobile Data traffic forecast, 2012–2017
ment, some of them need to be reconsidered to provide maximum benefit
for mobile development. Network connectivity, while far more ubiquitous
than ever before, is still spotty; a mobile site needs to compensate for this
problem so users generally feel the app
is responsive even when the network is
not. Older phones parse and execute
JavaScript 100 times slower than desktops, and even the latest phones are
still slower than desktop devices by a
factor of 10—and this slowdown magnifies the smallest of sins. Handling
JavaScript and network problems well
will bring your performance within
the expectations for any native mobile
app. Then all that will remain is a host
of fit-and-finish problems that require
a solid understanding of when and
why the browser paints and lays out to
add the final polish.
With these thoughts in mind, let’s
consider how YSlow and PageSpeed
guidelines apply to the world of Android and iPhone Web-app development.
Eliminate HTTP Requests and
Round Trips. A core recommendation
from both Google and Yahoo! is to
minimize HTTP requests. This is a critical concept that needs special expertise and care to be effective on mobile.
The good news is that existing recommendations on using CSS sprites to
represent images embedded as inline
data:URLs are techniques that work
well on mobile.
Image maps should work as well,
but their inflexibility in terms of layout options is a bit of a drawback for
mobile. For example, for a truly slick
mobile experience you will want to
make good use of orientation changes
that affect the horizontal dimension of
your Web page. With image maps you
would either have to use two of them or
dice them up, in which case you might
as well use CSS sprites and do your layout with markup as usual. So while image maps should work as a technique,
on the whole sprites work better.
These existing techniques alone
will not be enough to supercharge
page load on mobile. On iOS, for example, pages are cached in memory
only, and HTML files still appear to
be limited to 25KB uncompressed
(though other resource types can be
much larger now). In addition, some
iOS devices are still limited to a maxi-
