First and foremost, let’s talk about what Google Core Web Vitals are. They are a number of different metrics Google uses to evaluate your site. They include parameters 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 sites and make them more user-friendly. So, what are the metrics?
Table of Content
- Metrics Google Uses to Measure Core Web Vitals
- Why Google Core Web Vitals Matter
- How to Test Your Current Core Web Vitals
- How to Improve Your Web Vital Score
- Improve Your Largest Contentful Paint (LCP) Score
- How to Improve Your First Input Delay (FID) Score
- How to Improve Your Cumulative Layout Shift (CLS) Score
- Bonus: Speed Up Your WordPress Elementor Site with Elementor Speed Optimizer to Keep up With Core Web Vitals
- Conclusion
Metrics Google Uses to Measure Core Web Vitals
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. Well, to understand how Google measures core web vitals, let’s look at each one:
LCP
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
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.
CLS
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:
- Elements like images are loaded a significant amount of time after the page itself loads (usually asynchronously)
- The user clicks on a button or performs another action, which then causes the original layout to change in a confusing way.
Why Google Core Web Vitals Matter
Now we know what Google Web Vitals or Core 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.
Lost Sales
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.
How to Test Your Current Core Web Vitals
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 or see where you stand according to Google’s Core Web Vitals.
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.
How to Improve Your Web Vital Score
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 is 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.
Improve Your Largest Contentful Paint (LCP) Score
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 with 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.
Page Caching
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.
Remove Unused JS and CSS & Remove or Resize Large Images
JavaScript and CSS files are often some of the largest files, so it definitely pays to minimize them. There are quite a few different ways to do this, ranging from a plugin like WP Super Minify to a more manual solution like UglifyJS.
Likewise, you may want to consider just removing unnecessary JavaScript and CSS code entirely. Most websites have quite a bit of old, unused code, so it pays to take a look and see if you can remove anything.
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 and most likely to have a negative impact on the core web vitals.
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 a while.
How to Improve Your First Input Delay (FID) Score
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.
So, if your score is above 100 milliseconds, what can you do to lower it? For the most part, FID is related to JavaScript code, as JS is used in most interactive elements.
As such, the best way to improve your FID score is to optimize your JavaScript code and remove anything that you aren’t using. You should also have a lighter front-end and less heavy theme:
- Use async to load JavaScript or defer it.
- Check the WordPress Customizer to see if you have inserted any unnecessary JavaScript code.
- Your theme may have a separate section for adding JS, too. Check it to make sure that the code is still in use.
- Reduce dependencies, if possible. The more dependencies your code has, the more you’ll need to load.
- Minify your JavaScript using a plugin like WP Super Minify or directly using UglifyJS.
How to Improve Your Cumulative Layout Shift (CLS) Score
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.
- Images. First, you should make specific dimensions for all images on your site. This means you shouldn’t have a huge image (5000px or more) that dramatically changes the layout of the site based on the device.
- Dynamic ads. If you have dynamic ad spaces on your site, be sure to set a specific width and height for the viewing window. This is especially important as you otherwise usually don’t have control over the size and shape of the ads displayed.
- Embeds and iFrames. Finally, make sure that any embedded elements (for example, YouTube videos) have specific dimensions set.
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. These might push a little to meet Google Core Web Vitals metrics better.
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!
Bonus: Speed Up Your WordPress Elementor Site with Elementor Speed Optimizer to Keep up With Core Web Vitals
Elementor is one of the pioneers of page builders in the WordPress industry. It offers some of the most amazing widgets and features to create a professional website in a short amount of time. With its amazing features, people go crazy and use a huge number of widgets and features to create their websites.
And lastly, they end up with a website that is slow and doesn’t load in time. That is why they need a plugin that will speed up their WordPress sites.
The Speed Optimizer Plugin has many interesting features that make it one of the best speed booster plugins. The feature includes,
Blacklist Mode
You can block specific pages or posts from loading Elementor assets. Activate the plugin and you will find options to view every page and post on your site to block their extra assets from loading. You can also limit up to 20 items on the free version (10 for pages and posts each).
WooCommerce booster
Every second on your WooCommerce store can decide between gaining or losing a potential sale. So you need to ensure you are ready with the proper WooCommerce speed optimization tools. Unlike other WordPress cache plugins, a single click from the plugin will block all unnecessary Elementor assets from loading on your WooCommerce store.
Premium Elementor Add-ons support
On top of the Elementor page builder, this plugin supports the most popular Elementor Add-ons. This list includes
- ElementsKit for Elementor
- Essential Addons for Elementor:
- Premium Addons for Elementor
- Happy Addons for Elementor.
- Power Pack Addons for Elementor
One-click restriction
You can block all pages/posts from loading unnecessary assets ( caches, files, or queries) with a single click within the blacklist mode. Welcome to the future of WordPress optimization!
Improved SEO score
With proper Google page speed optimization via the plugin, your organic ranking will improve significantly as your website will load faster. Also, your site will be more mobile-friendly. As a result, Google Core Web Vitals metrics like Largest Contentful Paint (LCP), Total Blocking Time (TBT), and Cumulative Layout Shift (CLS) will be improved.
Improved performance scores
You can easily see the difference in your page loading time by testing your URL online. There are many trusted online resources where you can do that, including GTmetrix, and the Google page speed tool.
Conclusion
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.