How we got our GTMetrix PageSpeed score to 100%

Having a high PageSpeed score is a good sign that you have a healthy website that is fit for purpose. Why drive along contented with 20 mpg when you should be getting 50 mpg?  One of our favourite tools that we use to test website performance is GTMetrix.

Check out our GTMetrix PageSpeed Report.    (Updated: 14/12/2020)

At the planning stage, we asked the question, what do we need to display on our home page? We built our design what we actually needed.  With this strategy, we reduced our file requests down to 13 files including HTML (text), CSS (styles), javascript (actions) and images. It is sometimes alarming how many websites use a large number of files (50+) but still only display 400 words and a handful of images.  That is 50+ files that need to be downloaded by every user just so they can read a short post.  Doesn’t sound very efficient.

Out of the box, and with very little intervention, our PageSpeed score was about 85% at this stage.

Images – we limited the number of images to around six.  We used vector-based  SVG files for three of these images. If you haven’t used SVG files yet, we strongly recommend testing them. Apart from a very small footprint, they can be easily scaled across all devices, and when presented inline within an SVG tag, they can be styled using CSS. Whereas with PNG files you may need different versions for different browsers and Retina displays and if you change your brand colours you need to change all your image files.

We use the Gulp toolkit to automate JS and CSS compilation. Gulp brings them all together into one CSS file and one JS file.  We also limited the number of plugins used to 7.

Key points to help get a perfect PageSpeed 100% score

  • Plan ahead, ask what content do you actually need to display?
  • Make sure you start with a healthy server? (Test response times and check location).
  • Limit the number of plugins that you use – plugins are the easiest way to bloat a website.
  • Avoid multiple uses of full-width images – instead, consider using CSS colour gradients or SVG files.  Here is a handy tool to make CSS gradients.
  • Use to GTMetrix and the Waterfall tab to see what files are actually being requested. If for example, you have 3-4 CSS files consider how they could be compiled into one.
  • Display images at the correct size. Pick photographic images carefully avoiding images with very detailed backgrounds.
  • GTMetrix tests each site using 23 metrics. The aim of each metric is to score 100.  It is then a case of working through each recommendation and retesting.
  • Other useful tools to help improve the performance of your site include Smush – for optimising images and WP-Optimize to fix your database, compress large images and cache your site.
  • We use a combination of three tools to help improve download speed. WP Super Cache, Autoptimize (to aggregate CSS and Javascripts) and Smush (which has a great lazy load feature).

At some point, you will need to make a compromise between displaying the content you need and performance. Video is a good example – this can really help engage your audience but will increase your download speed.

As you update plugins and WordPress, or add new content, your PageSpeed results may change, so it is worth checking once in a while using a tool such as GTMetrix.

As a benchmark, we would aim to have a download speed of below 2 seconds and a PageSpeed score above 90%.  If you need help improving the performance of your website we would be pleased to help.