Sign up for our newsletter
Receive our monthly round up of what's new with WordPress.
What are Google Core Web Vitals? You’ve probably heard of them or seen the terms used before, but what exactly are they? And how do they affect your site?
In this post, you’ll learn everything you need to know about Google Core Web Vitals and how to improve them on your WordPress website. First, we’ll talk about how they work and the three metrics Google uses to evaluate your site. Then, we’ll show you how to test your current vital scores. Finally, we’ll show you how to improve them. While this process can seem complex, it’s actually quite simple.
Let’s get started!
First and foremost, let’s talk about what Google Core Web Vitals (often just called “Web Vitals”) are and why Google has them.
Web Vitals are a number of different metrics Google uses to evaluate your site. They include things like page speed, how interactive the page is, UX/UI, distracting images or other elements, and how much the design changes while scrolling down the page.
These metrics are designed to make it easy for website creators to improve their site and make it more user friendly. So, what are the metrics?
Google uses three metrics to determine your Web Vital Score: LCP, FID, and CLS. Each one measures a different aspect of your site. While these terms can seem a bit technical, in actuality they are fairly straightforward. Let’s look at each one:
LCP stands for Largest Contentful Point. This essentially just measures the initial load time of a web page. Specifically, it measures the perceived load speed of the “main content.” Main content refers to the largest image or text block viewable on the page when it begins to load – and not the entire page.
This is important to understand, as it doesn’t measure content that is not in view when the page loads – for instance, the text of an article which is only visible after scrolling down. It only measures the immediately viewable portion of the page.
FID stands for First Input Delay. This metric is a little more nuanced, but basically just refers to UX interactivity and responsiveness. A lower (better) FID score means that your page is responsive and reacts quickly to any user interaction. For example, when they press a button or click on a link, FID measures the time from the user action to the process beginning.
Your website should make it very easy for the user’s browser to begin processing the action. If a user clicks on a button but it takes a few seconds for the action to begin, your FID score will be worse, as this has a negative effect on the user experience.
Finally, CLS stands for Cumulative Layout Shift. This tracks how much the layout shifts after the page has fully loaded. This is usually caused by one of two things:
The CLS score is based on the largest “burst” of unexpected layout shifts. A burst is when multiple layout shifts occur in a row, with less than 1 second in between each one. So, if you have more than one layout shift, your score is worse.
Now we know what Google Web Vitals are. But why do they matter? And how do they affect your website and Google’s search results?
Major Effect on SEO
The biggest impact of your Vital Web score is on Search Engine Optimization, or SEO. To evaluate your website, Google uses Web Vitals – along with other metrics like mobile-friendliness, SSL, pop-ups (or lack thereof), and content quality.
As such, making sure that your Web Vitals scores are good is very important if you want to improve your SEO and appear higher in search results.
If you run an eCommerce website, you’ll also want to improve your Web Vitals. Websites that load slowly, have sluggish buttons and UX elements, and have frequent layout shifts will scare away potential customers. A slow site seems less reliable and makes customers hesitant to input payment information.
Prefer to watch a walkthrough video instead of reading text? No problem – check out our video webinar on using GTMetrix to optimize your site performance. We cover a variety of different things you can test, then show you how to improve them.
Let’s now turn to your website and talk about how to test your own vital scores. Depending on your technical skills, there are a variety of different ways to do this. The easiest way to check them, however, is via Google Page Insights, so we will mostly focus on that.
Note that it is normal for there to be slight differences between each tool, so don’t worry if the numbers are different. Likewise, the desktop and mobile test results will vary.
Google PageSpeed Insights
Google offers a tool to analyze Web Vitals for you. It’s called PageSpeed Insights and it will give you a ton of data about your site.
To run a test, simply type your website’s URL into the bar and press Analyze. Once the test is completed, you’ll see the results. The first item covers Core Web Vitals.
If the scores are not satisfactory, the bar will be red. You can also click Expand View to see more details. You should also switch the setting to Desktop to make sure that your scores are good enough there, too.
Now let’s briefly cover a few other options for testing your Vital scores.
Google Search Console
The Google Search Console is a tool you can set up with your website to get feedback and tips for improving your Google search results performance. Unlike PageSpeed Insights, it requires you to verify that you own the domain by adding a TXT record to your DNS confirmation.
Once you do this, you can log into the Google Search Console admin panel and then find the Core Web Vitals tab on the left sidebar.
The Web Vitals Extension
If you use the Google Chrome browser, there is now an extension you can install to check your Vital scores right in the browser. It’s called Web Vitals and you can download it from the Chrome Web Store.
Once you install the extension, simply navigate to your website's URL, click the extensions button in the top navigation bar, then on the Web Vitals extension. After a moment, you’ll see the Web Vitals results:
Chrome DevTools and Lighthouse
Another option for Chrome users is the DevTools suite of web development tools, which is built into the browser itself. One of these tools is called Lighthouse and it allows you to check the Web Vitals scores.
To open Lighthouse, navigate to your website and then right click on the page. Select Inspect and then choose the Lighthouse tab at the top:
Once there, click Generate Report and wait a moment for the report to be created. This report includes scores for accessibility, SEO, performance, and other metrics.
Receive our monthly round up of what's new with WordPress.
So, you’ve run the tests above and see a need for improvement. Let’s talk about fixing your scores!
No matter which method you used above, you should if there are issues. Some of the testing methods (PageSpeed Insights, for instance) give you a list of improvements directly in the test results. But there are also some other actions you can take to improve your scores.
Since each of the three metrics are for different aspects of your site, it makes sense to organize the solutions separately. For most websites, it’s unlikely that you’ll have an issue with LCP, FID, and CLS at the same time.
Let’s start with the LCP score. As mentioned above, this score measures the initial load time of the main content on a page.
What an Ideal Score Is
What’s an ideal LCP score? According to the official Google guide, you should have a LCP of 2.5 seconds or less. In general, the faster your site loads, the better, so aim to make this number as low as possible.
If your LCP score is 2.5 seconds or higher, what should you do? Let’s discuss a few solutions.
Use a Better Host
Perhaps the easiest solution is to upgrade your host. Higher quality hosts (like Convesio) will improve your LCP score without you needing to do much yourself. The improvement will be especially noticeable if you are currently using a shared hosting plan or a single tier cloud hosting.
Convesio is built for speed, scalability and security in mind. Based on high performance Google Compute Servers running containerized environments and running Cloudflare Enterprise for speed and security, you can be sure that your high traffic website will have stable page load times.
Most hosts will implement their own caching solutions, but you can also use a page caching plugin like WP Rocket or WP Super Cache. These plugins will lessen the amount of time that it takes for your site to load.
Minify JS and CSS files
Remove Unused JS and CSS
Remove or Resize Large Images
Images are usually the single biggest files on a website, especially if they aren’t optimized and compressed as much as possible. It’s also common to upload images that are unnecessarily wide.
If you are able to remove images without affecting the quality of your content, we recommend it. If not, try to make your images only wide enough as necessary. For most devices, this means 2500px wide at maximum. Anything larger than this is usually unnecessary.
Use a Content Delivery Network (CDN)
A CDN, or Content Delivery Network, is a distributed network of servers that help load your website faster based on the visitor’s location. For example, if a visitor is in Europe, a CDN will load your site from a nearby server and not from North America, Asia, or wherever else your home may be.
Uninstall Unused Plugins and Themes
Finally, it’s always a good idea to remove unused plugins and themes. We recommend periodically going through your installed themes and plugins and removing any that you haven’t used in awhile.
Now let’s look at FID. If you remember from the previous section, FID is concerned with interactivity and the delay between when an action is taken and the process begins. For instance, clicking a button and then having an action performed.
What an Ideal Score Is
A good FID score should be 100 milliseconds or less, according to Google’s web.dev website.
Finally, let’s look at CLS, which measures how much the layout shifts.
What an Ideal Score Is
If we look at the official Web.dev site by Google, a good score is defined as being 0.1 or less. This number is calculated in a fairly complex way, but essentially boils down to calculating the movement of unstable elements.
If your CLS score is above 0.1, what can you do to improve it? You mostly just need to specify certain dimensions for any “flexible” elements. That is, if the element’s size or shape is based on the user’s screen size or an action, like clicking a button.
Other Tips and Tricks
Finally, here are also a few other tips that will likely improve your scores. Although you aren’t likely to dramatically improve your Web Vitals by doing these, they’re nonetheless a good idea.
Use Optimized Lightweight Plugins and Themes
Unfortunately, many WordPress themes and plugins can be bloated with unnecessary or poorly written code, extraneous features, and other elements. These make your site slower and can sometimes interfere with the browser. This results in lower Web Vital scores.
Keep Plugins and Themes Updated
It is always a good idea to keep themes and plugins updated to the latest version. This is usually recommended for security reasons, but it should also be noted that updates also (normally) make the plugin more efficient. As developers improve This will improve your Web Vital scores, too!
Use Optimized Web Hosting with a CDN
Web Hosting matters a lot when it comes to responsiveness and load speeds of your website. At Convesio we make sure that your website is isolated from other websites using Containers. With Containerization you get dedicated resources for your website and scaling up resources for caching, web files and database is also seamless even during a surge in traffic.
In this post, we covered everything you’ll need to know about Google Core Web Vitals. First, we talked about the three metrics Google uses (LCP, FID, and CLS) and how to find out your own scores. Then, we walked through a variety of different solutions for improving them, most of which are thankfully quite simple.
Need expert assistance in measuring your Core Web Vital scores and fixing performance issues? Book a free demo with us and we’ll show you how Convesio can dramatically speed up your site.