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
How and What we Analyzed
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:
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:
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:
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.
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