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.

At the planning stage of our own site, we asked the question, what do we actually need on our home page? We built our design what we actually needed. In the end, we got the home page 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 400 words.

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?
  • Make sure you start with a healthy server? (Test a blank html page if in doubt).
  • 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 will test your site using 23 metrics. The aim of each metric is to score 100.  It is then just a case of working through each recommendation and retesting.
  • While reaching out with the last recommendations, no doubt you will need to edit your .htaccess file or functions.php file. We used .htaccess to set the file cache expiry dates and file compression.  We used the functions.php file to load Javascript within the site footer.
  • 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.

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

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 please give us a shout!