Core Web Vitals for WordPress: Know Everything About It

You might be interested in the new Google Core Web Vitals project, but not sure how it might relate to your WordPress site?

Or perhaps you don’t know what the Core Web Vitals project is and why it matters to your WordPress website?

This blog post covers everything you need to know about Core Web Vitals and WordPress.

I’ll explain to you what Core Web Vitals are, how to test it, and update your site’s scores to create a more satisfying user experience.

And possibly even boost your search rankings beyond 2021.

I’ve got a lot to say, so let’s begin.

What is Google Core Web Vitals?

Google’s Core Web Vitals aim to improve user experience on the web.

Rather than generic metrics like the time to load your entire site, Core Web Vitals, more specifically, look at how your site’s performance influences User Experience (UX).

For example, what is the most amount of time it takes for your web page’s most important content to load?

The total time it takes for the whole site to load isn’t always the most important metric for a better user experience.

Most users care about getting your content as soon as they can. And that is part of what the Core Web Vitals metrics try to measure.

Three different metrics currently go into Core Web Vitals (some of which have already been promoted by Google under another branding).

Below, I cover each metric in more detail. In summary, these metrics are the following:

Largest Contentful Paint (LCP)

LCP measures how long it takes for your site’s most important content to load. This content will likely be your site’s featured image or hero section. We will discuss the LCP element in detail later.

Cumulative Layout Shift (CLS)

CLS measures how much your site’s content shifts when it loads. This shifting is disturbing for user experience. For example, if you have advertisements that load late and change the site layout downward after your content has already loaded, that’s a layout shift.

First Input Delay (FID)

FID is the time between when a user interacts with something on your page and when their browser can begin processing that event. Clicking a button is an example.

As you see, page load time is not one of Google’s metrics to consider.

Okay, but why is that?

Google’s focus is again on how your site’s performance is impacting user experience.

And the Google Performance team points out that these metrics capture several critical aspects of what is known as the user experience of the Web.

Core Web Vitals’ Impact on Search Engine Optimization (SEO)

YES! The Core Web Vitals does influence your SEO.

Google intends to use Core Web Vitals as a ranking factor starting in May 2021.

Core Web Vitals would be part of the brand-new page experience signals, together with safe-browsing, HTTPS-security, and mobile-friendliness.

Google has also stated that Core Web Vitals will influence both mobile and desktop results. It will also impact whether or not your site appears in Top Stories.

Your site previously needed to use AMP to appear in Top Stories. When Google rolls out the change, that will no longer be the case.

You need to meet the Core Web Vitals metric’s specific minimum requirements for your site to appear in the Top Stories.

You have some time to adapt your site to Core Web Vitals. However, you cannot ignore it.

Core Web Vitals will help your site’s Google rankings, especially if you’re trying to take your content to seem in Top Stories.

Core Web Vitals in Details & How to Test It

Let’s get more into the details of the three Core Web Vitals metrics and how you can test your website against them.

I’ll start by explaining where you can try your site before getting into the metrics.

This understanding is essential because the test tool links to the metrics directly. For example, you need to use the tool to find your website’s Largest Contentful Paint element.

How to Test the Core Web Vitals of Your WordPress Website?

Google PageSpeed Insights provides the easiest method for assessing your site against the Core Web Vitals.

Other speed analysis tools have also begun to include Core Web Vitals into their systems.

Both GTmetrix and WebPageTest currently supports Core Web Vitals.

All you need to do is input your site’s URL at PageSpeed Insights.

You’ll then see Core Web Vitals metrics in both the Field Data and the Lab Data. Here the blue flags mark the Core Web Vital metrics.

For lower-traffic sites, you may only see Lab Data for LCP and CLS. Google does not have enough data from actual visitors to the site.

That’s completely fine!

However, if the site does not have enough field data, you will not see the FID times.

Also, note that you should check desktop and mobile results separately for your Core Web Vitals metrics, as your metrics will be different for each.

You can also access Google’s Core Web Vitals report from Google Search Console, which will show you sitewide issues right away.

This report is helpful later on when diagnosing issues for your entire site.

Now, let’s go through the three metrics, one by one.

What Is the Largest Contentful Paint (LCP)?

Google says Largest Contentful Paint (LCP) measures when your site’s main content has loaded, affecting how soon people see your page loads.

LCP is much like the metric First Contentful Paint (FCP).

The critical difference is LCP focuses on when the primary content loads while FCP focuses on when the first content loads.

Here first content could be a loading indicator or splash screen.

Each site’s LCP element will be different; the desktop and mobile versions can vary as well.

LCP elements could be images sometimes, or they could be text.

PageSpeed Insights helps you learn about your site’s Largest Contentful Paint element.

You need to scroll down to the Diagnostics section. Then expand the Largest Contentful Paint element tab.

Google will then provide the HTML for the element it is using to measure LCP.

Here is an example. On the WordPress.org homepage, the LCP element is an image on its desktop version.

But, the LCP element is the subheading text on the mobile version of the same website.

In short, LCP measures how fast your content becomes visible to your visitors.

So how long is a good LCP time?

Google defines things like this:

Good – Under 2.5 seconds
Needs Improvement – Between 2.5 seconds and 4.0 seconds
Poor – More than 4.0 seconds

What Is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) deals with how your website behaves as new content is loaded. The way your content moves around on the page as new content is loaded is what the CLS metric analyses.

A quick example is a news portal.

Have you ever visited any websites where the article’s content kept shifting around while loading the advertisements?

