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?
- Tools to Measure Core Web Vitals on WordPress Website
- How to Test Your Google Core Web Vitals Score
- How to Improve Your Core Web Vitals For WordPress
- Wrapping Up!
- Frequently Asked Questions
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.
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.
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.
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.
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.
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:
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.
Once the PageSpeed Insights test tool thoroughly analyzes the URL, the core web vitals are displayed under the ‘Field Data’ section.
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.
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).
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.
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.
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.
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.
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:
- EWWW Image Optimizer
- ShortPixel Image Optimizer
- Imagify – Optimize Images & Convert WebP
- WP Compress – Image Optimizer [All-In-One]
- 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.
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.
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.
Eliminate Render Blocking Elements
Following are the best practices to reduce the number of render-blocking scripts on your website:
Here are the plugins that can eliminate the Render Blocking Elements:
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:
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.
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?
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.
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]