ShareAh… The difficult third album. So far, we’ve improved the load time of your site through image optimisation and perhaps even shaved off a few bonus seconds by preloading key requests. Hopefully, you’ve already recorded faster load times, and maybe even lower bounce rates or higher rankings in search engines.
However, Google Pagespeed Insights may still be suggesting ways to further improve your site. I’m going to go out on a limb and assume that a lot of these will mention two things:
- CSS
- JavaScript
This is where things get a little tricky. Before we get into details, let’s remind ourselves why we’re here.
Core Web Vitals are coming
In May 2021, Google will start rolling out an update that aims to measure real-world speed and user experience metrics. The aim is to ensure that visitors get the best possible experience from any site that they visit, and the metrics that are key to the whole process are:
- Largest Contentful Paint (LCP) – This marks the time at which the largest contentful element is painted.
- First Input Delay (FID) – How long a page takes to respond to clicks, scrolls or input.
- Cumulative Layout Shift (CLS) – Measures the movement of visible elements within the viewport.
Pages that are heavy with JavaScript and CSS are likely to demonstrate a higher result for the Largest Contentful Paint (LCP) metric, which could result in the page not passing the Core Web Vitals test. That doesn’t mean that you can just remove the offending CSS and JavaScript though. It’s a little trickier than that. Why do you think I left this bit until the last part of the series? Let’s start with the basics.
Are you minifying?
CSS and JavaScript files often contain blank spaces, new lines and unnecessary characters that can be removed through the process of minifying. While the minified version of the code still contains the same instructions, it is much faster to process than unminified code. This small tweak can help to decrease load times, which should help to reduce your Largest Contentful Paint.
On WordPress sites, CSS & JavaScript minification can be achieved using a plugin such as Autoptimize, which offers strong results with only a few settings needing to be applied. Sometimes, minifying can be a great start to unlocking faster load times, but there are some caveats to what you’ll be able to achieve. WordPress plugins often include their own CSS and JavaScript files that cannot be minified, so you may not be able to achieve a “clean sweep”.
Eliminate render blocking resources
And so, we arrive here, where we were inevitably heading. Anyone who has run their site through Pagespeed Insights will no doubt have come across this recommendation on multiple occasions. We all do at some point…
This is where calm waters start to turn a little murky, as your ability to eliminate render blocking resources will be largely dependant on the level of control that you have over the files in question. As mentioned previously, some of these files may sit within plugins, which makes them hard to affect. Alternatively, code that is marked as render blocking for one page might be used on a different page. Finally, these pieces of code may be controlled by something external to the codebase e.g. Google Tag Manager.
All of this can add up to a time-consuming task that results in a relatively small saving.
Is there another way?
As with all problems, there is a common suggestion for fixing this issue on a WordPress site, but the application and results will largely depend on how your site is set up, so results cannot be guaranteed.
Using a combination of the Autoptimize and Async JavaScript plugins, it is possible to allow browsers to download your JavaScript files while still being able to process HTML, which can help websites to render more quickly. However, this is not a “one size fits all” solution, so the best bet will always be to contact your dev team to better understand the files that you’re working with and the effect that they’re having on load times.
That’s all folks…
There you have it. Three articles that could help you to improve the speed of your website and pass the upcoming Core Web Vitals update, as well as steal a march on your search competitors. If you’re feeling brave, and you haven’t already started the process, why not see how much you can achieve using all the advice from this series?
Core Web Vitals Tips for WordPress – Part 1: Images >
Core Web Vitals Tips for WordPress – Part 2: Preloading Key Requests >
Remember, the issues that we’ve explored won’t necessarily apply to every website, so your first port of call should always be a thorough analysis of your own site so that you can better understand where (and how) to focus your efforts.
If you would like help with this process, feel free to get in contact with our team on 0845 450 2086 and we can help you get started, with plenty of time to spare until May.
I’m off to hide from the Warner Bros lawyers…
