How to Improve Core Web Vitals for WordPress
In this post we talk about how to improve Core Web Vitals for WordPress – what Google’s Core Web Vitals metric means, where to find your own site performance and recommend a stack of performance enhancing software that works well together and is guaranteed to produce the improvements you need.
What are Core Web Vitals?
Google recommend web sites to their customers and those customers want two things. Firstly they want the web site to be relevant and secondly they want it to render quickly in the browser. Core Web Vitals are concerned with the second of these metrics. Essentially they produce a score by analysing three sets of figures.
- LCP – Largest Contentful Paint (Load Speed)
- FID – First Input Delay (Interactivity)
- CLS – Cumulative Layout Shift (Layout Stability)
These are the things that people care about when waiting for a web page to render – How long it takes to deliver content to the screen, how long before it becomes interactive and does the layout shift around as it loads.
Pages with a good Core Web Vitals score have an advantage in the Google Rankings. So it follows that enhancing the speed of your site is a good thing to do!
How do you measure Core Web Vitals
There are a few free tools that are excellent for this purpose.
Of the three, we favour GTMetrix. It’s well laid out and you can test one domain per day for free. Paid accounts are available if you need more.
How to Improve Core Web Vitals for WordPress
Essentially any action that reduces the size of the page and the quantity of its components will improve Core Web Vitals. Much of this can be done without specialised software, for example outputting images in sensible dimensions from Photoshop. We generally export our banner images at 1980 pixels width.
The problem is many WordPress themes, especially those that involve page builders generate masses of code in the form of HTML, CSS and JavaScript, all of which has to be loaded for the page to render. Much of this code is loaded regardless of whether or not the plugin is active on the page which is massively redundant.
We used our Helter Skelter Studios site as a guinea pig. The site handles all of our commercial photography and video work and it needed a helping hand because of the sheer volume of images and video on the site. It is hosted on Siteground, uses SG Optimiser to boost performance and the theme is Semplice. This measurement was taken at thevtime this article was written. Nothing on the site was any different from any normal day.
This is what it scored before we optimised. F for fail.
Performance was officially poor, LCP was 4.1 seconds. This is mostly a gallery on the front page showing a variety of projects that we’ve been involved with in the last couple of years. Like most photographers we have tons of images.
Image Compression
So the first stop is Image Compression. Even a correctly sized image can be reduced without noticeable loss of quality by around 45%.
We use Imagify, despite it being a premium plugin, we think it does a better job than any of the other plugins we’ve tested (Smush and WP Smush). If you’re a photographer or have loads of images on your site, allocate a few hours for Imagify to work its magic. It will also optimise any new images you upload.
Now for the complicated bit. We implemented a stack of plugins with occasionally overlapping functionality. It’s necessary to avoid these overlaps and to test and test again to make sure the site isn’t breaking.
Caching Solutions
Caching solutions basically put together a version of your site’s html output and stores it in a cache, saving the time it takes for WordPress to pull all the elements together and build the HTML for a page.
WP Rocket is, in my opinion the best Performance enhancing plugin available. It covers a multitude of functions including Page Caching, Gzip Compression, Scrip Minification, Cache Preloading, Lazy loading, Database Optimisation, Content Deliver Network and best of all is it’s compatible with the other plugins I’ve used in the stack, including Imagify.
If you are hosting on Siteground, you’ll have access to Siteground’s SG Optimiser plugin. Some people believe this to be equivalent to WP Rocket. It has most of the functionality but I have to say my experience has been that using the CSS and Javascript compression facilities on SG Optimiser can break themes that WP Rocket doesn’t. For this reason, I use SG Optimiser for caching and WP Rocket for everything else. You can see the difference in the images in their article.
Its worth noting here that SG Optimiser will turn off the overlapping functions automatically if it detects that WP Rocket has been installed.
Well, this picture, taken after configuring WP Rocket, speaks for itself. LCP is half what it was, structure is improved and performance enhanced from 36% to 60%. Best of all, we are in the amber, no longer a failing website! But we are still failing on LCP, so we need to do more.
Performance Enhancing Plugin
We use PerfMatters alongside WP Rocket. The two work well together and PerfMatters does some stuff that WPRocket doesn’t. Be careful again not to duplicate functionality so clear any caches you have and test as you go. It will take time but it’s worth it.
What does it do? It disable scripts that you don’t need on your site, getting rid of a substantial amount of bloat on the page. For example, Contact Form 7 loads itself in the background on every page of your site, PerfMatters helps you restrict it to the pages where you actually have a form. It also moves scripts from places like Google to your server so that it reduces calls out to other domains.
Best of all – it improves my performance by 19% and shaves 1.1 seconds off my LCP.
Superb.
Finally I removed the most bloated plugin I have. Jetpack.
Remove Jetpack
Jetpack has evolved into a beast of plugin, offering lots of functionality that you can get elsewhere in smaller, leaner codebases. It is nearly half the size of WordPress itself! I used to use years ago it for its daily viewing graph and it hung around getting bigger and bigger. No more.
And that gets me to a B rating, 81% performance and 1.1 second LCP.
I’m happy with this. Now let me deal with that huge video on the front page!
Conclusion: Improve Core Web Vitals for WordPress
Speed is very important for SEO these days.
For a Site like ours, using the Divi theme I recommend:
- Speed Measurement: GT Metrix
- Image Compression – Imagify
- Caching solution – WP Rocket
- Performance Enhancing Plugin – PerfMatters
- Font Localisation – OMGF
These suggestions are made in the context of too many years spent poring over web sites and their workings. This stack of plugins has been very successful for Helter Skelter Studios, Helter Skelter Design and Chris Wright Photography. We’re now in the process of rolling it out to our clients.
The detailed settings for some of these plugins are specific to the web site which is why I haven’t gone through those in depth, You may find different settings for your own. If you’re not confident with this kind of technology, you can’t actually break anything with this approach. You can always disable the plugin if it all goes horribly wrong!
The thing most likely to cause a problem is the script and stylesheet minification and anything that defers script processing. There are a lot of dependencies in modern themes and it’s very easy to trip up.
Remember that when you are logged in as administrator making these changes, a lot of them won’t apply to the admin view. So check your site in a different browser. Once you have caching enabled, remember to flush it before you test the effect of the next change. Step slowly through the options and test every one of them.
Good luck, there are plenty of detailed tutorials for these plugins on the internet and remember, we’re here to help if you need it!
Update: July 2021
Elegant themes have announced a key upgrade to the Divi Theme focusing on performance. Check out our Divi performance tests before and after upgrading.
Affiliate Disclaimer – Some of the links in this article are to companies we have are affiliated with. I only promote products that I use regularly on my own websites and those of our clients. If you purchase through any of my affiliate links then a big Thank You! Your support is really appreciated and it helps me spend less time working for others and more time producing useful content.
Growing a business? We’ll deliver Insight direct to your inbox.
Once a month actionable tips to put your website front and centre..
