This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How to Improve Core Web Vitals – An Ultimate Guide

Updated on December 7, 2021

12 Min Read
core web vitals

Are you running a website on WordPress? Do you want to improve your user experience by improving your page experience? If yes, then this article is for you.

At the start of August 2021, Google announced that page experience would become one of the search ranking factors. For this, Google initiated Core Web Vitals metrics for website owners to help them improve the user experience and quality of their websites.

So if you want to know how to improve your visitor experience and improve your chances of ranking higher on the search engines, then you’re at the right place. In this guide, you will learn how to improve and enhance Google Core Web Vitals for your WordPress website.

But before we dive deep, let’s find out what Google Core Web Vitals are.

What Are Google Core Web Vitals?

Google Core Web Vitals are an initiative from Google based on a set of website performance metrics to measure and improve user experience. These web vital scores focus on the overall site performance and how your site delivers a high-quality user experience instead of just focusing on the entire website load time.

Even if your website loads fast, it may not be fully functional or visible to your users, resulting in a bad user experience. Users care about how quickly they can interact with any web page, and that’s what Core Web Vitals metrics measure.

To do that, Google mention three Core Web Vitals:

  • Largest Contentful Paint (LCP).
  • First Input Delay (FID)
  • Cumulative Layout Shift (CLS)

These metrics are the most important ones for your website to provide a better user experience.

Web-Vital-from-web-dev

Maybe these names sound technical or confusing to you, but don’t worry! They are quite easy to understand, and I’ll explain each metric in an easy-to-understand method. I want to give you a better understanding of what each Core Web Vital means and its impact so that you can use these Core Web Vitals for WordPress sites.

Largest Contentful Paint (LCP)

The Largest Contentful Paint (LCP) measures how quickly the main content, usually the hero section or featured image of your website, is visible to your users. The main content or you can say the LCP element, is different for each site. Yes, even for mobile and desktop versions. The LCP elements can be images, content, or description.

You visited a website and noticed that the first and main image (usually a hero section) did not load. How would you feel as a visitor? Of course, you will leave this website and go to another website. This is how the Largest Contentful Paint metric is closely related to user experience and an essential metric of the Core Web Vitals for WordPress sites.

Largest-Contentful-Paint

You can see the in the above image, Google thresholds for the LCP time are:

  • Good – Less than or equal to 2.5 seconds
  • Needs Improvement – Less than or equal to 4.0 seconds
  • Poor – More than 4.0 seconds.

First Input Delay (FID)

First Input Delay (FID) measures the time between the user interaction and the event processing. Simply, FID means the time when a user clicks on a link to the time their browser starts processing the event. The interaction could be a click on the link, a Call-To-Action (CTA) button, or a form submission.

When a user fills out a form and clicks on the submit button, how long does it take for your site to process the event and submit your form successfully? This is what the First Input Delay (FID) measures; how quickly your website processes interactions.

JavaScript heavily affects the First Input Delay. That’s why it is complicated to optimize the FID metric of Core Web Vital for WordPress sites.

First-Input-Delay

According to Google, First Input Delay (FID) time fall under these categories:

  • Good – Less than or equal to 100 ms
  • Needs Improvement – Less than or equal to 300 ms
  • Poor – More than 300 ms.

Cumulative Layout Shift (CLS)

Have you ever experienced a website changing layout or fonts while you’re reading? And when you’re about to click somewhere on the website, it changes location? These changes annoy the user and deliver a terrible user experience.

Cumulative Layout Shift (CLS) is one of the important metrics of Core Web Vitals for WordPress websites responsible for measuring the frequency of the layout shift that users usually experience on different websites.

Ads are common culprits behind the CLS problem because ads show in multiple sizes with unspecified dimensions. A common example is a news website, where the content of the article changes, and the site loads ads repeatedly and you lose your place while reading.

Cumulative-Layout-Shift

