On Monday the Olympic Men’s 4x100 Free Relay Swim Team won the gold medal by only a fraction of second over France. Many are saying it was the greatest relay race in Olympic history. In the Olympics, shaving fractions of second off of your finish time can mean the difference between winning and coming in second. If you are the creator of mobile web content, should you also strive to shave seconds from the time it takes to download your page?
Here at Keynote we can monitor the time it takes to download mobile web pages. We can do this over time and create a visual pattern of how well your content performs across top mobile networks. Here is an example of the performance of a prominent mobile web site that is providing continuous updates from the Olympics:
The “baby blue” line at the bottom of the graph represents one carrier that is able to deliver the Olympic mobile page very quickly in around 10 seconds. All the others have times ranging from 15, 30, and 40 seconds. How long would the average person wait for the page to download before they gave up?
Of course each network carrier uses different types of technologies to deliver mobile web content. Some carriers have faster networks than others and because of this have more download capacity. With all this being said, should the creators of content account for this performance delta, or should they just create the content in a way that does not take into account the true end user experience? Are the content creators also responsible for the slow download times on some of the carrier networks?
Let’s examine the actual page being returned and see what could be done to increase the download performance for the carriers shown in the graph above.
Part of the actual page being downloaded looks something like this:
The content looks simple enough but there is something subtle going on. Each of the number symbols “1”, “2”, “3”, etc. are actually graphics images. So for this simple menu there are 12 independent images have to be loaded in addition to all the other content on the page. The entire page also includes other larger images of actual Olympic moments.
In the desktop internet world, something like this is no big deal. We have so much more bandwidth on the desktop than we do in mobile that content design decisions to make something look “good” don’t necessarily have a negative impact on overall page performance. But on the mobile web, downloading multiple images incurs a lot of overhead and can really drag down the performance of the page. You might be curious to know how much time it takes to download these seemingly tiny images.
Keynote uses a “virtual handset” technology that allows us to decompose a mobile web page into each of its components as we download the page over the live RF carrier network. This means we can understand the time it takes to download each one of those tiny numeric images. Here is what we call a “waterfall graph” that shows us the progressive time that it takes to download a page of mobile content:
One example test run was selected in order to illustrate the point. On this page there are about 12 of these tiny menu images. The first one started to load about 20 seconds after the initial mobile page started to load. After about 40 seconds, the final image was just starting to load. So about 20+ seconds of time to download the entire page was consumed by the time it took to download these tiny menu images.
Now it could be that for the creators and owners of this content, those little images are deemed as “essential” in order to communicate the way in which the content should be used. Fair enough, but I wonder if the content creators did it this way because it “looks good” rather than take into consideration the actual end user experience of a person holding a real handset. Maybe they could have used simple “text links” like “(1) Medal Count” and not used an image for the number 1.
Maybe they could have shaved 20 seconds from their “finish time”.
NOTE: Access to page component download times similar to what I describe here is available in Keynote “MITE” which is being released on August 21st. Stay tuned for information on how to download a copy. The graphs used in this article came directly from Keynote’s Mobile Application Perspective, which is used to monitor the performance and availability of various types of mobile services.
Comments