Hey there WordPress pals! Is your site feeling a bit sluggish lately? I hear you. With Google’s Core Web Vitals update, speed is of the essence. And let’s be honest – slow load times are no fun for anyone!
Don’t sweat it though. With some tiny tweaks and tricks, you can get your site up to speed in no time. Core Web Vitals focus on three key areas – loading performance, interactivity, and visual stability.
In this handy dandy guide, I’ll walk you through simple, actionable tips to optimize those metrics and improve your site’s user experience. The best part? Most of these require no coding or technical wizardry on your part. Just a bit of strategic know-how.
So, what do you say? Ready to make your site fast, nimble, and frustration-free? Stick with me and you’ll be impressing visitors and boosting your rankings in no time. Let’s do this!
Measuring the Core Web Vitals.
Core Web Vitals are important factors that affect your website’s user experience. Google has announced that they will be using these factors as ranking signals in their search algorithm starting in May 2021 (Source: Search Engine Land).
That means if you want your website to rank well in Google, you need to pay attention to your Core Web Vitals.
There are three main factors that make up Core Web Vitals: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). In this article, we’re going to give you seven tips on how to improve each of these factors on your WordPress site.
Understanding a Website Core Web Vitals
On May 2020, Google introduced Core Web Vitals, a list of metrics Google finds crucial for the UX of a website. Optimizing these metrics is essential for successful SEO and ranking performance. (Source: Forbes)
The Core Web Vitals are a set of three factors that contribute to the user experience of a website. They are:
- Largest Contentful Paint (LCP): measures how long it takes for the content of a page to be displayed to the user.
- First Input Delay (FID): Taking into account browser requests to a website hosting server, FID measures how long it takes for a browser to start rendering or interpreting a webpage after the server request.
- Cumulative Layout Shift (CLS): measures how much unexpected layout shift occurs during the page rendering or loading.
These three metrics were added to Google’s ranking algorithm in 2021, meaning your website should have fixed these metrics by now. If not, then this article is more important than ever for you.
We won’t dwell too long on the technical details of Core Web Vitals now, because our focus is on helping you make sure your WordPress site loads fast and its Core Web Vitals metrics are as good as they can be.
But to do that, we first need to know where your website CWVs are. So let’s look at how you can measure the Core Web Vitals of your WordPress website.
How to measure the Core web Vitals of your WordPress website
To assess your website’s on-page experience, which is crucial for ranking well in search results, let’s look at how you can check your Core Web Vitals Score.
Note: It’s important to consider that there will be differences in speed and accuracy between results for mobile and desktop.
To really understand the results, you need to know what the acceptable parameters are for these “Core Web Vitals Signals”
The performance of a website Core Web Vitals parameter should be:
- LCP – under 2.5 seconds
- FID – under 100 milliseconds
- CLS – under 0.1
There you go, now you know that any results above those parameters are something you need to work on to improve the on-page experience of your WordPress website.
Note: If the resulting parameters are under the given threshold, then the website is in good shape, and you don’t need to worry about those aspects.
Now let’s see what tools you have available to measure your website Core Web Vitals.
Best tools to measure your website Core web Vitals
There are many tools, but we’ve divided them into two categories. We’ve distinguished between tools that are provided free of charge by Google and third-party tools, some of which are free and some of which aren’t.
Let’s first present to you the free ones, which turn out to be our favourites. Not because they’re free, but because they’re more reliable in terms of realistic results.
Core Web Vitals measuring tools provided by Google
- Google Search Console.
- PageSpeed Insights.
- Lighthouse.
- Chrome DevTools.
- Chrome UX Report.
Each of these CWV measuring tools will allow you to know how your website is doing in relation to each of the CWV metrics. Google’s own tools are usually the most accurate and up to date. It’s a bit of a hassle to set up, but it’s definitely worth it in the end.
Now let’s see how you can access them and how to use them properly.
How to use Google Search Console to see the performance of your Core Web Vitals
- First, you need to connect your website to Google Search Console. If you haven’t done that already, follow these steps:
Sign in with your Google account here https://search.google.com/search-console/about. - Type in your website address
- Accept the terms and conditions
- Verify your ownership of the website
Once you’ve completed all of those steps, you’ll be able to access the search console for your website. From there, click on “Core Web Vitals” from the left sidebar menu:
These CWV metrics, like many other metrics you see in Google Search Console, come from two days before the current day. For example, today is 10 December 2022, which means that the results I see there are from 8 December 2022.
The results are divided into two blocks: Mobile and Desktop. You should start with the Mobile metrics because it gives you a broad overview of your website’s performance.
When you start working on your Web Core Vitals, you may not see any data there for a few weeks. This is because Search Console must collect information, evaluate it and then present it to you
Of course, this is related to the amount of traffic your website receives. This means that if your website isn’t generating any traffic at all, it may take longer than expected.
In this case, you need a tool that’s more real-time oriented.
Which moves us to the next tool, PageSpeed Insides.
How to use Google lighthouse from Chrome DevTools
- 1. Open the URL that you want to test in Google Chrome.
- 2. Press F12 or Ctrl+Shift+I to open the Developer Tools panel.
- 3. Click on the Audit tab.
- 4. Make sure that only Performance is checked and click Run Audits.
- 5. Wait for the audit to complete and then check out the results!
Yes, you don’t need to go to another website, it is right on Google Chrome. but there is catch that few people mention when they write about this tool.
💡 You better use an incognito window to test the website.
The main reason is that your own browsing data could skew the results of the performance audit.
Another important reason is that you may have a Chrome extension running. These extensions running in the background can delay the measurement or even cause errors that prevent the tool from running properly.
So open an incognito window, navigate to the URL that you want to test, and then follow the steps above.
And the Google Lighthouse Tool is our first tool when we subject a website to a technical SEO audit. No, it’s not the only one we use, but it’s the first.
For those who want to look more closely the Core Web Vitals, Chrome offers a slightly more technical measurement tool than Lighthouse. That’s the next tool we’ll look at: Chrome DevTools.
Using Chrome DevTools to measure the Core Web Vitals
Chrome DevTools is a collection of in-browser tools. One of these tools is the performance tab. The performance tab analyzes page activity while the page loads and displays it in tight detail.
It not only analyzes but also monitors and calculates specific metrics, including network, rendering, painting and scripting activity. The Performance Tab also shows Core Web Vitals for your web pages to offer deep insight into the numbers that matter to you most.
How can you find the Performance Tab?
That’s another 1,2,3 process:
Step one: Press F12 while on the page you want to analyse.
Step two: Click on the “Performance” tab as shown in the picture.
Step three: Press Ctrl + Shift + E. The page will reload, and a series of graphs will be displayed.
Measuring Core Web Vitals Using Chrome UX Report
The Chrome User Experience Report (also known as the Chrome UX Report or CrUX for short) is a dataset that reflects real-world user experiences with popular sites on the internet.
CrUX is the data visualization of the Web Vitals program. User-centric Core Web Vitals metrics are measured and compiled in the dataset.
CrUX data is collected from real browsers around a specific browser type, determined by mandatory option settings. Dimensions and metrics are gathered that allow site owners to see how their users experience their site.
How to use CrUX?
There are two ways to use CrUX: as a Chrome extension or as a npm package.
If you want to use CrUX as a Chrome extension, you can install it from the Chrome Web Store. Once installed, the extension will add a new tab to Chrome DevTools, called “CrUX”. This tab will allow you to see all of the data that CrUX has collected for your website.
If you want to use CrUX as a npm package, you can install it using the following command:
npm install @google/crux
Once installed, you can use the CrUX package in your own JavaScript code.
Yeah it is a more complex subject than that, but you could use it to collect user experience data from your website.
💡 Be smart: To make your life a lot easier when using this tool, use the chrome extension
Measuring Core Web Vitals Using Chrome UX Report
The Chrome User Experience Report (also known as the Chrome UX Report or CrUX for short) is a dataset that reflects real-world user experiences with popular sites on the internet.
CrUX is the data visualization of the Web Vitals program. User-centric Core Web Vitals metrics are measured and compiled in the dataset.
CrUX data is collected from real browsers around a specific browser type, determined by mandatory option settings. Dimensions and metrics are gathered that allow site owners to see how their users experience their site.
How to use CrUX?
There are two ways to use CrUX: as a Chrome extension or as a npm package.
If you want to use CrUX as a Chrome extension, you can install it from the Chrome Web Store. Once installed, the extension will add a new tab to Chrome DevTools, called “CrUX”. This tab will allow you to see all of the data that CrUX has collected for your website.
If you want to use CrUX as a npm package, you can install it using the following command:
npm install @google/crux
Once installed, you can use the CrUX package in your own JavaScript code.
Yeah it is a more complex subject than that, but you could use it to collect user experience data from your website.
💡 Be smart: To make your life a lot easier when using this tool, use the chrome extension Web Vitals.
Now that you know the Core Web Vitals tools that Google offers for free, let’s see what other options we’ve.
Third party Core Web Vitals measuring tools
Here you’ve a handpicked selection of 7 important tools for measuring Core Web Vitas that aren’t provided by Google but are all worth a try.
- Thruuu.
- Reddico SERP Speed.
- Layout Shift GIF Generator.
- PageSpeed Compare.
- Waterfaller.
- Core Web Vitals measurement using Google Sheets.
- GTmetrix performance report.
Now lets see a fast description of each of them and how to use them.
Thruuu
Thruuu is a web performance tool that allows you to measure Core Web Vitals and other important metrics. Simply enter a URL and select the metric you want to measure. Thruuu will then provide you with a report on the performance of that page.
Reddico SERP Speed
Reddico’s SERP Speed tool allows you to measure the loading speed of your pages in Google search results. Simply enter a URL and select the metric you want to measure. Reddico will then provide you with a report on the loading speed of that page in Google search results.
Layout Shift GIF Generator
The Layout Shift GIF Generator is a tool that allows you to generate GIFs of your pages’ layout shifts. Simply enter a URL and select the metric you want to measure. The Layout Shift GIF Generator will then provide you with a report on the layout shift of that page.
PageSpeed Compare
PageSpeed Compare is a tool that allows you to compare the loading speed of your pages with other pages on the web. Simply enter a URL and select the metric you want to measure. PageSpeed Compare will then provide you with a report comparing the loading speed of that page with other pages.
Waterfaller
Waterfaller is a tool that allows you to measure the loading time of your pages in a waterfall chart. Simply enter a URL and select the metric you want to measure. Waterfaller will then provide you with a report on the loading time of that page in a waterfall chart.
Core Web Vitals measurement using Google Sheets
This Google Sheets template allows you to measure the Core Web Vitals of your pages. Simply enter a URL and select the metric you want to measure. The template will then provide you with a report on the Core Web Vital of that page.
GTmetrix performance report
GTmetrix’s performance report allows you to measure the loading speed of your pages. Simply enter a URL and select the metric you want to measure. GTmetrix will then provide you with a report on the loading speed of that page.
Improving the Core Web Vitals manually
In this second entrance we will see some of the main techniques for improving the Core Web Vitals.
Improving the Largest Contentful Paint (LCP)
The Largest Contentful Paint (LCP) measures how long it takes for the largest content element on a page to load. To improve your LCP, you can:
- Reduce the size of your largest content element.
- Reduce the number of server requests required to load your webpage content.
- Preload or prefetch resources required to render your content (JS, CSS, or third-party domains).
- Use a CDN to deliver your content with the version of your website that’s closest to the location of the web visitor.
Improving the First Input Delay (FID)
The First Input Delay (FID) measures how long it takes for a page to respond to user input. To improve your FID, you can:
- Reduce the number of JavaScript files used by your pages.
- Reduce the size of your JavaScript files.
- Load JavaScript asynchronously or defer loading until after the page has loaded.
Improving the Cumulative Layout Shift (CLS)
The Cumulative Layout Shift (CLS) measures how often users experience unexpected layout shifts on a page. To improve your CLS, you can:
- Reduce the size of your page’s HTML.
- Load CSS asynchronously or defer loading until after the page has loaded.
- Preload resources required to render your content (JS, CSS, or third-party domains).
- Defer loading of non-essential resources until after the page has loaded.
Section 3 improving the Core Web Vitals using a plugin
If you’re a WordPress user, there are some great plugins you can use to improve your Core Web Vitals. One of our favourites is the Perfmatters Plugin.
This plugin allows you to disable unused features and settings on your WordPress site that can bog down performance. It also gives you control over other elements that affect loading times, such as disabling emojis and Gravatars, eliminating render-blocking CSS and JavaScript, and more.
What are the best setting to use Perfmatters and improve CWV?
The next video should be your first source of information if you are using this plugin:
There is no definitive answer to this question as the best settings for permitters will vary depending on the specific application and site conditions. However, the video above is the go-to tutorial for and in-depth look into how to properly configure and use the Perfmatters plugin to improve CWV.
Another great option is the WP Rocket plugin.
WP Rocket plugin is a caching plugin that will speed up your website by creating a cache of your pages and posts so that they can be served up faster to visitors. It also includes some features to help with Core Web Vitals, such as lazy loading of images and iFrames, minification of HTML, CSS, and JavaScript files, and more.
There are many other great plugins out there that can help with improving your Core Web Vitals scores. Do some research and find the ones that will work best for your particular site.
What’re the best settings to configure WR Rocket Plugin and improve Core Web Vitals?
To answer this question, follow this link and see how easy it is:
How to setup Wp Rocket and Best Settings for Core Web Vitals
Final words
As a WordPress user, you can improve your Core Web Vitals scores by following a few simple tips. In this article, we’ve shared with you how to optimize your website for better performance and higher scores.
Now you know what they are, how to measure them and you also have a few tips on how to improve them.
And if your website is already up to speed, then congratulations – you are ahead of the game!
So, there’s no excuse, go through your website and see where you can improve those scores to ensure that your website is ready for Google’s new Core Web Vitals update.
