Visitor Monitoring 3 Fast Ways to Speed Up Your Mobile Site | Keynote
Article

3 Fast Ways to Speed Up Your Mobile Site

Leave your desktop thinking behind. Building a snappy mobile site requires a mobile mindset.

Waiting in line: It's the one thing everybody hates about shopping. And yet even today, most retailers – including many of the biggest players – think nothing of letting their shoppers wait and wait as they try to view an entire "main" website or poorly optimized mobile website on their smartphones.

While the majority of smartphone users want to shop with their phones, only a small minority of retailers offer either mobile apps or websites. One study puts the number of mobile-friendly retailers (app or site) at 32 percent; 1ReadWriteWeb, “Retailers Failing to Deliver on Consumers ‘ Mobile Desires,” by Sarah Perez, quoting a report from Demandware, 6/17/11 another counts less than 5 percent of retailers with a mobile-specific site. 2ReadWriteWeb, “Mobile Shopping Trends, Visualized (Infographic),” by Sarah Perez, from an infographic by Microsoft Tag, 6/3/11

Retailers need to catch up in a hurry. The smartphone tipping point was officially reached in spring of this year, according to Nielsen, with 55 percent of new cellphone purchases now being smartphones. 3Wired.com Gadget Lab, “Smartphones Dominate U.S. Mobile Purchases,” by Mike Isaac, 6/30/11 Smartphone users express a strong preference to use their phones to shop, but a majority of them find the mobile shopping experience unsatisfactory — 54 percent say mobile apps and sites are "ineffective and difficult to use." 4Mashable, “5 Big Trends in Mobile Commerce [Study],” by Lauren Indvik, referencing a study by Group SJR and Liz Claiborne, Inc., 6/21/11

A Harris Interactive study found that, of adults who conducted a mobile transaction in the past year, 4 out of 5 experienced a problem. And yet 85 percent of the same survey group expect the mobile experience to be equal to or better than using a computer. 5Tealeaf Technology, Inc., "A Report on the Mobile Customer Experience; Based on the Harris Interactive 2011 Mobile Transactions Survey," March 2011

It doesn't have to be such an unsatisfying experience for users. It's not rocket science to create a mobile site that loads with acceptable speed and delivers the features consumers want. What it requires is a change in mindset from desktop Web thinking to mobile Web thinking. Techniques that make for a rich, and yet still high-performing, experience on the desktop can render the mobile experience painfully slow or even unusable. Think of it this way: you can fit lots of cars and trucks and even the occasional "oversize load" on a six-lane interstate. But route those same vehicles onto a two-lane blacktop, and suddenly traffic slows to a crawl. This is the difference between desktop and mobile.

What follows is a summary of the fundamental challenges of mobile, and three common mobile website mistakes and how to avoid them.

Performance: The Sum of All Latency

It's a simple thing, right? The carrier — Verizon, AT&T, Sprint, etc. — sends a signal to the tower nearest you, and then beams it down to your mobile phone. You navigate to a website, the signal shoots through the air and bingo, there it is. How hard could that be?

In reality, very hard. Between that amorphous "Internet" where the site you seek lives and the shiny screen in your hand is a tangled web of equipment and circuitry, switching devices, base station controllers, load balancers, etc., etc. — degrees more complex and circuitous than a wireline signal — with the added complications of buildings, trees, hills and valleys, the motion of your speeding vehicle, and legions of other users competing for the same limited bandwidth. It's a veritable conspiracy to keep speeds low and frustration high.

The big culprit undermining a fluid mobile experience is the "L" word: Latency. It's the lag in time — dead space to the user — it takes for a signal to travel the network. Every element along the way — each of those switches, hubs, routers, etc. — takes its "L" toll. And every request a site initiates through the mobile browser for a URL, an image, a script, or an object means traversing the network and all its latencies all over again.

And, unnervingly, wireless network performance is anything but consistent. The flood of new smartphone users and exploding demand for data services strains the wireless networks, even as carriers race to add capacity. Network speeds can vary dramatically depending on location, time of day, and even current events. A user in San Francisco late on a weekday afternoon may find Web browsing unbearably slow, whereas a user in Baltimore at the same time may be impressed with how fast sites load.

Add it all up — cumulative latency and inconsistent network performance — and that is what the end user experience is. This is why it is so critical to have a mobile approach that acknowledges the inherent challenges of cellular transmission, and makes every effort to minimize them. Here are three areas where you can make sure your site is performing at its best, even if the mobile network isn't.

1. Get Rid of the Redirects

As fundamental as it may seem, many site owners don't alter their approach at all when tackling a mobile site project. Call it "desktop thinking," or terrestrial, landline, wireline thinking — by any name, it ignores the fundamental reality of the cellular network, which as described above, is inherently slower and riddled with opportunities for performance degradation.

One common desktop tactic that causes issues in mobile is the URL redirect, which instructs the browser to follow a different URL than the one originally requested. There are a number of legitimate reasons to employ this technique — to direct users to your third-party site host; to offer nicknames that provide multiple paths to the main site; or to send users to a site designed specifically for the detected browser.

