• About Us
  • Blog
  • Basket
  • Account
  • Sign In


Published on Friday, June 28, 2013

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

If you are unhappy with your website’s mobile page weight then you may need to optimise for mobile devices. 51Degrees device detection enables developers to optimise existing web content cost effectively for mobile devices. Unsure which solution is best for your website? Take the 51Degrees.mobi RESS test to understand more.

Remember to enter the 51Degrees.mobi Search for the Heaviest Mobile Website competition for a chance to win $1000

Enter Competition

Comments (0)

Author: Products Team

Categories: Analysis

Tags: Performance , Chrome , Testing

Joe Davine
Joe Davine>

Products Team

Marketing Executive for 51Degrees.mobi

Other posts by Products Team
Contact author



.NET 4G 51Degrees 5G Acer Adform Adtech Advertising Afilias Alcatel Amazon AMP Analysis Analytics Android Apache API Apple Asian Market ASP.NET Asus Blackberry Browser C C# Centro Chrome chromium Client hints Cloud CMS CPU CSS3 Data Data Blog Data File Daydream Design Detection Developers Device Device Data Device Detection Device Intelligence Device Models Device property DeviceAtlas Disney dmexco DotNetNuke Download ebay Ericsson Event Facebook Firefox Foundation Framework Galaxy git repositories Google Google Analytics Google Daydream GPU GSMA Guess HAProxy Hash Trie HTC HTML5 HTTP HTTP Headers Huawei Infinix Ingeniux Internet usage iOS iOS 13 ipad iPadOS iPhone iPhone 11 Java Javascript Kentico LG Liferay LTE m.dot Memory Memory leak Meta Data Microsoft Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Motorola Mozilla MWC MWC 2017 MWC16 Native Apps NET New Release News Nexus NFC NGINX Nokia OnePlus 5 Opera Operating System Oppo Optimisation OS Patent Performance PHP Press Release Price Band programmatic Publishers Python Redirection Research Responsive Images Responsive web design RESS Review RTB RWD Safari Samsung Scala ScientiaMobile SEO Server Server-side optimisation Seznam.cz Sitecore Smart TV Smartphone Smartwatches Sony Swedish Beers Tablet Tencent Testing Tips Tutorial Umbraco Update User Agent User-Agent Valgrind Varnish Varnish Cache Video Vodafone VoLTE Web Web Apps Web content management Webtrekk White Paper Widgets WiFi Windows WURFL Xiaomi Xperia ZTE