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
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
Code such as JavaScript and CSS can be minified, where all unnecessary whitespace is removed, which can reduce the file size. In addition, HTTP and text files can be compressed with GZIP.
GZIP
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.
Render Blocking
Files like JavaScript and CSS can delay the content on page from loading – also known as the ‘first paint’. PageSpeed Insights looks at two versions of ‘first paint’.
- 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.
- When a page loads, we want to display the first text or image of a page as soon as possible. However, when a page loads it will firstly download any ‘critical’ stylesheets or JavaScript files which prevents the first object of the page being painted.
- What we can do is ‘defer’ stylesheets and JavaScript. This means telling the browser to deal with these files last. Allowing some content to be painted earlier, or prior to loading these sheets.
- 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.
- This measures the amount of time it takes for the first ‘page’ of content above the fold to load. We can decrease the amount of time it takes for the first set of content to load by delivering important styling or JavaScript inline. This allows the page to render this first, before other stylesheets or script.
HTTP Requests
The number of requests a website needs to make when loading a page will have an effect on the loading speed. Every individual stylesheet and JavaScript file will require another request, each one increasing the load time.
- The simplest way to tackle this by having all core styles in one file, and all core JavaScript in one file. This allows the browser to make one request for CSS and one request for JavaScript.
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.