How did we make our homepage less than 200kb?

Written by Tom Greenwood - August 14, 2018

We recently wrote a post about how ‘Our new website is 77% faster, and we’re not done yet‘, and as the title suggested there was more to come.  We had redesigned and launched our new website but despite having made significant steps forward in efficiency, we hadn’t initially done a lot of the optimisation that we wanted to due to lack of time.

In the week since launch we’ve been busy trying to squeeze every bit of fat out of the site that we can find. The result is that with virtually no degradation in appearance, we’ve reduced the size of our homepage to 177kb (a further 60% reduction), reduced our carbon emissions to a faint puff at 0.21 grams per page view and reduced our homepage load time to just under half a second according to GT Metrix.

The gains that we made in this sprint came mainly from image optimisation and the removal of jQuery as follows:

Image optimisation

Needless to say, images make up a big proportion of our page weight and they presented the biggest and easiest opportunities for improvement.  Although we had designed the website to have small images and had compressed the images prior to launch, there were still some opportunities to reduce file sizes.

The first was the implementation of the WebP file format instead of JPEG.  The more efficient file format combined with lossy instead of lossless compression allowed us to shave a couple of hundred kilobytes off our homepage.  Yes, the images would have been a little bit crisper if we had used lossless compression, but after straining our eyes to see the difference we figured that we were splitting hairs and so went with the more efficient option.  It is worth noting that WebP is not supported by all browsers and so it does fallback to the original file formats (JPEG or PNG) in Firefox, Safari and IE, making the page size a big bigger in those browsers but it still squeezes in just under 200kb.

The next thing that we did was remove an image of our carbon calculator and replace it with an actual carbon calculator form so that people can use the tool directly from our homepage.  This enhanced functionality allowed us to shave another 30kb off the page because the new version is just HTML and CSS, with the addition of a small SVG wind turbine illustration.

That brings me onto the next area of image optimisation, which was to replace some JPEG and PNG images with SVG files, which as vector files are highly efficient while always appearing crisp. The use of SVG files also helped us to bypass the issue that some small image files were actually larger after passing through the native WordPress image optimisation as it isn’t very good at handling images that are already extremely small.  WordPress doesn’t optimise SVG files and so the use of SVG’s is an easy way to bypass this problem.  One caution with the use of SVG files is that they allow javascript to be included in their markup, which can present a security issue if you are allowing file uploads from external sources.  It isn’t an issue in this case as we have full control over the files, but worth noting.

Removal of jQuery

Josh was convinced that we should be able to remove jQuery from the site on the basis that we were not doing anything that actually justified its existence. Sure, leaving it there would have been a lot easier, but removing it would push our entire homepage under 200kb, less than the size of the hero image on our old homepage.  Our quest for efficiency had become something of an obsession and we couldn’t resist the challenge.

Removing jQuery meant finding workarounds for the things that were already using it.  The first related to our forms, which used jQuery not because it added any value but simply because they were implement using Gravity Forms.  As a solution we wrote a custom form implementation so we could remove the frontend dependency on Gravity.  We also had a few components within the theme itself that had dependencies on jQuery but which could actually be implemented without it, and so it was a case of going through each of these one by one and rewriting to avoid the use of jQuery.

We also made a few other micro optimisations such as the removal of the sticky header, which we didn’t feel was adding much value to the user. When all of this was taken into account, our homepage was well under 200kb. Mission accomplished!

Although we talk here about the homepage, some optimisation applies to the site globally and we will action specific optimisations on other pages as soon as we get the time. Our website will continue to evolve as we tweak our design and experiment with new ways to improve efficiency.  We’ll post any interesting developments here on the blog.