Web page speed

How to increase web page speed to help conversion

  • 5 mins read
Carl Wood
by Carl Wood
Senior Front-end Developer

Carl designs, builds and tests the front ends of all the digital products and services that we produce. He has a wealth of experience having worked on numerous projects across all sectors. He’ll also make it his personal mission to make sure your front-end loads at the speed of light.

Published on Thursday 8th August 2019

In this blog post, our Senior Front-end Developer, Carl explores the importance of a fast page load time and the impact it can have on web conversion and retaining customers. Carl talks through his top tips and advice for improving your load time including how you can test it.

Addressing the problem

Page speed is defined as the length of time it takes for a user to load your website — and it can have a big impact on their experience.

Studies have shown that a fast page speed results in an improved conversion rate and, conversely, that a slow page speed can increase bounce rates.

Stats suggest that, over the last few years, we’re creating heavier web pages that are taking longer to load. According to http archive reports, which analyses between 4 and 5 million URLs, the median page weight for May 2019 is 1.9MB on desktop, and 1.7MB on mobile. The weight of a mobile web page has increased 187.3% in five years!

Page Weight data

What do these numbers mean for our customers?

Based on average download speeds, a mobile user on a 4G network would be able to download our 1.7MB web page very quickly in under a second. However, a mobile user on a 3G network - which isn’t as rare as we’d like to think - would download the website in four seconds. Think about a customer who is trying to access your website on a train with a flaky countryside Edge connection. It could take up to 47 seconds for your web page to download! 

If we don’t pay attention to the weight of our web pages, we risk losing our users, as Google notes:

Tweet this quote
“53% of visits are abandoned if a mobile site takes longer than three seconds to load”

Google

Further research by Google identifies the strong correlation between longer page speed times and increased bounce rate.

Mobile Page Speed New Industry Benchmarks
Source: https://unbounce.com/photos/mobile-page-speed-new-industry-benchmarks-01-21.png

With all that said, let’s look ahead to some ways in which we can increase our website speed to improve conversion.

How to increase speed

Minify and optimise assets

The simplest way to increase the speed of your website is to reduce the number and size of files the browser has to download. Downloading 300kb of JavaScript, styles and images is a lot better than the industry average of 1.8mb. Minifying these files and optimising images will help reduce the web page size.

Lazy load images

Another way to reduce the page size is to lazy load images. Unless specified otherwise, the browser downloads all images on the web page as soon as the user loads the site. As we saw above, this can make our website pretty heavy! Instead of loading all images immediately, we can lazy load each image by downloading it only when we need it (like when we scroll to it).

Choose the best image format

Images saved in the wrong format can lack quality and add to the valuable page weight we’re trying to trim. As a quick rule, use JPGs for photographs that include a lot of colours, PNGs for screenshots, illustrations, and images that require transparency. JPG and PNG are examples of bitmap formats, which shouldn’t be used 100% of the time. Sometimes, it’s better to go with a vector — which brings us to...

Don’t forget SVGs

When possible, use vector over bitmap images. Vector images (SVGs) tend to have a smaller file size than their bitmap equivalent, and they can scale to any size without losing quality. Icons are prime candidates for a vector format, and website/company logos can be too — provided you can access the vector file. Vectors don’t tend to outperform bitmaps when it comes to complicated graphics (use PNGs) or photographs (use JPGs). In fact, the vector file size can be much larger!

Speed up rendering

Modern web development techniques allow us to speed up how quickly our web page appears to load. One of these techniques, critical CSS, instantly loads the styles for the ‘above the fold’ section of the page. Essentially, we’re quickly adding styles to the most important part of the page when a user visits our site: the part they can see!

How to test speed

It’s useful to test how your website speed fares on well-respected tools, like Google PageSpeed insights, Pingdom Speed Test and WebPageTest. Test your website before you make any optimisations, mark down the scores and opportunities for improvement, and test again during and after development. Google Lighthouse in Chrome DevTools is an invaluable tool for performance testing during development.

How Graphite can help

At Graphite, we offer performance audits in which we identify ways you can speed up your website and help conversion. Get in touch if you’re interested.