Testing mobile web sites on the actual device is still a challenge. While tools like dynaTrace Ajax Edition make it very easy to get detailed performance data from desktop browsers, we do not have the same luxury for mobile.

I was wondering whether desktop tooling can be used for analyzing and optimizing mobile sites. My idea was to start testing mobile web sites on desktop browsers. Many websites return mobile content even when requested by a desktop browsers. For all sites one has control over it is also possible to override browser checks.

The basic rationale behind this approach is that if something is already slow in a desktop browser it will not be fast in a mobile browser. Typical problems patterns can also be more easily analyzed in a desktop environment than on a mobile device.

I chose the United website  inspired by Maximiliano Firtmans talk at Velocity. I loaded the regular and the mobile site with Firefox and collected all performance data with dynaTrace. The first interesting fact was that the mobile site was much slower than the regular site.

This is quite surprising as the mobile site has way less visual content as you can see below. So why is the site that slow?

When we look at the timeline we see that the mobile site is only using one domain while the regular site is using an additional content domain. So serving everything from one domain has a serious impact on performance

I checked the latest result from BrowserScope to see how many connections mobile browsers can handle. They are using up to 35 connection which is quite a lot. The United mobile ,site does not leverage this fact for mobile.

Looking at the content reveals two optimization points. First a lot of the content is images which could be sprited. This would then only block one connection and additionally also speed up download times. The second point is that the CSS which is used is huge. A 70k CSS file for a 12k HTML page is quite impressive.

While these improvements will make the page faster they are not the biggest concern. Looking at the requests we can see that there are several network requests which take longer than 5 seconds. One of them is the CSS file which is required to layout the page. This means that the user not see a nicely layouted page within less than 5 seconds (not taking network transfer time into consideration). So in this case the server used for the mobile website is the real problem.

Conclusion

This example shows that basic analysis of mobile web site performance can also be done at the desktop. Especially performance issues caused by slow server-side response times or non-optimized resource delivery can be found easily. The United example also shows how important effective server-side performance optimization is in a mobile environment. When we have to deal with higher latency and smaller bandwidth we have to optimize server-side delivery to get more legroom for dealing with slower networks.

Looking at the content delivery chain which start at the end user and goes all the way back to the server-side it becomes clear that any time we lose on the server cannot be compensated by upstream optimization.