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

Is Sochi’s Mobile Website aiming for Web Performance Gold?

For major events such as the Super Bowl, Soccer World Cup or the Olympics we like to take a closer look at the events’ websites to highlight things that are done well and things that can be improved from a web performance perspective.

Although major sporting events like the Super Bowl and Olympics had typically been a one-screen phenomenon, for increasing numbers of consumers, they have quickly become two-screen events, so we will focus our analysis on the official Sochi mobile web site. Using the dynaTrace AJAX Edition as well as the Compuware APM/Gomez Monitoring it only takes a couple of minutes to find “room for improvement” such as:

  • Reducing the roundtrips: 186! Requests for the Landing Page
  • Optimizing JavaScript: Large DOM results in long running JavaScript
  • Reducing the size of content: 400k of HTML on the Landing Page is big

Tip: When we analyze mobile websites, we use dynaTrace AJAX Edition and combine it with Fiddler that allows us to simulate a different device, e.g: iPhone 4 by automatically modifying the User-Agent string. We know that this is not 100% the same as when using the real device – but – it allows us to analyze web performance based on resource downloads and JavaScript execution.

Analyzing Page Load Time

Loading m.sochi2014.com requires the browser to download 186 resources from 38 different domains. That’s a lot of resources and a lot of 3rd party content. Good news is that most of the 3rd party content is delay loaded which gives the end user the information he really wants, e.g: schedule overview as quickly as possible. The following screenshot shows the Timeline Representation and highlights some of the key performance indicators that you want to look at when analyzing page load time:

# Resources, # Domains, Page Load Time: Important Key Performance Indicators for Web Sites

# Resources, # Domains, Page Load Time: Important Key Performance Indicators for Web Sites

Tip: Have a look at Web Performance Optimization Best Practices and learn about the different metrics to analyze. # Roundtrips, Caching Behavior, Size of Content … are very important metrics to look for and optimize for

Content Size

The landing page is 3.6MB in total. 400k alone comes from the HTML Document. The rest is attributed by JavaScript, CSS and Images. Because of bandwidth and latency constraints, you want to optimize your content for mobile websites. This content also needs to be parsed and processed by the mobile browser. Reducing the size will have a positive impact across the board. Start your analysis by looking at the Network Downloads and sort by size to find the “heavy weights”:

The largest contributors to the page size are HTML, JavaScript and CSS followed by images.

The largest contributors to the page size are HTML, JavaScript and CSS followed by images.

Tip: Analyze your mobile website and remove all content that is not necessary and important for the mobile end user. This will reduce page size and page load time and will have a positive impact on end user experience.

JavaScript Performance

Modern smart phones have a lot of processing power. But they are not yet comparable to our desktops. Therefore it is important to optimize JavaScript performance for mobile web sites. On Sochi’s website we find a very heavy weight JavaScript library called knockout UI. The library itself is not heavy weight, but, applied to the very large HTML Page it takes about 2 seconds to update the DOM with the dynamic UI information provided by this framework. And this time is measured on my laptop, so it will be even slower on a mobile device. The following screenshot shows that the library has to iterate through thousands of DOM Elements which consumes all of the time:

JavaScript execution must be optimized for mobile devices. If it takes 1 second on a desktop it will be factors slower on a smart phone.

JavaScript execution must be optimized for mobile devices. If it takes 1 second on a desktop it will be factors slower on a smart phone.

Tip: Make sure you test your JavaScript execution on the mobile web site. Measure the execution time and also the impact of JavaScript execution on the responsiveness of the mobile browser. Users are not happy if their browser stalls for several seconds.

Spriting: Job Well Done!

When it comes to sprites, the Sochi web site deserves a Gold medal. There are a lot of small images on that site – all packed into a single sprite. This reduces roundtrips and with that improves page load time. Check it out:

Job Well Done: Flags and other icons embedded into a single sprite

Job Well Done: Flags and other icons embedded into a single sprite

Tip: If you want to learn more about sprites check out resources such as W3C School on Sprites.

Enjoy the Olympics

Now it’s time to turn on your TV or even better – open your mobile browser and check out the current results of your most favorite event on Sochi’s Mobile Website.

Let us know if you have any further questions on best practices or tooling and stay tuned for some follow up blog posts on our end that we will post throughout the Olympics.

Comments

  1. Frédéric Kayser says:

    Hello,
    I would not have decerned a Gold medal for the huge sprite file since it has been done in Adobe Photoshop CS6 on a Mac (I know this because it still holds a few metadata fields, take a peek at it with TweakPNG http://entropymine.com/jason/tweakpng/) and has not been optimized afterwards.
    Using ScriptPNG http://css-ig.net/scriptpng for instance would have saved 59KB on this file (Level 7).

Comments

*


3 + nine =