Here the Google scores for the CLS are:

  • Good – Less than or equal to 0.1 seconds
  • Needs Improvement – Less than or equal to 0.25 seconds
  • Poor – More than 0.25 seconds.

Tools to Measure Core Web Vitals on WordPress Website

Google comes with its popular tools that are used to measure Core Web Vitals for WordPress websites. These tools help you quickly diagnose and fix user experiences issues. These are two tools to measure Core Web Vitals: Lab tools and Field tools.

Tools-to-measure-core-web-vitals

Source: Google’s tools to measure Core Web Vitals

As you can see in the image above, Google’s tools measure all three metrics – LCP, FID, and CLS – except for Chrome DevTools and Lighthouse.

Chrome DevTools and Lighthouse uses the Total Blocking Time (TBT) as an alternative to First Input Delay (FID). Total Blocking Time (TBT) is a Lighthouse Performance metric introduced in 2020 and only provides Lab Data, and FID can only be measured with actual user data.

Here are the five tools to measure Core Web Vitals on WordPress website:

  1. Lighthouse
  2. PageSpeed Insights
  3. Search Console
  4. Web Vitals Extension
  5. Web.Dev

How to Test Your Google Core Web Vitals Score

PageSpeed Insights is the easiest way to test Core Web Vitals for WordPress websites. It only needs your website URL, so just enter the URL and click the Analyze button.

Page-Speed-Insights

Once the PageSpeed Insights test tool thoroughly analyzes the URL, the core web vitals are displayed under the ‘Field Data’ section.

Page-Speed-Insights-Field-Data

At the top, the field data shows that this page passes the Core Web Vital assessment or does not. You can view all the three Core Web Vitals with the scores. You need to improve the basic vitals, keeping in mind Google’s recommended scores, which are:

  • Largest Contentful Paint (LCP) – 2.5 seconds
  • First Input Delay (FID) – Less than 100 milliseconds
  • Cumulative Layout Shift (CLS) – Less than 0.1

Discovering LCP Element With Pagespeed Insights

As I mentioned, the Largest Contentful Paint (LCP) measures how quickly your website’s main content is visible to your users. To discover the LCP, scroll down to the diagnostics section in the PageSpeed Insights tool and expand the Largest Contentful Paint element tab.

Here, you’ll find the largest contentful HTML element painted by Google.

Diagnostic-Largest-Contentful-Paint

An HTML element that is present on the desktop does not have to be on the mobile. The HTML element in the mobile version may differ from the desktop version, so you need to optimize the LCP time for both versions of your website.

Discovering FID and TBT With Pagespeed Insights

Remember? First Input Delay (FID) measures the time between the user interaction and the event processing.

You can only see the FID time under the Field Data section because FID is based on actual user data. The PageSpeed Insights test is a lab test, which is why it can not show the FID score. In the Lab Data section, you’ll see a Total Blocking Time (TBT), an alternative to First Input Delay (FID).

PageSpeed-Total-Blocking-Time

Total blocking time is directly proportional to FID. The more you improve TBT, the better the FID time.

Discovering CLS Elements With Pagespeed Insights

Quick recap: The Cumulative Layout Shift (CLS) is related to sudden changes in the website’s content during site search, and the loading of new content moves around the layout of the site.

Go to the Avoid large layout shift section under the Diagnostics area and find out the element that causes shifting and affecting the site score.

Diagnostic-Camulative-Layot-Shift

How to View Full Website Google Core Web Vitals?

If you are checking the root page of your site, then you can view all the pages Core Web Vitals of WordPress website by Click on the ‘Show Origin Summary’ checkbox.

PageSpeed-Show-Origin-Summary

To get even more detailed reports of Core Web Vitals for WordPress sites, you can use the lighthouse speed test by visiting Web.dev Measure tool, just enter your URL and click on the ‘Run Audit’ button. You’ll get a detailed audit report of the Core Web Vitals for your WordPress website.

Web-Dev-Measure-Tool

