Andreas Grabner About the Author

Andreas Grabner has been helping companies improve their application performance for 15+ years. He is a regular contributor within Web Performance and DevOps communities and a prolific speaker at user groups and conferences around the world. Reach him at @grabnerandi

The Terrible Website Performance Mistakes of Mobile Shopping Sites in 2013

Our new survey tells us that up to 50% of online shoppers this year will use their mobile device. Good news is that most retail stores that have an online store now also offer a mobile version, e.g: http://m.gap.com, http://m.jcpenney.com, http://m.bestbuy.com. In the past years we have done a deep dive web performance analysis on the desktop versions of these sites and blogged about it. This year we took a look at the mobile sites and found some “terrible” website performance mistakes that will most likely frustrate the mobile shopper. The “highlights” (or lowlights) that we found are:

  • 87 Roundtrips from 25 different domains for a single mobile page
  • 28 redirects from the mobile site to the desktop site for downloading JS and CSS
  • 2.5MB of page size for the shopping cart
Some pages are already optimized for mobile – but some critical pages are overloaded, have too many roundtrips and are therefore really slow on mobile devices

Some pages are already optimized for mobile – but some critical pages are overloaded, have too many roundtrips and are therefore really slow on mobile devices

How and What we Analyzed

To be frank – we used free available tools such as the dynaTrace AJAX Edition for analyzing the performance of desktop websites, but navigating to the mobile version of the site instead of using special mobile diagnostic tools. We did however modify the user-agent string using tools such as Fiddler to simulate mobile devices such as iPad, iPhone or Android devices. The goal was not to find rendering or JavaScript related issues (though we found some) but rather checking whether these pages made sure that content is delivered in a mobile optimized way. This type of analysis can be done with desktop tools as well!

In our analysis we walked from the mobile homepage through the product catalog. We added one product and then moved to the shopping cart to verify our items were there but then removed them.

The Good and the Bad Things we Found

We found several issues as listed in the initial paragraph. To not only highlight the bad patterns we will also show examples of mobile websites that follow the mobile web performance best practices. The #1 rule for mobile web sites is to keep roundtrips to a minimum and also download content from as few as possible domains as it is expensive to establish the connections, because latency is much higher on mobile devices than wired connections and because bandwidth is typically not comparable with your desktop’s connection. Here are 3 violations we found on multiple sites:

Violation #1: 87 Roundtrips from 25 Different Domains

One website requires the user to download 87 resources (Images, JS, CSS and HTML) from 25 different domains on its shopping cart page. The following picture shows the timeline view where it is easy to spot that most of these downloads come from 3rd party content domains and most of them (except 4) were loaded before onload and were not delay loaded:

Mobile Websites must be optimized to open as few connections as possible. Downloading content from 25 different domains is very bad practice

Mobile Websites must be optimized to open as few connections as possible. Downloading content from 25 different domains is very bad practice

How does an optimized site look like? Take a look at the following shopping cart page. It only uses half the domains, therefore fewer resources to download which speeds up overall page load time significantly:

An optimized mobile site uses a smaller number of different domains where it downloads its resources. This greatly improves overall page load time

An optimized mobile site uses a smaller number of different domains where it downloads its resources. This greatly improves overall page load time

Violation #2: 28 Redirects on a single page

Taking a closer look at the two timelines from above shows a huge difference in the number of roundtrips. The interesting fact on the slow page is that it just doesn’t download that many more items. The main problem is that most of the .js and .css files are being redirected from the mobile domain to the regular domain. On the shopping cart page there are 28 (!) roundtrips that would not be necessary. Especially on mobile devices this is a HUGE problem because roundtrips are very expensive caused by high latency of your mobile network connection. The following screenshot shows these redirects and the time “wasted” on the network:

All css and js files are redirected from the m. site to the www. site. This is a “waste” in time especially on high latency connections

All css and js files are redirected from the m. site to the www. site. This is a “waste” in time especially on high latency connections

Besides the redirects, many of the css and js files could be merged to reduce the number of roundtrips. This is just a general Web Performance Best Practice that applies to desktop but also mobile web applications.

Violation #3: 2.5 MB of Page Size for Shopping Cart

No question that average bandwidth and speed of mobile connections has improved over the years – but – it is still a good practice to keep your page content as slim and optimized as possible. If your end users don’t have a mobile plan that includes unlimited data or if you have shoppers that are roaming you want to make sure that their shopping experience won’t have a bad aftertaste when they get their monthly statement at the end of December.

We found one shopping cart page that had a total of 2.5MB in page size. The largest contributor was JavaScript with 1.5MB (!) followed by 400k of HTML, 260k of CSS and 200k of images. That was quite astonishing to me – especially the size of the JavaScript. Having a closer look at the largest JavaScript file (1MB in size) it seems that they just packed every possible code into that file. When analyzing the actual executed JavaScript it seems that only a very small percentage of that code is actually used. In this case it is a good practice to split the JavaScript into smaller pieces and only download the part that is really necessary for the mobile page:

Mobile Websites with 2.5MB of mainly unused content need to be avoided. They result in very bad user experience

Mobile Websites with 2.5MB of mainly unused content need to be avoided. They result in very bad user experience

In contrast the following screenshot shows a shopping cart page that only downloads 832kb of resources and the content that is downloaded (CSS and JavaScript) is mostly used on that page:

Optimized pages are much more lightweight, therefore load faster even on slower connections

Optimized pages are much more lightweight, therefore load faster even on slower connections

Summary: Tips for Mobile Web Sites

Most examples from above are “low hanging fruit” when it comes to fixing them. It is just following known best practices for web performance optimizations. Good news is that there are tons of tools out there that can help you. As you can see from this blog – you can even do testing on your desktop as the things you want to optimize can be seen with tools such as dynaTrace AJAX Edition, YSlow or PageSpeed. There was a great presentation from Ilya Grigorik on Faster Websites: Crash Course on Web Performance.

Follow up blog on a site that you struggled with!

Have you done your own testing? Or did you stumble across sites that didn’t work for you during the holiday shopping season? Leave us a comment or reach out to us via email, twitter and co and we will analyze the problems you ran into and blog about it.

Happy Online Shopping

Comments

  1. Jeff Costa says:

    Andreas,

    Why have you obfuscated the URL’s of the example sites here? You mention three sites at the start of the article – are these waterfalls from those mobile sites?

Comments

*


8 − two =