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
- Reducing the size of content: 400k of HTML on the Landing Page is big
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:
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
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.
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:
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.