Another way to perform a lighthouse speed test is by using the built-in test inside the Google Chrome browser. Run your website in Chrome, open the inspect element (right-click on the screen, then select inspect), choose the Lighthouse option for tabs. After that, click the ‘Generate Report’ button.

Chrome-Lighthouse-test

How to Improve Your Core Web Vitals For WordPress

By adopting some essential performance optimization tips, you can easily improve your Core Web Vitals in WordPress. So, Let’s explore the tips one by one.

Optimize Your WordPress Hosting

Your WordPress hosting is the most important part of your website performance. You can adopt many technical and non-technical ways to improve your site’s performance, but if your hosting is not good, your optimization techniques may not be worth it.

You need to focus all of your efforts on growing your business, not on the server technicalities. You should invest in good WordPress hosting because it saves human resources, time, and offers better performance. In addition, WordPress hosting comes up with a lot of features among which the most important are:

  • Faster speeds
  • Server-side caching
  • Better security
  • Staging sites

Cloudways offer a pre-installed Breeze cache plugin with your WordPress installation and Varnish cache on the Cloudways platform. These both help you in getting better Core Web Vitals scores. Do check out the Cloudways article on WordPress hosting and see how you can achieve 79ms Load Time.

Learn Core Web Vitals From The Experts

Watch experts dissect Core Web Vitals & optimize your webpages to ace the Google rankings!.

Improving Largest Contentful Paint (LCP) Score

The user’s goal is to get helpful content as fast as possible onto the screen. The quicker the content load, the higher your LCP score would be. As I discussed, you can find the largest content element under the Diagnostics section of the PageSpeed Insights tool. You’ll see the elements considered for the LCP score.

If the largest element is text, you can improve the content by breaking it down into several paragraphs and titles.

If media files are the largest element in the LCP score, you can try to convert larger images to smaller ones. Smaller file-size images are recommended because larger-size images take longer to load and increase the page size.

Here are the plugins that you can use to optimize your images to get a better score of Core Web Vitals for the WordPress website:

  1. EWWW Image Optimizer
  2. ShortPixel Image Optimizer
  3. Imagify – Optimize Images & Convert WebP
  4. WP Compress – Image Optimizer [All-In-One]
  5. Smush – Lazy Load Images, Optimize & Compress Images

See our guide on how to optimize WordPress images using WP Compress.

Improving First Input Delay (FID) Score

The most important tip for getting better FID scores is to use managed WordPress hosting, as most managed WordPress hosting platforms have built-in cache settings that help speed up the event process.

Another easy way to improve the FID score is to apply the Deferred JavaScript technique on your WordPress website. It makes your web pages display faster without waiting for JavaScript to be loaded. You can use cache plugins that provide the Deferred JavaScript option.

In this guide, I’m using the Breeze Cache plugin (a free plugin for all WordPress users). Once you install and activate the plugin, go to the WordPress Settings > Breeze; under the Advanced Options tab, you’ll see ‘Move JS files to footer’ and ‘JS files with deferred loading’ options, enter the JS file’s URL, and click on the Save Changes button to store your changes.

Breeze-Js-file-to-footer

Your site does not have to wait for JavaScript to load. This will improve the first input delay (FID) score and be helpful to improve the Core Web Vitals for the WordPress website.

Improving Cumulative Layout Shift (CLS) Score

The Cumulative Layout Shift (CLS) is related to sudden changes in the content and move other elements on the screen.

First, you need to check the elements that are affecting the CLS. For this, you have a Diagnostics section in the PageSpeed Insights tool where you can find the elements that need to be fixed to improve the Core Web Vitals for WordPress.

The most common causes of a poor CLS could be the images without proper dimensions, embed videos, and the ads. So, the solution is to use the width and height size attributes on your images and video elements.

The way to identify the size attributes of the image is to inspect the image by right-clicking on the browser screen. Click on the different page elements to see their source code and check all the images whether the images have proper size attributes or not.

Size-Attributes

Eliminate Render Blocking Elements

