, January 30 2013

Does Mobile Web Performance Optimization Still Matter?

Mobile networks are much faster than they used to be. You've probably heard of 4G, a suite of mobile telecommunications standards including Wi-Max & LTE that are delivering download speeds between 2 - 40Mbps on current generation high-end smartphones. A few popular handsets that currently support these standards include the iPhone 5 and Samsung Galaxy S III. You can expect that over the next year most mid-market smartphones will support these standards, too.

40 Mbps is fast. Really fast. So at speeds that fast, does mobile web performance optimization still matter?  If you're reading this blog post, you already know the answer is yes. But optimizing a website takes a lot of engineering time and testing, so we want to qualify why optimization is still a business necessity and quantify just how much it matters to your bottom-line.

3G & 4G network carrier latency & packet loss

3G & 4G network carrier latency & packet loss

Why does optimization matter?

As Stuart Cheshire (Stanford, Apple) wrote in 1996: It's the Latency, Stupid! The most important thing to understand is that for web performance, once sufficient bandwidth is available (about 5 Mbps is the inflection point) latency becomes far more important than bandwidth. Latency is typically measured in the Round Trip Time (RTT) – the length of time it takes for a request to go from the browser, to the server, and back to the browser again. Have a look at the graphs produced by Google below. In the chart on the left, we see that page speed increases dramatically from 1 to 2 Mbps, but gains after that become increasingly marginal. However, in the chart on the right, focusing on Return Trip Time, we see a nice linear improvement in page performance as latency decreases. For web performance, latency is king!

Latency per Bandwidth & Latency per RTT

Latency per Bandwidth & Latency per RTT
Graphic credit: Ilya Grigorik (Google)

Latency is primarily determined by the physical distance the request must travel between the browser and the server. If the request needs to cross a continent or an ocean, it's going to take longer than a request that has to cross the street. The speed of communication is limited by the laws of physics (we can't go faster than the speed of light) and that isn't something anyone expects to change anytime soon! To read a lot more about latency & performance, have a look at Ilya Grigorik's blog post on the subject.

3G radio technology had some unnecessary latency, and this latency has been fixed by 4G technologies. Virgin Mobile, for example, reports that "Users of the Sprint 4G network can expect to experience average speeds of 3Mbps to 6Mbps download and up to 1.5Mbps upload with an average latency of 150ms. On the Virgin Mobile 3G network, users can expect to experience average speeds of 600Kbps - 1.4Mbps download and 350Kbps - 500Kbps upload with an average latency of 400ms."

150ms is a lot better than 400ms – sounds pretty good, right? Unfortunately it takes more than one round trip to establish communication between a web browser and a web server. In fact, it takes 3 round trips for the first bytes of data to actually arrive. 450ms is the best case scenario for a visitor on a high-end smartphone and a 4G network! And that's just for the first few hundred bytes of data. Still, a 450ms block in rendering isn't too bad, is it? But according to Google, the average top internet site has 42 resources in it. Fortunately the browser doesn't have to connect to the server 42 times - once a connection is established it can be re-used for subsequent requests. And web browsers try to help out by establishing multiple connections to each host automatically. The Google data shows top sites have an average of 8.39 hosts per page. Lets be generous and round that down to 8. If we were doing things serially -- that's an absolute minimum of 3.6 seconds under the most ideal circumstances.  Fortunately, the look-ahead pre-parser can parallelize some of this so the math gets more complex.  But for the majority of 3G phones and networks we could easily be looking at 5 - 10 seconds of delay to the page load time.  What does this mean in business terms?

Amazon's team famously discovered that 100ms of delay decreased sales by 1%. Using this formula, for our high-end smartphone example on 4G, that means these external resources have cost you about 29.65% of sales from your website for smartphone visitors. For visitors using an iPhone 4S running on a 3G network, this performance problem cost 63% of your sales. Other experiences are similar, for example, Shopzilla found that by moving their page load time from 4 - 6 seconds to around the 1 second mark resulted in a 7 - 12% increase in conversion rate.

Mobify's results - and why you definitely need to care about optimizing for performance on mobile!

The graphic below shows a cohort performance analysis for high-end smartphones. The test involved downloading a 20KB file from a cookieless domain cached across Mobify's CDN with more than 40 Points Of Presence (POPs) distributed worldwide. We further limited the test to iOS devices running iOS 6 and Android smartphones running Android 2.3 and newer. During the test we collected more than a million data points.

20KB smartphone image download speed - cohort analysis

20KB smartphone image download speed – cohort analysis

From this you can derive that in North America:

  • 92.16% of smartphones took > 200ms to load a 20KB file
  • 63.93% of smartphones took > 400ms to load a 20KB file
  • 44.71% of smartphones took > 600ms to load a 20KB file

The situation is almost exactly the same in Europe. In Asia & Africa the situation is much worse.

What can you do about it?

Many of you may be hoping that domain sharding & HTTP 1.1 features such as pipelining can help with this. Unfortunately, domain sharding is at best neutral and in many cases may cause a performance penalty due to the overhead involved in creating new connections. HTTP pipelining has a head-of-line blocking problem and offers at best a modest push in the right direction. Although new technologies and new undersea cables will continue to erode latencies, gains there will be marginal. The cost of improving 1ms of latency in an undersea cable, for example, is 25 million dollars per millisecond saved.

As a web developer, performance should be considered a feature that ships with your product. But performance optimization can be a costly process and often performance tweaks can significantly increase the maintenance, management and testing costs for a web project.

Mobify is committed to helping developers spend more time shipping core features, taking the heavy-lifting off of our customers.  Our platform provides a number of tools for optimizing the performance of your mobile and tablet websites powered by Mobify's cloud platform including the ability to:

  • automatically compress resources
  • automatically serve resources from our worldwide CDN
  • whitelist select JavaScript resources
  • lazy-load resources not needed when the page renders

Sign up for Mobify Studio for access to our cloud platform with these features, based on the open source  Mobify.js project.

Subscribe to our blog

Get regular updates to help you create amazing adaptive web experiences.