Five things to do to your WordPress site to improve your Core Web Vitals scores

In May this year, Google will be introducing changes to the way they score web pages in order to determine how they should display in their search results. Named “Core Web Vitals” (CWV), the changes focus on the way that web pages load for end users, taking into account speed of loading, how soon a user can interact with pages, and how much pages alter visually as content loads (to learn more about the specifics of the CWV update, take a look at this webinar I recently helped deliver on the subject).

All of which means it’s more important than ever that your site delivers high levels of performance, which may require updates to various elements of your content, platform and infrastructure.

If you run a website using the WordPress Content Management System (CMS) and do not have a development team to help you, then you may not have as much control over precisely what improvements you can make – however, there are approaches and plugins available which will help you increase your scores and get your site ready for the May 2021 CWV deadline.

How can I find out my Core Web Vitals score?

Google provides all of the tools you need in order to check your current scores, and continue to check these scores over time as you implement any improvements. It’s also a good idea to keep on checking your scores as you create new content or make any other significant updates, to make sure that you quickly notice any changes and are able to implement further improvements if necessary.

To check your score, visit the Google PageSpeed Insights tool, type in your website address and click “Analyze” and, after a couple of minutes, you will be presented with a report which will contain an analysis of your CWV status. Do this a few times for different key pages on your site so that you can get an idea of performance across those areas that your visitors will be accessing most often.

If any of your pages are scoring in the red or orange ranges for the Core Web Vitals data, then here are some immediate, straightforward things you can try to improve them.

Five steps to improve your Core Web Vitals scores

1. Check your caching

In computing, caching means keeping copies of files like HTML, images, JavaScript and CSS, so that they can be sent or used by your visitors as quickly as possible. There are broadly two kinds of cache available for web sites: server caches and browser caches.

Browser caches are files that have been downloaded by your visitor’s browser and stored locally on each person’s machine. This means that, if a file is needed by the web page being viewed that has previously been downloaded and cached, the browser will load it from there instead of downloading it again over the web. This saves the user bandwidth but, more importantly, means that the web page will load quicker.

Server caches are like pre-built versions of each web site page which are temporarily stored by the web server (or other online cloud services) in order to respond to user requests as quickly as possible. Each time a page is requested from your web site, your host may have to look up data in a database, pull out template details, and run some coding logic in order to build up the content of a page before sending it back to the visitor. By storing the output of this process as a single file, your host can just return the contents of the file each time, instead of doing the expensive building process again and again.

For WordPress there are a number of plugins which handle both types of cache, including:

• WP Super Cache
• WP Rocket
• Hummingbird

Most caching plugins have quite sophisticated settings which will allow you to tailor a specific caching strategy to match your site if you wish. However, just installing a plugin and using the default settings should give you an instant boost in speed.

2. Optimise images and lazyload

Images can be a real bottleneck which it comes to page loading speed. Your website is your shop window and so it’s great to have high-quality images on there to show your brand and your products in the best possible light. However, high-quality images can come at a high cost in terms of download speed, and so optimising them to have as small a file size as possible is important to making sure your web pages appear completely rendered as soon as possible.

There are two easy ways that this can be improved. The first is to install an automatic image optimiser plugin (for example ShortPixel, Smush and Jetpack), which will take each image you upload and resize and recompress in order to make it smaller. On the whole, these plugins work really well based on quality settings that you can choose in the plugin settings, but they do offer a one-size-fits-all approach which may not be optimum for every image on your site.

The second step is to use a “lazy loading” plugin, which can be activated on the three tools mentioned above (as well as through a number of other tools on the market). This will stop images from being requested by the browser until they are needed, allowing all the bandwidth to be used to download the things that are currently on the screen, rather than items that are further down the page and not yet visible to the user. This kind of plugin should just be something that you can install and forget about and it will just handle the lazy loading for you without any fuss.

