Benchmarking our website speed

Over the last 6 months, Google has updated a number of their tools including their Search Algorithms (the most recent algorithm update in October) and since our last look at site speed Lighthouse 3.0 has also been rolled out. With the advent of Lighthouse 3.0 came a few tweaks to speed scoring so we’ll benchmark again before this process and then after.

Google PageSpeed Insights

Mobile:

Desktop: 

Chrome Developer Tools – Lighthouse Report – Simulated Slow 4G

Mobile: 

Desktop:

Opportunities to improve website speed

As you can see, the goalposts have shifted over the last 6 months, and quite rightly so! Let’s have a look at our top opportunities:

Our top two performance opportunities are to ‘Serve images in next-gen formats‘ and to ‘defer offscreen images‘.

Another item that caught my eye is our current homepage size: 1.8MB. While this isn’t huge, it is quite significant and every byte contributes to the overall loading time of a page.

So, our goals are clear: serve images in next-gen formats (WebP) and decrease the filesize of our pages. In a nutshell: optimise every image even more.

Some more things we did to improve our website speed

Unfortunately, WordPress does not support WebP images out of the box, yet. Part of this is probably because not all browsers are compatible with WebP yet (see CanIUse WebP for more information) and as such it will still need a legacy format counterpart such as .png or .jpg. While WordPress will generate different image sizes for you when you upload an image, currently it does not do any conversions on the image. To fully support WebP images it will need to take the uploaded file, check to see if it’s a WebP, convert it to .jpg or .png if it is, or convert it to a WebP if not. Then it will need to process the thumbnail sizes on each of the two versions of the image. This potentially means you could end up with 10 different images stored on your server for one image upload.

One of the image management plugins we use is EWWW Image Optimiser which does support webp images. In this case, it was as simple as configuring the plugin and re-optimising all of the images on the site. Obviously not all themes are going to be as easy as this to convert over, but for the most part there shouldn’t be too much trouble.

Our improved website speed results

Our page size is now 1.5MB. If you have read our first optimisation post, you will have noticed that we have reduced our homepage size by a whopping 6.8MB! When we first started working on this, the homepage size was an outrageous 7.3MB!

We are approaching the crux now in terms of resources spent vs. performance gain. While there is more that can be done to improve our website performance, ultimately we do not have infinite resource to spend on performance optimisation. There are whole departments of people that work on optimisation every day for companies like Google, Amazon and Facebook and even they manage to find something to do every day.

The benefits of performance on SEO

Once these changes have bedded in and settled down, we’ll provide an update on how these speed optimisations have affected our SERP rankings.

The post Website Speed Improvements – Optimising Images & Reducing Download Size appeared first on USdigital.

The results speak for themselves

Google PageSpeed Insights – Old Website

Google PageSpeed Insights – New Website

There is still some way to go, and there is always something to be done to improve loading times. Our main objective is complete, in that the website is now more maintainable for our team and the loading speed has improved dramatically. There is a lot more that can be done, and there are always micro-optimisations to be implemented but they are no longer a business critical concern.

As our SEO team learnt from Brighton SEO 2019, users are expecting a faster experience when they are online. An Average Speed Index of 3 seconds with fewer than 50 HTTP requests is best practice. We were miles out.

The Background

Our previous website used WordPress as the CMS. Due to time constraints the Theme used was a purchased theme with lots of customisable options and features. In order to get the website looking and functioning exactly as was needed, lots of Plugins were also used.

The website looked great and everybody was happy with the general design and functionality of the website.

The downside of using purchased Themes and Plugins

While a lot of themes that are available are great, very well designed and can be really customised without much knowledge of writing HTML, CSS, JavaScript or PHP, one of the huge downsides is that as a web developer you lose the control over what is being loaded, used and is needed.

As an example, you could install two different Plugins:

One plugin, we’ll call this Plugin “EasyButtonIcons“, to add buttons easily to your Posts and Pages. Also this plugin even has the awesome feature of making a Font Awesome icon a button.

The other Plugin, we’ll call this Plugin “EasySocialIcons“, to easily add Social icons to your Posts and Pages.

Great! We’ve now got the ability to easily add buttons with icons to our Posts and Pages and also to include links to our Social Media anywhere on the page.

Both of these Plugins use Font Awesome for their icons.

The “EasyButtonIcons” developer has followed the Font Awesome docs and called the stylesheet from https://use.fontawesome.com/releases/v5.8.1/css/all.css which includes the stylesheet into the page.

The “EasySocialIcons” developer has decided to use a CDN for Font Awesome and called the stylesheet from https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.css which includes the stylesheet into the page.

The actual content of these two stylesheets is identical. However, they are both being included and both being downloaded as both Plugins must work without depending on the other. To do that both must download their own assets. This is just one simplified example of why using Plugins and Themes can have an adverse affect on website speed.

Now consider that all Themes and Plugins will have their own dependancies and assets that they need in order to function and you could be left with a tangled mess of HTTP requests and a huge page download size.

Are all Plugins and Themes bad?

No. It’s like your eating habits. You just need to make informed decisions and know that behind all of the useful functionality, there is a price to pay. This isn’t to say that using Themes and Plugins are a huge no-no, however, in doing so you should be aware that they may increase your page loading time.

Some things we did to improve our website speed

One of the first things was to completely understand exactly what Plugins were doing what. Then to look at the functionality of the Plugins and implement another way of providing the same functionality. Once that was done, it meant we could deactivate those Plugins. As a result it meant we didn’t need to grab all of their dependancies either.

We then put our focus on images and trying to be more responsible with how much we are expecting our users to download.

Our SEO results

Once the dust has settled, we’ll provide an update on how these speed optimisations have affected our SERP rankings. We will continue to optimise our Page Speed and keep you updated with the results.

The post Website Speed Optimisation – A look closer to home appeared first on USdigital.