Top Tips to Improve Your Page Load Speed

This refers to the amount that the page layout shifts during the loading phase, with a score rated from 0–1, where 0 means no shifting and 1 means the most shifting. Having pages elements shift while a user is trying to interact with it is a bad user experience.

This refers to the amount of time that it takes a webserver to respond. TTFB measures the duration from the user or client making an HTTP request to the first byte of the page being received by the client’s browser.

LCP reports the render time of the largest image or text block visible in the viewport, relative to when the user first navigated to the page.To provide a good user experience, strive to have LCP occur within the first 2.5 seconds of the page starting to load.

INP assesses a page’s overall responsiveness to user interactions by observing the latency of all click, tap and keyboard interactions that occur throughout the lifespan of a user’s visit to a page. To provide a good user experience, strive to have an INP of less than 200 milliseconds.

It’s important to resize your images to ensure they are no bigger than is strictly necessary, and abide by the maximum allowed image size for your website. It’s also a good idea to ensure images are optimised for display on mobile devices. Tools like Photoshop or GIMP are useful for resizing and cropping images, or you might opt for a service such as Kraken or Cloudinary to automatically resize and optimise your images for you.

If images are tanking your page load speed, you might consider implementing a lazy loading script to images not visible to the user. This will help to prioritise visible elements first, and load the images later, without negatively impacting user experience. Many modern browsers support lazy loading by simply adding the loading = “lazy” attribute to the image tag, or you might opt to do this through a JavaScript code.

Google advises that images should be converted into WebP or AVIF formats, as these offer better compression than PNG or JPEG. Compressing images is important, as these are able to be downloaded faster, resulting in faster pages. There are a variety of plugins available online to assist with this.

When a page redirects to another, your visitor is faced with additional loading time. While it is not practical to eliminate redirects altogether, having too many, or having redirects that are not absolutely necessary, will reduce the load speed of your pages.

There are plenty of free-to-use online tools available for auditing the redirects on your website and giving you valuable insight into which ones are affecting your load times, such as Google Pagespeed, Pagespeed Insight, Lighthouse, Chrome Inspect Element and Analysing Network Tab and Live User Monitoring (Server side) using Elastic.

There are a wide variety of plugins used by websites and some of them can be very valuable, such as Google Analytics. However, they also increase the time that it takes to load your page, as well as often generating unnecessary redirects. Plugins work like apps for your website, with many making HTTP requests to load assets such as scripts, CSS and images – each of these requests made by your plugins increases the page load time. It’s useful to conduct a regular review of your plugins, to ensure you keep only the ones that you are using, while removing those that are no longer necessary or have become outdated.

It’s best practice to avoid linking to a page that you’re already aware has a redirect on it. This will compact the issue and lead to multiple redirects, slowing a page down even further.

There are many different types of caches, and choosing the right one will depend on what kind of website you have, your host, as well as your own unique needs. Two of the most common types are server-side caching and client-side caching. Client-side caching occurs when the web browser is used to store website data, while server-side caching involves storing website data on the server.

Many website hosts offer this feature, meaning it is usually done at the server level. If your website is powered by WordPress, there are also several cache plugins available, such as WP Rocket, WP Super Cache and W3 Total Cache.

It’s natural that over time, your website code will accrue redundant lines that are no longer relevant. Taking regular time to audit your code for these redundant lines will reduce the overall file size, meaning less to load and faster page speeds.

As well as removing redundant or outdated lines of code, generally cleaning up existing code is also a good idea. Removing superfluous elements, including characters and spaces will help to optimise the file size. There are “minify” tools available for CSS and JavaScript, including Online CSS Minifier and Online JavaScript Minifier, which can dramatically reduce the file size.