There is another level to the image optimisation route which might also be worthwhile but, depending on your site, might be a more expensive option: cloud-based image optimisation. There are plugins available such as Cloudinary which use online services to store and optimise your images (and video) and serve them back to your visitors. These are really sophisticated services which analyse the images and work out the best optimisation approach, and also information like the size of the user’s browser window, in order to speed things up as much as possible. These services are highly recommended if high-quality imagery is key to your website experience, but they do come at a price.

3. Defer Javascript

A lot of existing plugins in WordPress will load custom JavaScript in order to provide interactivity to your web site, but it is very rare that this is needed until the entire page has loaded. However, sometimes plugin authors will ask WordPress to load their JavaScript right at the top of the page and, since web browsers read the web page code from the top down and execute things in the order they find them, it may be that your web pages are taking time to download this JavaScript far earlier than is needed, using up time and bandwidth that could be used for more immediate priorities (like getting the First Contentful Paint completed – one of the key Core Web Vitals page experience signals).

Although there isn’t too much you can do about the plugins that are doing this, there are additional tools you can install, such as WP Asset Clean Up and ASync JavaScript, which will try to detect when this is happening and move certain resources, like JavaScript, to more efficient places in the code order.

There is a potential problem with this, as certain plugins may have been written in a way that means they could break if resources are moved, so if you install tools like these then you will need to test out the functionality of your site afterwards to make sure that everything is still working as you expect. But it’s certainly recommended that you try this, even as an experiment, as the improvements can be very worthwhile.

4. Remove animations

Animations on web pages can be really visually enticing, but it’s important to minimise their use if you can. They can affect your Cumulative Layout Shift (CLS) score – another key page experience signal for Google – and can also take up quite a lot of processing power on your visitors’ devices (especially mobile devices), meaning that your page might not provide as good a user experience as you would like or, worse still, might actually prevent your visitors from interacting with you page for a period of time while the animations are performed.

If you are using a theme that gives you the ability to choose when to implement animation, take a look at what you might be able to switch off in order to improve your page performance. If you are using a theme which doesn’t give you this option, then take a look and see if there are alternative themes that you could use. There are a lot of “high performance” themes out there such as Astra and GeneratePress, as well as flexible generators like Elementor which can give you the ability to update your site look and feel, while also improving performance (and your CWV scores!).

5. Consider switching your hosting

Your hosting provider can help to ensure that your site is being delivered to your visitors as quickly as possible, so it’s an important aspect that you should not scrimp on. The faster your host can serve your pages and content, the quicker the First Contentful Paint will be completed.

Your hosting choice will affect the initial loading of the HTML code containing the text content for your site, as well as the loading of other content like your styling or images – and by using a specialist WordPress hosting service like WP Engine or WordPress VIP you will go a long way to ensuring that all of your content arrives at your visitors browsers as quickly as possible.

Specialist WordPress hosts know WordPress inside out, and their infrastructure is built to directly support the way that WordPress works. Not only does this have the potential to improve your CWV scores, you will also gain the benefit of specialist technical support.

Anything else?

Well, the first thing before you try any of these suggestions is to back up your web site. There is always a risk with installing any plugins (not just the ones mentioned in this article) that they might break something you can’t then undo, and you will need to revert to the backup. Your hosting provider should be able to help advise you on the best way to do this, especially if you are using one of the WordPress specialists.

Another thing you should look at is the plugins you already have installed. Are there any you no longer need which could be removed? Are there any that are causing particular poor scores on your Insights test? Try turning off plugins one-by-one and check your Insights score again each time. If you get a real boost after switching one of them off, consider leaving it switched off permanently, or take a look in the WordPress plugin store for alternatives that might work better.

The main thing to remember is to start looking at doing something to improve your scores now, so that you are ready for May when Google brings in the new rules. The added benefit to starting this now is that any work you do now to improve your scores will give you an immediate boost to your SEO potential, as well as create a faster and more enjoyable user experience for those visiting your pages.

And if you’re looking for some guidance to get you started on your journey, talk to a member of our team today. Having delivered performance improvements for clients such as Dexerto – whose WP Engine-powered site attracts millions of users a month – we can help you identify quick wins to improve your scores alongside longer-term development plans, to maintain your search visibility, organic traffic and online conversions.