Read the complete guide on how to improve Google Core Web Vitals for WordPress on the Convesio blog.
Tweet

Google’s Core Web Vitals metrics tell you about your WordPress website’s performance, user interaction and overall user experience. It is essential to have high scores if you aim to improve your SERPs and also user retention.

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!

What are Google Core Web Vitals?

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 Develops Core Web Vitals

Metrics Google Uses

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

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. 

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.

Why Google Core Web Vitals Matter

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.

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.

Tom Fanelli Explains How To Improve Google Core Web Vital Scores Using GTMetrix

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.

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.

Core Web Vitals Assesment Passed

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.

Verify Domain Ownership Google Search Console

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 Google Web Vitals Extension

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:

Chrome Google Lighthouse for Core Web Vitals

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.

ABOUT THE AUTHOR
Ahsan Parwez
Ahsan has more than a decade worth of experience in all areas of digital marketing. Combined with his knowledge of WordPress and Web hosting, he has helped companies scale in the WordPress ecosystem. As a Growth Marketing Manager at Convesio, his goal is to help educate prospects about what’s the best way to scale and optimize their WordPress websites.
Free Resource

Sign up for our newsletter

Receive our monthly round up of what's new with WordPress.

Spotlight

WordPress running slow?

Get in touch and we'll help you understand why WordPress is running slow and what you can do about it.

FREE PAGE SPEED ANALYSIS

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 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.

How to 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. 

Largest Contentful Paint Google Core Web Vitals

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.

Use a better WordPress Hosting Convesio

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.

Minify JS and CSS files

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.

Remove Unused JS and CSS

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.

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.

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. 

First Input Delay Google Core Web Vitals

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.

Cumulative Layout Shift

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.

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. 

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.

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.

Share Post

Comments

Be the first one to comment.
Have your say

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright 2021 © Convesio