With an increasing number of users and always evolving ways of consumers using the web, from reading the news to shopping and doing all this on various devices, it’s more important than ever for websites to be optimised and capable of loading, even on slow connections, as you don’t want to put users off visiting your site.
Another reason to have a well performing website nowadays is the fact that, since Google’s Algorithm Speed Update, site speed score directly affects search engine results and SEO, pushing slower sites further down the list of results within the search engine.
There are a number of different actions you can take to quickly and efficiently improve your site speed score. The key element for doing the improvements is to firstly focus on weaknesses of the site that have the biggest impact on the overall score. The easiest way to do this is by running the website through PageSpeed Insights (https://pagespeed.web.dev/) and generating a report for your site.
PageSpeed Insights will run on a single web page, so to get a better understanding of the overall website, it’s worth running the test on the key templates to cover and fix as many issues as possible.
This will generate two reports for you, one for mobile and one for desktop, with an overall score, as well as a list of issues and opportunities, depending on the devices used. Here are the most common issues and fixes that I have come across over the years, that can quickly and easily boost your score and speed.
Optimise your assets
Assets such as images usually have the biggest impact on your web performance because these are often the largest files being loaded by the server. First thing you can do is make sure that your image dimensions are no bigger than they need to be.
There’s no reason or benefit to loading a 2000 pixel wide image for a news article teaser that will only ever load at a maximum width of 300px. You will be wasting all that precious bandwidth, whereas you could load an image that is 6 times smaller a lot faster.
Additionally, images used on websites, a lot of the time, are not optimised for web. That’s where you can save another 50% to 90% of the file size of the image just by running it through an optimisation tool. I regularly recommend using Squoosh (https://squoosh.app/) as it usually gives me the best results.
However the best thing you can do to optimise your images is load them in the next generation format. The aim of this is to convert your images from pngs and jpegs into formats like webp. You might think this is problematic, especially when you’re working with a CMS and a client that uploads images themselves. This isn’t really an issue as conversion of the image to the next gen format can happen in the background on the server with no change to the user or how they upload their assets.
Also browser support is no longer an issue in most cases, as you can see on the below image:
Source: https://caniuse.com/ alt: WebP browser support
For edge cases where you still have to support older browsers such as IE11, you can always create a fallback. Here is an example snippet of code of what this would look like:
<picture>
<source srcset="img/test-image-webp.webp" type="image/webp">
<source srcset="img/test-image-jpg.jpg" type="image/jpeg">
<img src="img/test-image-jpg.jpg" alt="image">
</picture>
The benefit of using webps over jpegs or pngs is the fact that file sizes are 25% to 35% smaller and can usually lift your site performance score quite significantly.
Reduce the impact of font loading
Fonts are an important part of your website. They make sure it stands out and fits the rest of your branding. But they also have a large impact on your page load times as, in most cases, they are being loaded from external sources such as GoogleFonts or TypeKit.
The easiest way to fix this is to not wait for the actual font to load and use a default browser one as a fallback font. This will allow the page to load other parts without having to pause for the fonts. All you have to do is add this snippet to your @font-face or as an attribute to the link where the font is coming from:
font-display: optional;
Javascript and third-party libraries
Javascript is quite important for interactivity on your website, but also might be essential in order to allow for certain functionality such as checkouts and form submissions.
A lot of the time for simplicity and time constraints we opt to use third-party libraries that have been developed by somebody else, as there is no reason to reinvent the wheel and spend more time creating something that already exists and been thoroughly tested by other users.
The drawback of this approach is the fact that we don’t have control over these files and we rely on plugin developers to make them as performant as possible.
So one thing to consider is next time when you choose the library that you want to use, do a couple of checks and comparisons for things like file sizes, dependencies on other libraries, popularity and whether it’s actively maintained or hasn’t been touched for a couple of years.
Once you’ve added the required libraries, make sure you do some housekeeping from time to time to check whether a newer version is available that might be more optimised. As the web progresses, a lot of developers will drop support for older browsers, which in practice means a lot of redundant code can be removed. You can also check for alternatives to the plugins used, as using outdated code can impact the security of your site.
Last point on this is make sure that you add your non essential libraries at the bottom of the page, just so they don’t block the critical assets from being loaded and impacting page speeds.
Proud to partner with
