Optimise your mobile experience: 5 steps to speed up your website
The advent of everyday mobile use has enabled us to get what we want in an instant. Want to find what’s showing at the cinema? What time your local Indian delivers until? Even what the word ‘netizen’ means? You are now able to quickly check using your phone almost anywhere you are.
The change in the way that we access information has increased expectations we have when it comes to the internet. We are increasingly becoming impatient and expect to get what we want, in the instance we want it.
What do users dislike the most when browsing the web on their mobile device?
As shown in the graph above, out of the many aspects of mobile experiences that users find most frustrating, waiting for slow pages to load comes out on top. So why does this matter, and why should you care?
Business impacts of speed
29% of smartphone users would use another website if they encounter an issue accessing a website. Simply put, you could be driving your users to your competitors if your speed isn’t up to scratch. Some of the largest tech companies have shown how even the smallest difference in speed can make an impact.
2% slower = 2% less search/user
400ms faster = 9% more traffic
- Yahoo
100ms faster = 1% more revenue
- Amazon
Benchmarking your performance
Before you begin, it is always good to understand how your mobile website is currently performing. This will let you:
- see the areas that you can improve on
- track any improvements made and see if there are any subsequent impacts on conversion rates, bounce rates etc.
There are a number of useful tools that will let you achieve this. Two that I recommend are:
5 steps to speed up your mobile website
So now that we know why mobile speed matters and how to measure it, there are a few simple steps that can be taken that can yield massive gains and super-charge your mobile experience.
1. Use gzip compression to reduce file size
Gzip is an automated server-side method of compressing files to make them smaller, which in turn will reduce the time it takes for a user’s browser to download them.
Most servers will have gzip enabled by default, however, if it has not been configured, your website will be serving larger files and resources to your users — slowing down their experience.
You can check if you have gzip enabled on your website by using a tool such this one by Varvy.
If you don’t have gzip enabled, check out my instructions on enabling gzip for details on how to set this up.
2. Optimize and minify CSS, JS & HTML files
One of the simplest things that can be done to improve performance is removing unnecessary or redundant code comments and formatting, removing unused code, using shorter variable and function names, and so on.
Just like using gzip compression, this acts as a way to minimise the size of files, which will reduce the download time for a user.
There are a number of ways that you can minimise CSS, JS & HTML files, the simplest and quickest way is by using an online tool such as these:
A more elegant, but advanced solution is building a file minification process into your production build process. You can see how to achieve this by checking out this guide on how to minify CSS, JS & HTML files using Gulp.
3. Put JS at the bottom and CSS at the top of HTML files
When a browser starts to render a web page, it begins building it by going through the HTML markup. During this process, if the browser finds an external script link in the HTML, it will stop and wait to download the file before continuing to build and render the page. So essentially, scripts can block your web page from starting to render, which will cause the user to see a blank white page for longer.
You can minimise scripts that block the render of a page by simply restructuring your HTML markup.
Place non-critical scripts at the bottom of the page
Most scripts are not required for the render of a web page. Scripts that do not affect the render of a page should be positioned at the bottom of the HTML to ensure that it does not block the browser processing the HTML.
Inline any critical scripts at the top of the page
If there are any scripts that are required to render the page, they should remain at the top of the page. If the size of the script is small, you should consider inlining the script as it will reduce the number of network roundtrips that the browser will have to make before the page can be built.
Example markup
By placing any non-critical scripts at the bottom of the HTML file and only putting any scripts that are required for the render of the web page at the top of the page you can improve the page-speed of your website. Here is an example of a optimised HTML markup:
<html>
<head>
<script type="text/javascript">
/* Inline JavaScript */
</script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
<script type="text/javascript" src="/script.js"></script>
</html>4. Lazy load, and optimise your images
Lazy Load is a process that delays a users web browser lading images until they are needed — essentially, images that are below the fold or outside of a users viewport will not be downloaded until they are visible in the users viewport.
Because only images that are required to render the webpage are requested from the web server, this can massively reduce the bytes that a browser will download — speeding-up the initial page render time.
There are a number of resources that are available to make implementing lazy loading quick and easy:
- BLazy — http://dinbror.dk/blazy/
- jQuery Lazy — http://jquery.eisbehr.de/lazy/
5. Use a content delivery network (CDN)
A content delivery network can speed up your mobile experience by caching your CSS, JavaScript, & HTML files on web servers around the world. Having your web resources closer to your users can ensure a faster response and download time of the content.
Leveraging a CDN can also improve the speed of your mobile website if you are using a server that is slow. By placing your web resources on a content delivery network, the interaction between your slow servers and a users browser will be minimised.
You can get set-up on a CDN in a short amount of time, and there are a number of options available for free. One that I would recommend looking at is CloudFlare:
Conclusion
To meet the high expectations of your mobile users, you need a mobile optimised website that loads in an instant. By implementing the steps above, you can drastically improve the speed of your mobile website, which can lead to improvements in your user’s experience on your website and also uplifts in your conversion numbers.
This article was originally published on amardeeprai.com
