Core Web Vitals: What They are and How to Optimize Them for WordPress

Page experience is now an important ranking factor in Google. Core Web Vitals, a set of metrics it uses to create page experience reports for your site, are major components of what the search engine giant considers to be acceptable in terms of page experience for users.

Google already uses quite a few ranking factors that relate to performance. They include page speed, bounce rate, responsiveness and more. This means you should already have systems in place that optimize your site for this aspect of SEO.

Core Web Vitals and Google's other metrics for page experience are just additional areas of performance you need to account for.

In this post, we're going to cover what Core Web Vitals are in depth. We'll then go over first and third-party tools you can use to test for them as well as how to optimize your scores.

What are Core Web Vitals?

We've already covered the basic definition of what core web vitals are. They're a set of metrics Google uses to determine how well a specific URL (landing page, blog post, etc.) performs in terms of page experience. It'll then use its findings to determine how well your page ranks for the keywords it targets.

To be fair, Google will consider other factors before it considers page experience. It's just another ranking factor to help them differentiate your page from competing pages.

From their own documentation on the subject…

"While page experience is important, Google still seeks to rank pages with the best information overall, even if the page experience is subpar. Great page experience doesn't override having great page content. However, in cases where there are many pages that may be similar in relevance, page experience can be much more important for visibility in Search."

Think of it in the way ivy league schools like Harvard and Yale differentiate between applicants. It's not enough to consider merit---every student on each school's shortlists have the highest grades and test scores among their peers.

To differentiate between applicants, these schools dig deeper to uncover accomplishments applicants have achieved as early as ninth grade (in kindergarten through 12-grade school systems), whether or not they volunteer, how challenging their classes were, etc.

So, in a sea of search where every page targeting the same keyword you're targeting hits the same user value metric as everyone else, page experience (and other ranking factors, of course) can be the deciding factor that puts your page ahead of others.

To be more specific, Core Web Vitals grade your site on speed, responsiveness and visual stability. They're broken down into three reports to help you determine where your site stands in terms of page experience:

• Largest Contentful Paint (LCP) - measures loading performance
• First Input Delay (FID) - measures interactivity
• Cumulative Layout Shift (CLS) - measures visual stability

Let's dive deeper into each one.

Largest Contentful Paint (LCP)

LCP measures loading performance, but there are already tools, including some owned by Google, that measure page speed, so what does "loading performance" mean exactly?

To be more specific, this metric records the render time for the main content within a page's viewport based on when the page first starts to load to when the content fully renders.

"Main content" includes the largest image or block of text visible within the viewport. This is typically the hero image that displays above the fold of many landing pages and blog posts.

Only the parts of that content visible within the viewport count toward its size. This means if your hero image stretches beneath the fold, the LCP metric will only record the render time for the portion that's visible within the viewport.

Here's a fuller list of elements Google considers for this metric:

• Images - This includes images that use the <img> tag and images that use the <image> tag inside <svg> tags.
• Videos - Videos that use the <video> tag.
• Background Images - Specifically, those that use the url() function.
• Text - Text nodes in block-level and inline-level elements.

Google warns this list may expand as Core Web Vitals initiative grows.

Google has three simple grades for this metric based on how long it takes to render that initial piece of content:

• Good - renders in under 2.5 seconds
• Needs Improvement - renders in under 4.0 seconds
• Poor - takes more than 4.0 seconds to render

Simply put, your goal is to hit that 2.5 second-mark or less.

Why is the LCP metric necessary?

What do you think of when you picture a fully-loaded web page? It's probably not the page's splash screen or loading bar, is it?

That was a major problem with other types of metrics Google used to use and tell developers to use to determine a page's performance and how well it loaded for users. These tools didn't report performance based on parts of the page users could actually, well, use.

The First Contentful Paint (FCP), which you can still test for, only records the initial stage of the loading experience. So, if a web page does have a splash screen before it displays the actual content users are meant to read and interact with, reports are only based on how long it takes to render that initial splash screen.

Google did release additional tools to help you determine how well a page truly loads beyond that first stage of the loading experience. You can still find these metrics, First Meaningful Paint (FMP) and Speed Index (SI), in the Chrome DevTools app Lighthouse. However, Google realized these metrics were too complex and often inaccurate as time went on, and a new initiative was necessary.

As of now, the LCP metric is the most accurate way to determine a page's loading performance.

First Input Delay (FID)

The FID metric measures the time between when a user first interacts with your page to when the browser begins to process that interaction.

It focuses on input actions, such as clicking a link or tapping a button. We expect web pages to respond immediately when we make such interactions. That's Google's primary concern with this metric. It allows the algorithm to determine a web page's ability to deliver a quick response.

You may be wondering why this metric measures the time between first interaction and how fast your site starts processing a response instead of simply measuring how long it takes your site to fulfill user requests for such interactions.

It has to do with the process browsers use to load web pages and complete requests for events like clicking a link. In most cases, browsers use what are known as "event listeners" to fulfill requests.

Input delay happens when the browser and its event listeners are busy loading other items when you make your request. For example, many WordPress sites use themes and plugins that load JavaScript files alongside everything else. The browser can't fulfill your request during this time, and input delay occurs as a result.

