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

Blog

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

Name:
Email:
Subject:
Message:
x

Tags

.NET 2013 2014 4G 51Degrees 5G A.C.Roma A7 ABI Acer Affiliate Marketing Alcatel Amazon AMP Analysis Analytics Android Android 5.0 Lollipop Android Kitkat Android Lollipop Android Media Stick Apache API Apple Apple TV Archos Asha Asian Market ASP.NET Asus Australia Big Data Black Friday Blackberry Blink Browser C C# Case Study CeBIT CES Chrome Cloud CMS combinations Comparison Competition CoolPad COTW Cron CSS3 Data Data Blog Data File Data Model Daydream Denver Design Desire Eye Desktop Detection Device Device Data Device Detection Device Intelligence Device Popularity Device property Device Types Device Use Display DoCoMo Doogee DotNetNuke Download Drupal Email EReader E-Reader Ericsson Evaluation Event Examples EXPLAY Rio Facebook feature Firefox Firefox OS Fly Foundation Framework France Galaxy S3 Galaxy S5 Galaxy Tab A Galaxy Tab A 8.0 Galaxy Tab A 9.7 Germany Global Google Google Daydream GSMA HAProxy Hardware Hisense HTC HTC ONE MAX HTC OS HTML5 HTTP Huawei HUAWEI. UPDATE HUDL Huwaei IBC Icemobile Prime 4.0 IE IFA IIS Image Optimiser Image Optimizer India Infographic Ingeniux Internet usage iOS iOS 7 iOS 8 ipad iPhone iPhone 6 IsEmailBrowser IsWebApp Italy Japan Java Javascript Jolla Kentico Keynote Kindle Kindle Fire Kindle Fire HD Leagoo Lenovo LG Location Log File Analysis LTE Lumia Map Memory Meta Data Mi 4S Micromax Microsoft Miia Style Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Module Motorola MVC4 MWC MWC 2017 MWC16 MyPhone Native NET New Release News News Letter Nexus Nexus 6 Nexus 9 NFC NGINX Nokia Non-Mobile NVIDIA Omate On7 Opera Opera Mini Operating System Optimisation OS OSX 10.10 OTA Panasonic Patent PC Pebble Performance phablet phone PHP Poland Presentation Press Release Price Band PRIV PS4 Python QMobile QR Codes Redirection Research Reseller Responsive Images RESS Review reviews RIM Ringmark RWD Samsung Scala Screen Screen resolution Screen Size SEO Server Set Box Set Top Box Sharepoint Shark 1 SHIFT phones Sitecore SLUSH Smart TV Smartphone Smartphones Smartwatches Snapdragon Sony Sony Xperia Spain Swedish Beers Symbian Tablet Tablets Tesco Testing Top 5 TOTW TV UDS UK Umbraco Update updates US User Agent UserAgent User-Agent Vendors Version 3 VoLTE VR Wearable Web WebKit WebMatrix White Paper Widgets Widnows WiFi Wiko Wileyfox Windows Windows Phone Xbox XBox One Xiaomi Xperia Xperia z Yosemite Z10 ZenFon 2 ZOPO ZTE