Testing Your Website For Mobile Performance

Offering a great mobile experience to your website users isn't just about creating an optimised user interface. performance is also a critical component when developing for mobile, enabling your content to load as quickly as possible for any device.

Part of the mobile performance problem lies within web pages being too heavy, slowing down loading times on mobile connections. But how do we test our website to understand how to optimise for performance?

Using the browser for performance testing

Lucky for us modern browsers already have the functionality to test for page weight and loading elements. I will be using Google Chrome, which is the world's most popular web browser to demonstrate how you can test your website for performance.

If you don't already have Google Chrome, you can download it from here.

I will be testing the popular tech news website, http://thenextweb.com/ but you can use the following techniques to test any website for performance.

Has my website put on weight?

Google Chrome has something calledl ‘Developer Tools' (DevTools) built-in to allow developers to test their websites for performance. There are a few ways to open DevTools in your browser window, but the easiest way is to hit the F12 key on a windows machine or COMMAND-OPTION-I on a Mac.

This should bring up the following window:

This view will give in-depth information about the source code of whatever website you currently have loaded in your browser. Although interesting, this is not what we are looking for.

To look into the performance we need to visit the network tab of DevTools, this can be found here:

If you refresh the web page, this screen will show you exactly what is being loaded on your web browser, and exactly how long it took to load. If you look closely, you can see that this page states that 43 requests and 239kb were transferred, however this is not the true figure.

I visited TNW's web page multiple times already today, meaning some of the data was loaded in the cache. This is a technique used to try and reduce the page weight of a website on multiple visits. The problem with using such a technique lies within the amount of time most people are willing to spend initially loading your website before bouncing. 40% of users will leave a web page if it does not load within 3 seconds, meaning you have only a small amount of time to get your content to load. Drastically reducing initial page weight will drop bounce rates and enable more users to view your content.

Clearing the cache allows us to test a pages initial weight, giving us a better idea of its realistic performance. To do this we need to delve into DevTools settings by clicking on the cog symbol in the bottom right of DevTools interface.

This will bring up the following screen:

By ticking the ‘Disable Cache' checkbox we can now close the settings menu and refresh the web page to see it's true page weight.

This shows a far more truthful 125 requests and 2.6mb transferred, taking 6.63 seconds to load on a desktop, with a fast broadband connection.

Emulating a mobile device

We have seen the initial page weight of TNW's website; however this is for the desktop website. We also need to change a few more settings in DevTools in order to test the mobile website.

Return to the settings menu (once again by clicking the small cog icon in the bottom right of the DevTools interface) and click the ‘Overrides' tab. This will bring up another section of the settings menu:

The ‘Overrides' menu gives different options to override the browser's header and make it appear to be something it actually isn't.

This is important, as we want to test as if we were a mobile device. We need to change the ‘User Agent' to be able to do this. The User Agent is the piece of information a browser sends to a server in order to retrieve a web page. The act of manually changing our User Agent and emulating a different device is known as ‘User Agent Spoofing'.

Tick the User Agent check box, and select the device you wish to pretend to be. I will be using the Blackberry 9900 User Agent as this gives us a relatively small screen resolution – perfect for testing a mobile website.

Make sure the ‘Device metrics' box is also ticked (it should automatically tick itself and fill in the boxes for you), as this gives the resolution of the device for representation in the Google Chrome browser.

TNW's website utilises a technique known as Responsive Web Design (RWD), which deals with the aesthetic problem of the mobile web, but tends to forget the performance aspects. Responding to the screen size, TNW actually changes the way its content is viewed, giving a great user interface for its mobile users.

Understanding mobile page weights

We finally have our DevTools set up to show us exactly how heavy our web page is on mobile devices. Close the DevTools setting menu and refresh the web page. If a mobile performance optimised web site is present, we should see a drastic drop in bytes being transferred.

With the appropriate settings, TNW's website has 66 requests and loads a total of 2.2mb; this takes 3.85 seconds to load on a fast broadband connection. Even though they have a great user interface, TNW could be losing up to 40% of new mobile visitors due to their website not being optimised for performance.

Put your website on a diet