11 ways to take your website speed from 0 to 100

Page speed is a key metric when it comes to providing a great digital experience, but it’s something that is notoriously difficult to perfect, particularly on mobile - with 73% of mobile internet users saying they have encountered a website that was too slow to load.

When it comes to creating and maintaining your website, it’s so easy to prioritise slick design and SEO-friendly copy and forget about how the end-user might actually be experiencing the site. But page speed can have a huge impact on the success of a business; it can help (or equally hinder) your search engine rankings, your customer’s satisfaction and potentially even your conversions, so it’s important to give it due attention.

Our own Illustrate Digital team have had to spend a great deal of time perfecting the art of page speed, but there are a number of ways you can take a site from a fixer-upper to something fast-loading and joyous to use. We recently worked with legal firm, Foot Anstey, to take their mobile page speed from 20 (Google Page Speed Index) to a very respectable 95 and from 81 to a full 100 on desktop. Now, they can rest easy knowing their clients are breezing through the site and not being held up by long load times.

Given the huge jump, particularly for mobile, you might think a transformation like this would take an eternity, but with the steps below we were about to remould the site into a high-performing, well-oiled machine over the course of just two months.

So, where do you start? To find out where your page speed currently stands, there are lots of different places you can visit but I always recommend Google Page Speed Insights alongside GTmetrix - they’re free, and come with a breakdown of where and how your site might be slowing things down. Plus, the chances are you’re trying to please the Google gods for SEO, so knowing how they rate your site is no bad thing.

Once you know where you sit, there are a few key areas you can start with to begin speeding up your site:

1. Choose your hosting service carefully

Search for reviews and compare the best website hosts to ensure you’ve picked a reliable service partner providing consistently fast servers. One option is to trial your website on a demo account with your new host to assess its functionality and speed.

2. Check on the functionality your hosting provider offers

‍Look at what they provide for increasing performance, such as caching. This is especially important with sites built with a CMS (content management system) such as WordPress, as it can provide significant page speed increases and reduce server load. In addition, you should also look for a good CDN (content delivery network) option to make images load faster, regular back-ups, one-click migrations between test and live environments and regular reporting on server utilisation and performance. Outside of this, you want a host that provides good customer support with experienced technicians who can give you answers when required.

3. Consider your domain configuration

‍Are you using fast nameservers which configure your domain name to your web server quickly and efficiently without delay? Services such as the PageSpeed Insights tool by Google is a quick way to understand if your nameservers are causing poor performance. Look specifically at the 'Time To First Bite' (TTFB) score, as most of this relates to your DNS lookup, redirects and other nameserver related tasks.

4. Only deploy third-party integrations that you really need and have value to your organisation

‍Such services can be detrimental to performance due to the need to load additional external files and scripts, the additional domain name lookup, and the time to load and parse the files. So, review periodically and remove any that are no longer necessary.

5. Optimise images

‍The images that make up your webpage have one of the largest impacts on loading speed. It's important to understand the maximum pixel size required for an image on your website to ensure it fits and won’t slow your website down. There are free online image resizing tools available to reduce the size of any images that exceed the required size, but you can also use a WordPress plugin like Smush or ShortPixel which will continue to scan when new images are uploaded and keep them compressed while in motion. Just remember you want to steer away from blurry or pixelated imagery.

6. Use ‘srcset’ tags so images load at the right size for the user’s device

‍With ‘srcset’ tags in place, smaller images will load on a mobile phone, and larger alternative images will load on a desktop computer.

7. Use lazy loading techniques for images

‍Images will then only load when the user needs them (such as entering the viewport), rather than every image on a page - some which may not even be viewed - loading simultaneously.

8. Create custom icon fonts

‍Most websites feature a number of custom icon graphics, from social media logos to custom symbols such as arrows for navigation items. You are likely loading hundreds of icons you will not use - and therefore loading a much larger file than you need. So, instead of loading icons individually as single files, explore creating custom icon fonts with services such as IcoMoon. This way, your entire icon set can then be cached as a single file, and will load instantly after the first load.

9. Monitor and optimise database queries if you are using a CMS

‍Heavy and slow database queries can have a big impact on site speed, so identify and optimise them for better performance. For WordPress we recommend using the Query Monitor plugin.

10. Don’t rely on JQuery

‍JQuery is a common JavaScript library used for front-end interaction and effects, but it’s a relatively large file to load, and is often combined with large pre-built libraries to support a single UI effect. Consider redeveloping using standard JavaScript, or explore whether you can achieve the effect with modern CSS techniques and no JavaScript at all.

11. Consider using a JavaScript framework to decouple the front end of your site from a complicated CMS

‍By using a framework such as Next.js or Gatsby.js, known for their speed, you can achieve the best of both worlds. This type of setup is called headless, by separating what your users see on the front end of your website from the clunkiness that might be lurking in your CMS, you can deliver a lightning fast experience whilst still enjoying the comforts and functionality of your favourite content management platform.

It’s always difficult to put a number on projected page speed, but the techniques above helped us achieve top-level results in the space of just a few months and with these insights, hopefully you’ll be inspired to think creatively when it comes to improving your own speed.