How to increase web page speed to help conversion
- 5 mins read
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.
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!
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:
Further research by Google identifies the strong correlation between longer page speed times and increased bounce rate.
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
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.