Render Blocking elements are static files, such as HTML, CSS, JavaScript files which are important for the process of rendering a web page. These files have scripts, and these scripts can block visitors from seeing the content.

Page Speed Insights tool identifies Render Blocking Elements. Typically, these elements are created from your WordPress website plugin’s JavaScript and CSS files and third-party tools such as Google Analytics. These elements affect the overall Core Web Vitals for WordPress websites and also affect the user experience.

Following are the best practices to reduce the number of render-blocking scripts on your website:

  • Minify your JavaScript and CSS – Remove all the white spaces and unnecessary comments.
  • Concatenate your JavaScript and CSS – Combine the different JavaScript files into one main file and do the same with CSS files.
  • Defer the loading of JavaScript – Force JavaScript files to wait until everything else on the page is ready.

Here are the plugins that can eliminate the Render Blocking Elements:

  1. Breeze By Cloudways
  2. WP Rocket
  3. Autoptimize

To eliminate the Render Blocking Elements, I’m using a Breeze plugin. First, install and activate the Breeze Cache plugin, then go to the WordPress settings, click on Breeze. In the Basic Options tab, you’ll see a minification option; enable the HTML, CSS, and JavaScript minification and save the settings. After making changes, I am again going through the testing phase to check the improvement in Core Web Vitals for WordPress.

Breeze-eleminate-render-blocking-elements

For defer loading of JavaScript, check out the ‘Improving First Input Delay (FID) Score’ heading above in this article.

Use CDN to Improve Core Web Vitals for WordPress

CDN allows the user to load the website files like images and scripts from the nearest servers. It also helps to reduce the load on your site. CDN is a network of servers located around the globe. There are many third-party CDN services available for the websites.

Let’s have a look at some third-party CDN providers:

  1. Cloudflare CDN
  2. KeyCDN
  3. Amazon CloudFront
  4. CDN77

If you’re a Cloudways user, you can take advantage of Cloudways’ partnership with Cloudflare and activate the Cloudflare Enterprise CDN add-on which offers Enterprise level CDN features.

Cloudflare-Option-in-Cloudways

 

Wrapping Up!

When it comes to website speed, the fact is that no one likes slow-loading websites, not even the Google search engine. With the help of this article, you can understand Core web vitals for WordPress and improve the performance of your website by following the tips given. If you want to know more tips about website optimization, check out the Cloudways article on 23 tips to speed up a WordPress site for better performance.

Frequently Asked Questions

Q: How do I optimize for Web core vitals?

A: There are several tips to improve Core Web Vitals for WordPress websites. The tips are:

  • Optimize Your WordPress Hosting
  • Improving Largest Contentful Paint (LCP) Score
  • Improving First Input Delay (FID) Score
  • Improving Cumulative Layout Shift (CLS) Score
  • Eliminate Render Blocking Elements
  • Use a CDN to Server to Improve Web Vitals Score

I have discussed each tip in detail. Check out the ‘How to Improve Your Core Web Vitals For WordPress’ section of this article.

Q: How do I optimize for Web core vitals?

A: You need to improve your JavaScript because mostly, the Core Web Vitals heavily emphasize optimizing JavaScript. You need to take these steps to optimize the Js.

  • Minify your JavaScript and CSS
  • Concatenate your JavaScript and CSS
  • Defer the loading of JavaScript

Q: Do core Web vitals affect SEO?

A: Core Web Vitals metrics are essential for SEO because Google announced these web vitals as a ranking factor to measure the user experience.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Danish Naseer

Danish Naseer is a WordPress Community Manager at Cloudways. He is passionate about designing, developing, and engaging with people to help them. He also actively participates in the community to share his knowledge. Besides that, he loves to watch documentaries, traveling and spending time with family. You can contact him at [email protected]

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour

CYBER WEEK SAVINGS

  • 0

    Days

  • 0

    Hours

  • 0

    Mints

  • 0

    Sec

GET OFFER

For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now