This is generally a fine practice in the desktop browser world, where redirects usually happen in the blink of an eye and are virtually undetectable to the user. Use the same technique on a mobile site, though, where the big "L" — latency — colors the entire experience, and you end up with users staring and staring at a screen where nothing's happening.

Surprisingly, even some of the biggest retailers have mobile sites bogged down with URL redirects. The problems become apparent when measuring site performance over an actual cellular network (as opposed to a WiFi connection).

Here's a real-life example with measurements taken from the field of a recognizable brand site we'll call "retailer X." Our test user punches in the URL for the site to do some shopping or check a price. As shown in the accompanying waterfall graph, though, the browser is directed to other URLs not once, twice, or three times, but four times before the base page begins to load. Every time the browser receives a redirect, it has to process it locally, then send the new URL back to the server — again, over the sometimes-fast, sometimes-slow cellular network. And it does it again, and again, and again.

Almost nine potentially excruciating seconds tick by before the user sees anything of the site he or she wants to see. Nine seconds go by before they can even begin the task they came to perform, whether it's looking for a product, checking a price, or trying to find the store nearest them.

At what point does the user come to the conclusion that the site's not working, or that it's not worth the wait? If they've just navigated from a well-built mobile site that loaded quickly, there's a good chance they're not going to wait eight seconds. How likely is it that they'll come back again? How likely they'll tell their friends about the experience? Forget what that means in terms of a lost sale. What does it mean for retailer X's brand image?

In retailer X's case, eliminating two redirects would cut the time waiting for the page to load from nine seconds to around six — not desktop fast, but much more in line with what a mobile user would consider acceptable.

2. Build Your Site to Travel Light

Keeping in mind those trips between browser and website, think of it like this: packing for your main website is like packing a steamer trunk for a cruise. There's lots of room for everything, including some luxuries and extras, and you don't have to worry how heavy it may be. Packing for mobile is like backpacking. You need all the essential equipment, but everything has to be smaller, some items do double duty, nothing extra is allowed, and everything has to fit nicely together.

The good news is that on the mobile Web, user expectations of content are likely more modest. They are typically more focused on a task — finding an address, getting a price, seeing a product, buying a single item — rather than the more leisurely browsing or immersive experience they might be looking for on a desktop or laptop. So from the start, mobile content can be pared down without compromising likely use cases, so you can already be ahead of the game simply by selectively choosing content for mobile.

Even with carefully selected content, how that content and the page itself are structured makes all the difference in response time and hence, user satisfaction. Every page has to be lean and fit. Here are a number of fundamental guidelines to make sure every page on your mobile site is performing its best:

Make sure everything on the page is essential. Minimize the overall number of page objects — scrutinize every image, every piece of JavaScript, CSS, tracking tokens, etc. Eliminate, combine, or compress wherever possible.

Mind your images. Remember, users are looking at your site on a screen that's the size of a playing card. Smaller, lower-resolution images are perfectly acceptable. It may be more work to re-do images for mobile, but every byte, every millisecond counts.

Replace image buttons with HTML. Why make a roundtrip to download an image button, when an HTML-embedded text link will do in most cases? For those buttons that absolutely must be "on brand," see the next step.

Spritz up your speed with sprites. If you have multiple images on a page, seriously consider using CSS sprites to combine them. A sprite groups multiple images into one master image file, which is downloaded with just one request; the browser than divvys the images up and places them where they belong on the page. So instead of four, five or more roundtrips to retrieve individual images — with painful latency in each trip — one trip gets the job done. Again, it's a bit more work, but the savings in loading time can be huge.

Be a true believer in mass transit. Don't stop at just combining images. Group or combine multiple JavaScript or CSS objects into one as well.

Make your HTML work harder. Images, CSS, JavaScript — a number of page components can be embedded right into the HTML, essentially riding piggyback and further reducing the number of roundtrips through the network.

Count on your cache. Some objects are going to be used every time the page or site loads — a logo, for example. If you can make them cacheable, you'll save the download time. Some redirects, such as the basic redirect to the "m" version of the site, can be cached as well.

3. Be careful when inviting third parties

Gone are the days when a website was a single entity living in a single home on a server in a company's data center or on a hosting service. For years now, third-party content has made for richer website experiences (and in some cases made site owners richer) whether in terms of content feeds, video, tracking, ads and more.

As you might expect to hear since you've read this far: That's all well and good for the desktop Web, but on mobile, not so much. Third-party content may not be optimized for mobile, and it's always changing. It also automatically increases the number of domains that must be looked up, which is likely to slow things down.

Introduction of third-parties means loss of control, so the objective is to get as much of that control back as possible. If the objects are static — images or static scripts, for example — bring them in-house and host them with your site. If the content and the data center that's hosting it are truly out of your control, then constant vigilance is required. Monitor all of it to make sure it's not dragging down the performance of your site and if it is, deal with it at the source or get rid of it.

Think Fast, Think "Mobile" From The Start

It's challenging but not impossible to create a mobile commerce site that's quick and delivers the content and functionality users want. What it requires from the start is a change in mindset, from bandwidth-rich desktop thinking to a lean and mean mobile mindset. Following the fundamental best practices outlined here, and monitoring performance consistently to make sure the experience is consistently fast, will help make sure your shoppers are happy and your mobile site is returning the investment you're making in it.

Back to Top