I attended a recent Boston Web Performance Meetup on the subject of the Performance Implications of Mobile Web Design. The speaker was Guy Podjarny a founder and CTO of Blaze.io (acquired by Akamai). He was a great speaker and really knows his material. I highly recommend downloading the presentation!

The core of mobile web performance concerns fall around the following points:

  • Bandwidth – mobile devices are often on cellular connections with very limited bandwidth, this impact is multiplied with the size and number of assets being downloaded
  • Latency – cellular connections have high latency, this impact is multiplied with every asset download and redirect
  • CPU – mobile devices have slower CPUs than desktops or laptops which impacts JavaScript and DOM processing
  • RAM – mobile devices have less RAM than desktops or laptops which also can limit complex DOM processing

M Dot versus RWD

Guy started off covering two high level approaches to mobile web sites: the “M Dot” approach is the separate dedicated mobile website, typically setup as m.domain.com; and Responsive Web Design (RWD) which is where you have one single site, which dynamically adjusts to different clients including mobile clients.

He covered the high level pros and cons of each approach, performance-wise. He falls pretty strongly on the RWD side of the fence, while after listening to his presentation, I ended up strongly on the M Dot side of things. Different backgrounds I guess.

M Dot Pros

Guy points out that M Dot sites are less sensitive to specific browsers, and easier to build the optimal mobile experience, since you can tailor your build not only in look and feel, but also in operation, making the site work better with touch screen phones, or even using mobile device specific hooks like iPhone actions.

M Dot Cons

One of the main cons for M Dot sites are they often have multiple redirects to send the client to the mobile site which can slow things down, especially over high latency cellular links.

RWD Pros

RWD sites adapt to screen-size, freeing you from having to build and maintain complex user agent based rewrite rules, and can work well across many screen sizes of mobile devices. It also gives you one website/webapp to build and maintain (although it may be much more complex to build and maintain than two separate targeted sites/apps), and it’s more future-proof.

RWD Cons

RWD have many more cons, primarily around over downloading (i.e. downloading a full desktop site worth of content, only to display a small subset of it on the smaller mobile screen). Most RWD sites download huge amounts of content even for mobile clients. This is SLOW. The DOMs are also typically over complicated which can further slow rendering on CPU limited devices. Then the whole RWD approach is JS heavy, typically with tons of DOM manipulation, which is also slower on mobile devices which are CPU and RAM limited compared to their desktop counterparts.

Fixing M Dot Performance

Resolving the issues with the M Dot sites is usually very simple. Work to reduce redirects, and you can even use Apache rewrites to avoid redirects entirely, mapping requests back to the relevant mobile assets using smart rules.

Fixing RWD Performance

Resolving the issues with the RWD sites is much more complex. The “best” approach is to build your website as a mobile only site (basically just like an M Dot site), and then use JavaScript to allow it to scale up to the desktop content and functionality you want. This means that every design change, or new feature you want to add to your site you create it for the mobile site, and then write all the JavaScript needed to scale it up to the desktop, changing UI interactions, pulling in larger images, etc… For sites that don’t change much or have simple content presentation functions this might not be that bad. But for complex sites or sites that change or add new features frequently this is a much larger overhead of development and maintenance cost. Plus your optimum experience is on the mobile device. If you’re a mobile centric site, this makes sense. If you’re a normal website, or an eCommerce site, this is the wrong approach.

Mobile versus Desktop

There is a popular chart going around that shows Mobile Internet Users surpassing Desktop Internet Users in 2013, which many people are using to drive a heavy focus on mobile-centric approaches to web sites. In my opinion this chart is very misleading. While mobile is growing, no question, that chart is based on estimated unique users on mobile or desktop platforms hitting various high traffic sites. My problem with that is take me for example: I hit www.sparkred.com from my laptop, from my iPhone, and from my iPad. That means on that chart I count for 1 desktop user and 2 mobile users. However I perform 90%+ of my page views and site interaction on my laptop. I’m not the only one either. StatCounter.com shows 90% of page views are done on the desktop, and only 10% from mobile devices. So the desktop is where you should optimize your user experience, doubly so for eCommerce sites where the stats are even more heavily skewed toward the desktop.

Summary

My take away from all of this, is that for most websites, and especially for ATG Oracle Commerce sites, while Responsive Web Design can be nice to have to support different browser window sizes on the desktop, mobile device support is best delivered via a dedicated mobile site (M Dot).  The ATG Oracle Commerce component model makes it easy to leverage all the same logic and data from two sets of JSPs (or two web apps), one for desktop users and one for mobile users.  Your hosting provider can help you optimize the performance by using a CDN and by leveraging the web servers to minimize performance impacts from redirects, and other performance tricks.