How to Accelerate a Mobile Website
A couple of months ago, I posted some thoughts on what mobile optimised website really means. With those thoughts as background, Id like to explore what we need to do in order to tackle website optimisation for users on cellular networks in particular. So, for the purposes of this discussion, lets refer to cellular connected small screen devices as Mobile devices or browsers.
I mentioned in that last blog article that there are lots of tips and tricks which can deliver a faster experience for web users on cellular networks. Here we will explore a few and why they are important.
Why is Website Performance Important for Mobile Devices?
First, lets do a quick recap on why its good to have a faster mobile website;
- There are lots of browsers checking out your website from a mobile device;
- The folks browsing your website think their time is important;
- The folks browsing your website will view more pages and spend more when the pages load faster and they can complete their transaction more expediently; and, conversely
- The folks browsing your website will neither be patient nor understanding when your website is performing poorly or is not available.
We all browse websites from our mobile devices and we all know the above holds true for ourselves. Loads of studies have been done for the big US websites and we checked out some of the stats for Australian websites.
So, the net answer is – Faster Mobile websites make more money!
How do you make a Mobile Website Faster?
When it comes to tackling the important factors to improve website performance there a few key differences to a mobile browsing experience versus a desktop. Mobile browsing is subject to1;
a) Lower data throughput than WiFi and Broadband;
b) Higher network latency;
c) Lower levels of performance consistency than WiFi and Broadband; and
d) Lower compute capacity at the browsing client. To use an analogy to help understand; if you think of the network going to the mobile device as a garden hose;
- The hose is narrower (lower throughput at any time),
- The water travels through the hose at a slower speed (higher latency),
- The water pressure goes up and down from time to time; and
- When the water reaches the end device, the device can’t soak up the water as quickly as it arrives.
Dealing with Lower Data Throughput
The average web page delivered is now 1.6Mb in size. This means, your website when requested has to push 1.6Mb of data to the mobile device requesting it. If the mobile devices requesting a web page have a lower data throughput rate (on WiFi but also especially on Cellular) then as a website owner you should do what you can to;
- Reduce the size of the page. E.g.;
- Apply compression
- Minify objects
- Remove Unused CSS
- Optimise image sizes
- Reduce HTML size
- Strip pixels from images for small screen devices
- Reorder the page so non-essential bytes are transferred later in the page load sequence. E.g.;
- Defer JavaScript files
- Lazy load images
Dealing with Higher Network Latency
In order to deliver a web page to browser, on average circa 95 round trips will be made from the users browser to the data source to connect and retrieve the various files which make up the page (e.g images, JavaScript, Style Sheets etc). Where latency is increased, those roundtrips take longer to execute. As a website owner, you should:
- Reduce the time to execute roundtrips by bringing data closer to the users browser (closer in a network sense as much as a geographic sense). E.g.
- Use Content Delivery Networks (CDNs)
- Improve cachability of content (in CDNs and through to the browser)
- Reduce the number of round trips the browser has to make to build a web page. E.g.
- Combining JavaScript files
- Combining images
- Combine CSS
- Avoiding bad requests
- Parallelise Requests
Dealing with Lower Levels of Consistency in Throughput and Latency
Unfortunately there is little we can do as website owners to improve the consistency of a users network experience. However, by reducing the absolute impact latency and throughput have on website performance (as outlined above) the noticeable effect of inconsistent performance should be reduced for your users.
Dealing with Lower Compute Capacity
Currently, mobile devices generally have lower levels of compute capacity than your average desktop device. Taking the processor alone, the ARM processor in a smart phone is about 8 times slower than an Intel x86 processor.2 What does this mean for mobile website browsing and performance?
When sending pages to mobile browsers, website owners must be aware of the compute draw the activities we ask the browser to undertake have on the browsers capacity to make interactive, the page we are sending. To achieve reduced compute draw and have a page rendered faster at the browser, website owners should conisder activities such as;
- Delaying the load of non-essential scripts to post onload event
- Using efficient CSS selectors
- Avoid CSS expressions
- Putting CSS in the document head
- Specifying image dimensions
- Specifying a character set
- Using correct protocol (HTTP/HTTPS)
- Making Third Party Content Asynchronous
- Removing Redundant Third Party Integrations
Conclusion
There are some specific mobile related web performance activities website owners should consider to maximise the user interaction with their websites.
We all know mobile browsing is on the increase and we know faster websites make more money. So, it stands to reason that website owners should make their users mobile browsing experiences as fast as possible!
