Excessive HTTP Requests: Saturated Fat for the Mobile Web

Like Butter, Baby!

Butter makes it better. Anyone who has enjoyed
a nice French meal knows what we mean.
Nevertheless, if you have a weak ticker and your
arteries cannot handle it, fat can be a killer.

HTTP requests are the butter of the Web. They enrich the
desktop experience with unperceivable impact; but on the
mobile Web, the added latency can bring your site to its
knees. The impact is devastating when you’re dealing with
inherently slower processor speeds and are dependent on
a wireless mobile network.

Just as it has taken society years to learn the lessons of
a healthy diet, the Web development world needs to take
a similarly critical eye when it comes to maintaining a
healthy mobile website. Each request made adds to the
amount of time needed to download your site, and increases
the chances of user abandonment.

There are avoidable ways that websites routinely make
excessive HTTP requests, which add latency to their mobile
sites. These excessive HTTP requests negatively affect
the user experience and yet we commonly see how URL
redirects, JavaScript requests, CSS requests and too many
object requests in general can quickly result in a website
experience few will tolerate.

URL Redirects

There have been many historical uses of URL redirects as
they relate to Web page navigation in the desktop browser.
The redirection process is handled automatically within
the browser and is transparent to the end user waiting for
the page to load and become visible.

URL redirects are very useful and common when serving
up desktop-based Web content. The redirect process happens very quickly on most desktop Internet connections
and for the most part a real person never
knows or perceives what is happening.

For mobile Internet content, one might guess that
using URL redirect guidelines would be the same as in
the desktop world. Because the mobile Web is the regular
“Web” just viewed over a mobile device, it seems
like using URL redirects to help manage mobile content
is just as valid as it is in the desktop world.

Many owners and creators of desktop Web content
re-use the same content creation and management techniques
that have proven to be reliable over the previous
years of desktop Internet usage.

article continues below

In the image above, the browser makes a URL request
to the content server for the mobile homepage of
a popular retail site. Instead of returning the base page
that would begin to render on the browser LCD screen,
the content server instead returns a URL redirect.

If you look closely at the graph, you see a series of
four redirects sent back from the server to the mobile
browser. Every time the mobile browser receives a
URL redirect, it has to process that locally and then
send the new URL received in the redirect back to the
server. Processing a URL redirect requires that the mobile
device send another request over the carrier’s RF
radio network.

All of the time highlighted in yellow in the graph
is time spent by the mobile browser processing URL
redirects sent by the server. During this 36-second
delay, the URL redirect does not return any displayable
content, so from a real user’s perspective the site is
slow and not loading.

There is probably no way to ever know the exact
reasons why the owners of this content created a
mobile URL redirect chain that goes four levels
deep. When building a mobile site, some of the techniques
and methodologies used to build desktop
Internet sites have to be re-thought when creating
your mobile content. Something done as an afterthought
on the desktop Internet can magnify itself
into an ugly user experience when accessed over a
mobile connection.

It could be that for mobile, you might have to do
things in a different way that requires more work, but
in the end you can create a better user experience. In
this example, if there is a way to cut out even
one or two of the redirects, the overall pageload
time would dramatically improve.

Too Much Fat

Requesting too many objects is another way
to slow mobile Web performance. The New
York Times is a good example of a mobile
site that has pared back content for a good
mobile experience.

How much faster is their mobile site? We
examined data from our public index and
looked at website performance collected in New
York, requested by a Motorola Droid X. For a
24-hour period download times were consistently
under 10 seconds. During the same period
of time we collected data from an iPhone 4
in the same New York location and relatively few
downloads happened under 30 seconds.

What explains the performance gap? The New
York Times server does not redirect iPhone 4 users to
the mobile site. Consequently, the iPhone users are
downloading a tremendous amount of content. Setting
aside the questions of usability of a full site on a
relatively small screen, the impact on performance is
quite noticeable.

Chances are that many users won’t stick around for
the 60-second homepage download. Not only is this a
potential lost sale for an online retailer, users are not
very likely to return.

There are several images downloaded, but that may
be needed to generate an impulse sale. But before that
first image is downloaded there are other areas to
improve this site. The retailer should consider a single
redirect and combining style sheets. Moving JavaScript
to the bottom and combining them is another W3C
best practice not being followed. The JavaScript download
is blocking the site from taking advantage of parallelization
capabilities available on many of today’s
popular smartphone browsers.

Your mobile website is much more than a website
on a smaller screen. It’s used differently, the wireless
networks are inherently slower and processor speed
simply can’t replicate the desktop experience. Yet,
your customers will have similar expectations for
speed and reliability.

Build a site with the expectations of the mobile
user in mind and they’ll be much more likely to
come back.

About the Author: Tim Murphy, Senior Manager for Mobile Monitoring &

Testing at Keynote Systems, is an evangelist for improving
the end user experience on mobile websites, applications
and networks.

via WebSite Magazine