Now, that’s Cumulative Layout Shift.

In the worst-case scenario, the late loading of content could cause a button to move and cause the visitor to click the wrong button accidentally.

You probably know as well as I do how annoying this is for visitors. Your visitors will indeed have a bad experience if the layout shifts too much.

You can use both the Lab Data and Field Data in PageSpeed Insights to measure your CLS score.

Here is Google’s outline of different scores.

Good – Under 0.1
Needs Improvement – Between 0.1 and 0.25
Poor – More than 0.25

Go to the Avoid large layout shifts section in the Diagnostics area. You can see the individual elements on your site that are shifting and influencing your score.

What Is the First Input Delay (FID)?

First Input Delay (FID) is seemingly the most difficult metric to understand.

In short, it is time for your website to become interactive after a user clicks on an element, such as a button.

Here is an example. Imagine someone clicks on a button to expand an accordion section. Now when does your site respond to that action and open the accordion?

How long will it take?

JavaScript heavily affects FID. Your Website is busy processing a large JavaScript file from a mobile visitor’s phone. The user cannot click on an element if it is not interactive.

See how Google defines FID times.

Good – Under 100 ms
Needs Improvement – Between 100 ms and 300 ms
Poor – More than 300 ms

FID is not like LCP and CLS. FID relies on actual user data. So you can’t quickly test it in the lab.

That’s why you can only see FID times generated in the Field Data section of PageSpeed Insights.

There’s no simple way to measure your site’s FID times if your site doesn’t have sufficient data to populate the Field Data section.

How to Boost Core Web Vitals on WordPress?

Assume you aren’t currently meeting Google’s suggestions for these three Core Web Vitals metrics.

The critical question is – how can you optimize your WordPress website to improve your Core Web Vitals scores?

The strategies differ slightly between metrics. Most of the optimizations require executing WordPress best practices for performance.

How to Optimize the Largest Contentful Paint on WordPress?

Optimizing for LCP is the most straightforward metric. It is mostly WordPress performance best practices itself.

Fast Hosting – hosting affects your site’s overall speed and smoothness, which is critical in LCP.

Enable Page Caching – page caching speeds up your server’s response time. We offer free LiteSpeed Cache, which enables this automatically.

Optimize Your Images – many times; your LCP element will be an image. Optimizing your pictures will make them load faster. Your WordPress images will be optimized when you add the LSCache plugin.

Optimize Your Code – if you load redundant CSS or JavaScript before your main content, your site will be slow. You can fix this problem by inlining critical CSS and eliminating render-blocking JavaScript. LiteSpeed Cache plugin lets you set these optimizations up in its Page Optimization screen.

Use Gzip or Brotli Compression – using server-level Gzip or Brotli compression will reduce your site’s file size, which speeds up LCP. We have enabled Gzip and Brotli by default

Use Preconnect for Essential Resources – preconnect enables you to establish all required third-party connections in advance.

For Global Audiences, Use a Content Delivery Network (CDN) – a CDN can speed up your LCP time for visitors worldwide if you have a global audience. We offer a robust, globally distributed CDN free of cost.

LiteSpeed web server with it’s Caching plugin is the easiest way to implement most of these best practices. It also offers other features that can help you optimize your site’s code and performance, all of which lead to faster load times.

How to Optimize Cumulative Layout Shift on WordPress?

Optimizing for CLS is a little more technical as it works more with your website’s codebase.

Here are some common problems and their solutions.

Images Without Dimensions – WordPress automatically adds dimensions when you add pictures via the WordPress editor. Remember to add dimensions to the photos if you manually add them anywhere using the code.

Ads, Embeds, and Iframes Without Dimensions – embeds without dimensions can cause problems the same way images do. When you use these embeds, make sure to specify sizes always. And when you are placing ads, reserve space for each one

Web Fonts (FOIT/FOUT) – Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT) are issues that may occur due to the late loading of the web fonts. You could use web font preloading to fix this.

Injected Content – ensure that none of your content is injected above any existing content unless responding to a user’s action.

How to Optimize the First Input Delay on WordPress?

Finally, optimizing for FID is the most complex because it requires rewriting the code entirely.

You will want to keep large JavaScript execution limited so that your browser can respond to user interactions swiftly.

If possible, you should remove unnecessary JavaScript as the first step.

You can break down heavy tasks into smaller tasks if you have them still to do.

Google has a good explainer on the more technical parts of FID optimization. However, it’s not easy to do if you are not a developer.

You might need to hire a developer if you are a non-technical user and improve your FID time.

Being a non-technical user, anyone can still succeed by removing JavaScript-heavy plugins. If the feature is still needed, these plugins can replace it with a more lightweight alternative.

Optimize Core Web Vitals for WordPress Today

Google is pushing Core Web Vitals to improve user experience on websites to shape the web.

As of November 2020, Core Web Vitals aren’t currently an SEO ranking factor. However, Google plans on using them as a ranking factor at some point in 2021.

That’s why you’ll need to start getting your site ready in advance.

You can use PageSpeed Insights or the Core Web Vitals report in Google Search Console to view your site’s Core Web Vitals scores and times.

Rovity’s fastest hosting infrastructure, along with LiteSpeed Web Server and LSCache, offers everything you need to enhance your WordPress site’s Largest Contentful Paint time.

You’ll need to pay attention to your site’s code to improve other metrics. To achieve a low First Input Delay time, you should consider the help of a developer.

Do you still have questions about Core Web Vitals and WordPress? Feel free to ask away in the comments!