Form and Function

This month, the Keynote Mobile News & Portal performance index featured a number of smartphone sites that posted extremely slow response times. With that in mind, we thought we would look at how site infrastructure contributes to the performance of one of these slower sites. This means looking beyond merely the design, but also at what makes up a mobile homepage, what frameworks are used and what performance optimization is done to help page load times. Only by analyzing the bare bones of a mobile website structure can we understand how to implement performance optimization techniques to provide better user experience and faster page load times. 

As the North East continues to dig itself out from under storm Nemo, we figured one of the slower sites worth looking at was The Weather Channel’s mobile website (Weather.com), to see what is impacting its performance. 

Weathering the Storm

For the week ending February 17, the home page took on average over 40 seconds to fully load – well beyond the recommended best practice of six seconds response time. The page also weighed more than a hefty 1MB. With Weather.com ranked number 20 out of 22 sites in our index, let’s see if we can explore more deeply why its performance is so slow.

The first time user (and all Keynote testing measures the first time user experience only) is immediately presented with a splash screen asking for their consent to use the phone’s location services to determine their location for local weather data. 

Once the user clicks “Accept”, the user is prompted to see if they want to add the current location to their favorites list. 

The choice is saved and when the user returns to the site it is not presented again (unless they cleaned their cookies and local storage of the browser). The site uses the HTML5 geolocation feature to return the current location of the user. Only then is the user finally presented with the weather information they were after. 

These first two steps seem unnecessary for the first time user, delaying the time it takes to simply get the weather information they desire.

 

Now that the user has reached the homepage, there is a large amount of content and functionality such as Local Maps, News, Video and Safety tips in a carousel. Above that is an image of the banner ad.

The weather information can also be shared on Facebook – the page can be “Liked”- and via Twitter and other social networks. Websites can use Facebook Connect to integrate with the social media site but should do so with caution. The Facebook Connect outage we saw on February 7 took almost half the Internet down with it. As always, website owners don’t have much control over third party features or apps.

 We also noticed that fetching maps from its map server loads slowly. Weather.com pushes latitude and longitude coordinates to its map server and then fetches the appropriate local maps to display to the users. Using say GoogleMaps would probably speed up the loading.

All of these attributes can seriously impact the “Time to Load”. 

In the mobile space, not only is there a focus on tailoring the design to fit the small screen. There is also a focus on understanding how performance gets most impacted. We’ve noted some areas above, but our old friend JavaScript can cause havoc if its files are not set up correctly. For example, at Weather.com we see over 25 JavaScript files being used, making the slowdown unbearable. When numerous pieces of code are used it causes “browser serialization”. With JavaScript this means it blocks anything else trying to download. A much better approach would be for the Weather Channel to combine these numerous code pieces into one JavaScript.

On the other hand, The Weather Channel does do a great job of image optimization, where the images are embedded into the HTML. This greatly speeds up downloads.

A big issue for website owners today is content parity. This means your site contains the same content and HTML markup regardless of the device being used, to provide users with a consistent experience. This will only grow in importance as more people rely on their smartphone as their primary means of accessing the Web.

But while content parity is an absolute requirement for mobile users, that doesn’t imply websites can be ‘one size fits all’. The scrolling on the Weather Channel’s mobile site takes us through disparate content types, which generally do not translate to a good user-experience. With responsive Web design, we tend to fold a number of different content types into a single column. But that means lots of different content types in our scroll path. How do users know what’s on the page? They have to scroll and sift through a number of items. Auxiliary content loading can divide up content types more clearly. To manage this, you can roll up/collapse content to make it more pars-able on small screens.

Aggressive enhancement allows you to maintain access to content without overwhelming small mobile screens. Techniques like lazy loading enable Web creators to provide access to full content without having to crowd it all on the page at the same time. In addition to the annoyance caused by having to scroll through so much content, these long pages have another downside: terrible performance.

But we do see a very positive infrastructure base for The Weather Channel, designed to handle a heavy load. As a testament to this, even during Nemo there were no signs of the site slowing or any outages.

So again it’s both design considerations and the underlying infrastructure that impact how well a mobile site performs.