Website Speed Optimisation – A look closer to home

US Digital Website Homepage - Speed Optimisation

One of the ongoing projects we’ve been tasked with since starting here at Unsworth Sugden is to refactor the existing USdigital website to make it more maintainable and to optimise both the website speed and the perceived loading time.

The results speak for themselves

Google PageSpeed Insights – Old Website

Website Speed Optimisation - Old usDigital

Google PageSpeed Insights – New Website

Website Speed Optimisation - New usDigital

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.

Old website Page Speed, size and HTTP requests

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.

See the Pen
Duplicate FontAwesome Loading
by andyUSDigital (@andyusdigital)
on CodePen.

Chrome Developer Tools - Waterfall showing duplicate download

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.

Old website Page Speed, size and HTTP requests

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.