On the user end, this results in a slower response time when you interact with a web page. This could lead to a higher bounce rate over time, then subsequently lower rankings.

By narrowing this metric down to input delay rather than total response time, you can pinpoint exactly which JavaScript and other file types you need to optimize in order to improve that delay time.

Here are Google's grades for this metric based on how long it takes the browser to begin processing a request following individual user interactions:

• Good - under 100 ms
• Needs Improvement - under 300 ms
• Poor - over 300 ms

Cumulative Layout Shift (CLS)

The CLS metric measures "visual stability," but what does that mean exactly?

Have you ever tried to read a paragraph on a web page while it was still loading, only to have the page jump quite suddenly, causing you to lose your place? Even worse, have you ever tried clicking a link or button while a page was loading, only to wind up clicking something else when the page jumps yet again?

This issue can occur from a variety of different factors, including resources loading asynchronously, an image or video whose dimensions only reveal themselves when the element fully loads, default fonts that are smaller or larger than their fully-rendered counterparts, third-party ads resizing themselves dynamically as they transition, and more.

Developers can apply fixes and optimizations to these issues so long as they're aware of them. The only problem is the fact that it can be next to impossible to discover these issues during the development process.

The production version of your site, specifically the version your visitors use, does not perform in the exact same way as the local or staging version of your site.

The CLS metric helps you pinpoint issues that may lead to a lower visual stability score.

Here's Google's grading system for this metric to be more specific:

• Good - less than 0.1
• Needs Improvement - less than 0.25
• Poor - over 0.25

Additional Components of Google's Page Experience Signals

Core Web Vitals are one half of Google's initiative for a new set of metrics called "page experience signals." There are three additional components that make up these signals, and Google states it may .

Mobile friendliness and HTTPS are two of these components. They determine how well your site performs on mobile devices as well as whether or not your pages run over a secure connection.

The last signal, called "no intrusive interstitials," measures how accessible your content is for users, especially on mobile devices. This metric mainly determines if pop-ups on your site prevent users from accessing content.

These include pop-ups that cover the viewport, pop-ups that appear as soon as visitors land on your site and large welcome mats.

This metric looks out for marketing pop-ups most of all. Pop-ups for your cookie policy, age verification, and smaller pop-ups and banners should be excluded from these rules.

How to Find Your Scores Core Web Vitals

Google added a new section to Google Search Console specifically for your site's Core Web Vitals reports. Unfortunately, the tool needs 90 days worth of data in order to output a report for your site if you've never used Google Search Console.

You can also use Google Search Console to test your site for other page experience signals.

Google's Chrome User Experience Report and PageSpeed Insights also provide reports on each of the Core Web Vital metrics.

PageSpeed Insights will even break your report down and tell you which individual scripts are causing issues for each metric. You'll even find brief suggestions on how to optimize them.

Using MonsterInsights

MonsterInsights has a tool built into its platform that enables you to view a speed report for your site.

You'll receive separate overall scores for mobile and desktop as well as specific scores for server response time, first contentful paint (FCP), time to interactive and total blocking time.

The tool even suggests optimizations that can help improve your scores, but it doesn't pinpoint specific problematic scripts in the way PageSpeed Insights does.

However, the Plus plan for MonsterInsights also allows you to monitor web traffic from the WordPress dashboard by integrating your site with Google Analytics. This plan also comes with the following features:

• Track unlimited pageviews and users
• Realtime analytics
• Full date range history
• A Publisher's report that reveals your site's most popular posts, top affiliate links, most popular outbound links, stats on scroll depth, topics your visitors are interested in and more
• Reports on the top keywords bringing search traffic to your site
• Tracking tools for universal analytics, scroll, automatic events and more
• Tools that analyze headlines for blog posts, track the performance of links across social media, ads, and other platforms, and over 20 different ways to showcase your most popular posts on your site
• Email summaries and PDF reports

The Plus plan costs $199 annually, but MonsterInsights offers half-off discounts for $99.50 quite often. The plugin also has a limited free plan, though it doesn't include the Site Speed Report.

Final Thoughts

Core Web Vitals and other page experience signals may seem intimidating as ranking factors, but certain site speed optimizations you may already use should take care of the majority of the alerts you'll encounter.

Since site speed in general is already a ranking factor, you should be hosting your site with a quality host. Check out our hosting guides and reviews if you need help choosing a host:

• How to Choose the Best Hosting for WordPress Sites
• 6 Best WordPress Hosts
  • Kinsta Review
  • Raidboxes Review
  • Flywheel Review
  • WP Engine Review
  • SiteGround Review
  • Bluehost Review

Compress PNG images prior to uploading them or by using a plugin that compresses images as you upload. You should also load images and similar assets from a CDN rather than your own server.

Check out our guide on CDNs for WordPress as well as the best CDN providers for the CMS. Bunny CDN is one of our favorites.

Lastly, you should use a caching plugin if your host doesn't include caching in their hosting environment. WP Rocket is one of our favorites as it also offers file compression and additional tools for speed and optimization.

Core Web Vitals are now official ranking factors. We highly recommend using tools like PageSpeed Insights and MonsterInsights to determine where your site is struggling and what you need to optimize.

Image Credits:
Background vector created by rawpixel.com - www.freepik.com