Having a fast website is crucial to business. Not only do seconds count when converting visitors to customers, but your position on Google is influenced by how quickly parts of the page load. A recent study found even a one-second delay in loading a page could result in a 7% decrease in conversion.
So, if page speed is so important, how do you know if your website is good or what you need to improve? Google, in an effort to speed up the web and improve customer experience, offers a simple tool called PageSpeed Insights. After running the test, Google will suggest areas of improvement – from image compression to minimising code – and present a score out of 100 for both desktop and mobile versions. Since 2018, Google only uses mobile speed to decide on rankings, however, traffic may still visit your website from desktop so it’s worth designing for both devices.
In Creditplus’ pursuit to provide the best experience to car buyers, the Front-End Developers have shortlisted the four most effective ways to increase page speed.
Compression has the potential to have the largest impact on page speed, as on average images make up a total of 65% of a websites weight. When a visitor loads your website, files and images are delivered by the server – meaning they should be as small as possible. Luckily, there are multiple ways to compress an image.
Firstly, choose the best file format for the image. Typically, PNG works well for graphics, whilst JPEG is better for photographs.
Secondly, make use of loseless and lossy compression.
- Loseless compression allows original data to be perfectly recreated in a more compressed version. So, this will not affect the quality of an image, but will reduce its size
- Lossy compression will compress a file while losing some quality or information. This usually aims to take advantage of information we can’t see. For example, JPEG compresses sections of an image which are slightly different colours by making them all the same colour and therefore only storing that single value. When done to the extreme this is clearly visible, but on a small scale this is difficult to see and dramatically reduces the size of an image
Normally a browser requests a file, and when the server receives the request it sends the file back. GZIP compresses the file before the server sends it, much like sending a zip file by email.
GZIP can be used to compress almost all files, although it works best on HTML and CSS files due to the large amounts of whitespace and repetitive text.
- First Contentful Paint: Marks the time when the first text or image is loaded. The first bit of content, meaning the first indication that the page is actually loading anything.
- This may not be completely styled if we defer stylesheets, but this is fine, we are only looking for the first bit of content, it does not have to be fully styled.
- First Meaningful Paint: Measures when the primary content of a page is visible.
After optimising your web pages using these four steps, the speed of your website should increase dramatically, which could result in improved conversion or visitors spending more time on your website. Ultimately, these speed increases will be recognised by Google and, among other factors, increase your position on search results.