Author: Roseph Darl Tungul

Google (Core Web Vitals) for WordPress

Google (Core Web Vitals) for WordPress

Table of Contents

 

What Are Google Core Web Vitals?

Core Web Vitals are a set of specific factors that Google considers important in a webpage’s overall user experience. These factors include such metrics as to how long it takes to load the web page to render and become fully interactive.

These metrics are complex and imperfect, and fixing page experience snags can be perplexing. Even now, Google has made last-minute changes for upgrading all its tools to include refined formulas in response to cases brought forth by developers in the field.

Core Web Vitals (sometimes just referred to as Core Vitals) are made up of three specific page speed and user interaction measurements: Largest Contentful Paint (loading performance), First Input Delay (interactivity), and Cumulative Layout Shift (visual stability).

According to Google, these metrics are most important for providing a great user experience.

If you think that these names are a little bit confusing, and combining one metric with another, don’t worry, we’ve got you! We will explain these metrics in a simple way. We want you to understand what each Core Web Vital means and its impact on user experience.

This is the first step for improving the scores and your overall SEO and WordPress performance.

Core Web Vitals: LCP (Largest Contentful Paint)

Explaining Largest Contentful Paint (LCP)

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block that is apparent inside the viewport, compared to when the page initially started loading.

LCP, a significant milestone in a page’s lifecycle, does not include offscreen elements. LCP identifies the largest element, even if it is later removed from the page DOM once discovered, or when images of the same size all qualify.

According to Google, how long it takes for a page’s main content to load has an impact on how quickly users perceive your site to load.

To provide a good user experience, sites should aim for a Largest Contentful Paint of 2.5 seconds or less. To ensure that you’re meeting this goal for the majority of your users, the 75th percentile of page loads, split by mobile and desktop devices, is a good benchmark to aim for.

If you’re wondering what a good LCP time is, here are the following Google’s thresholds:

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

On the other hand: LCP is very similar to First Contentful Paint (FCP), another metric included in PageSpeed Insights.

The minimum requirement for achieving “good” scores, for FCP components that contribute to Core Web Vitals without FCP actually being one, has recently increased from 1.0 to 1.8 seconds. FCP accounts for Time to First Byte.  This is more of a reflection of your server response time than anything you can do with code, in addition to the time it takes to process any render-blocking resources like CSS and Javascript.

The difference between Largest Contentful Paint (LCP) and First Contentful Paint (FCP) is that LCP measures when the “main” content loads. FCP is only concerned with when the “first” content appears — which could be a splash screen or a loading indicator, which is a less important user-experience element.

 

Explaining First Input Delay (FID)

Core Web Vitals: FID (First Input Delay)

The time between when a user interacts with your site (e.g., clicking a button or a link) and when the browser is actually able to begin that event is measured by the First Input Delay (FID).

FID is the time it takes a browser to respond to a visitor’s initial interaction with a website while it is loading. This is known as Input Latency.

An interaction can be as simple as tapping a button, clicking a link, or pressing a key, followed by a response. Other types of interaction locations that FID will measure include text input fields, dropdowns, and checkboxes.

First Input Delay is probably the most complicated metric to understand and optimize for as it is heavily affected by JavaScript.

Here’s how Google defines FID scores:

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

 

Explaining Cumulative Layout Shift (CLS)

Core Web Vitals: CLS (Cumulative Layout Shift)

Cumulative Layout Shift (CLS) measures how much your site’s content “shifts” or “moves around” as it loads.

To avoid situations, such as extremely long browsing sessions, undermining CLS scores, smaller “window” sessions are capped at 5-seconds, marked as ended by a 1-second gap as a boundary to find the page’s worst 5 seconds of layout shifting.

According to Google, the most common causes of high CLS are:

  • Images without dimensions, 
  • Ads, embeds, and iframes without dimensions, 
  • Dynamically injected content, 
  • Web fonts causing FOIT/FOUT (Flash of Invisible Text and Flash of Unstyled Text),
  • Actions waiting for a network response before updating the DOM.

A CLS score can be as low as zero for fully static pages and gets higher the more layout shifts occur on the page.

The lower your score, the more stable your layout is. Official CLS scores used by Google’s performance tools are as follows:

  • Good – CLS below 0.1,
  • Needs improvement – CLS between 0.1 and 0.25,
  • Poor – CLS above 0.25. 

Google recommends that you keep your CLS score under 0.1.

 

Do Core Web Vitals Affect SEO as a Ranking Factor?

Core Web Vitals are incredibly important parts of Google’s measurement of user experience, these factors are combined with other variables to create an overall score for user experience. Core Web Vitals may represent the overall share of this score, but it’s influenced by other factors as well, including:

  • Mobile support. Support for mobile devices is treated as an important signal for user experience and will increase your overall score.
  • HTTPS. Secure sites are considered a better experience for users, as many avoid unsecured sites entirely. Ensuring that all addresses in your infrastructure are HTTPS pages will help your user experience score.
  • Safety. Any malware on your site can seriously decrease your user experience score for obvious reasons. Safe browsing is essential to a positive user experience with your content, and Google ranks accordingly.
  • No interstitial pop-ups. Pop-ups that overwhelm the page and are a nuisance to users will have a negative effect on Google’s ranking. As these pop-ups can be incredibly frustrating for users, good content avoids these overbearing ads.

While those factors definitely play into a user experience score, comparatively speaking,  Core Web Vitals have significant effects on your user experience ranking. These other factors are important things to bear in mind when planning your site and content, however, if your Core Web Vital scores are underperforming, all SEO ranking will.

 

How to Test & Measure Core Web Vitals on WordPress

You can be used to test and measure the Core Web Vitals with all of Google’s web developer tools, from PageSpeed Insights to Chrome DevTools, the CrUX Report, and more.

As may be seen in the illustration below, Google’s tools measure all three metrics — except for Chrome DevTools and Lighthouse.

The Total Blocking Time (TBT) metric is used as a proxy for the First Input Delay (FID) by Chrome DevTools and Lighthouse as FID can only be measured with real user data (Field Data), whereas Lighthouse only provides Lab Data.

Google’s Core Web Vitals initiative aims to assist website owners in improving the user experience and quality of their sites. These indications are critical for any website’s success.

As Pegasaas uses Lighthouse lab data to determine your web performance scores, the Pegasaas Accelerator WP plugin uses TBT in place of FID in its interface.

 

Core Web Vitals: Measurement Tools

If you’d rather use a different performance tool, you should know that both GTmetrix and WebPageTest have started to use the Lighthouse performance score.

Remember that both tools will only show you the Largest Contentful Paint and the Cumulative Layout Shift scores.

 

How to Test and Measure the Core Web Vitals with PageSpeed Insights

The Page Speed Insights tool is the simplest way to determine your Google Core Web Vitals Score. Simply type in the URL you’d like to analyze and hit the Analyze button.

Google’s tool provides data on all three metrics and gives specific recommendations to improve their performance.

Just enter your site’s URL, and you’ll see Core Web Vitals metrics in both the Field Data (based on the CrUX report) and the Lab Data (based on Lighthouse 6.0).

The Core Web Vitals metrics are marked with a blue ribbon, and if you get it, you’ve met Google’s requirements.

 

The core vital results are displayed under the section titled ‘Field Data’ section.

Core Web Vitals - Field and Lab Data

PageSpeed score for the Pegasaas homepage

There are a few things to bear in mind:

  • The Core Web Vitals scores from the Field and Lab Data may differ slightly. In the screenshot above, LCP is 2 s according to the Field Data and 0.6 s in the Lab Data. This is typical, and it depends on the data collection method.
  • It’s not a problem if you don’t have any Field Data when you run your test. It’s because there isn’t enough real-world user data. PageSpeed Insights uses the Lab Data to calculate the PageSpeed score, so it has no effect on your Core Web Vitals.
  • Always double-check the results on mobile and desktop. Between the two, your Core Web Vitals numbers will be different. Keep in mind that the mobile score is the most important and difficult to get.

Let’s take a look at how you can utilize PageSpeed Insights to determine which Core Web Vitals parts need to be improved.

 

Discovering the Largest Contentful Paint Element with PageSpeed Insights

As previously stated, the LCP score determines how long it takes for the most meaningful element to become visible to your visitors.

To discover your site’s Largest Contentful Paint element, scroll down to the Diagnostics section and expand the Largest Contentful Paint element tab.

There, Google will show you the HTML for the element that it’s using to measure LCP.

For example, on the desktop version of the Pegasaas.io homepage, the LCP element is a text header.

Core Web Vitals - Largest Contentful Paint

The LCP element from the desktop – PageSpeed Insights

 

Discovering the Cumulative Layout Shift Elements with PageSpeed Insights

Quick review: The Cumulative Layout Shift deals with how your site loads and whether or not your content “moves around” as new content is loaded.

To find the individual elements on your site that are “shifting” and affecting your score, go to the Avoid large layout shifts section of the Diagnostics area:

Core Web Vitals - Cumulative Layout Shift

The CLS elements – PageSpeed Insights

 

Discovering First Input Delay and Total Blocking Time with PageSpeed Insights

Remember how First Input Delay is about user interaction? In other words, how long does it take for a page to respond after interacting with an element such as a link or a button?

As a result, FID is based on actual user data, and its score is not available in the Lab Data. As previously stated, you’ll only see FID times in the Field Data section — and only if the CrUX report has collected enough data.

In the Field Data, Total Blocking Time (TBT) will replace First Input Delay.

Core Web Vitals - Total Blocking Time

Total Blocking Time replaces First Input Delay in the Lab Data.

 

As long as you improve your Total Blocking Time, your FID score will likely improve.

 

If your TBT score is low, you should go to the Minimize third-party usage section in the Diagnostics section.

In this section, you’ll see what you can do to reduce third-party usage. It’s one of the main performance issues you need to address unless it’s already been addressed and is listed under the “Passed audits” section, as shown below:

Core Web Vitals - Third Party Code

Minimize third-party usage recommendation – PageSpeed Insights

 

How to Improve Core Web Vitals on WordPress

Now for the important question: how can you optimize your WordPress site to improve your Core Web Vitals scores if you aren’t currently meeting Google’s recommendations for the three Core Web Vitals metrics?

Each metric has its own set of strategies. The majority of optimizations entail following WordPress performance best practices, with a few exceptions — which is why choosing the best WordPress caching plugin will help you with no effort on your part.

 

How to Improve Largest Contentful Paint on WordPress

Setup page caching. If your WordPress host isn’t currently using server-side caching, you should definitely use a caching plugin to speed up your LCP.

Use a Content Delivery Network (CDN). A CDN allows distributing assets faster to visitors who are located far away from your site’s main data center if you have a wider audience.

Optimize Your Images. Your images, especially if your LCP element is an image, play an important role in your LCP. If you can find a means to reduce the size of your image(s), it will help them load faster.

Optimize your code. The loading time will be slowed if you load unnecessary CSS or JavaScript files before your primary content. Remove render-blocking resources from your WordPress site to resolve the issue. You should also minify CSS and Javascript files and remove any CSS that is no longer in use.

Use Server-Level Compression. Server-level compression can help you compress your site even more. The most common server compression algorithm is Gzip, but Brotli can also be used.

Use preconnect for Important Resources. This one is a little more complex, but it allows you to set up critical third-party connections early on to save load times.

Optimize browser caching. For the static files that your browser caches, you should select the appropriate option. You’ll be able to address PageSpeed Insights’ recommendation to “Serve static assets with an efficient cache policy.”

 

How to Improve Cumulative Layout Shift on WordPress

Optimizing for Largest Contentful Paint is the most straightforward metric since it is almost completely made up of WordPress performance best practices:

  1. Always Set Image Dimensions. Your images may cause the rest of your content to shift as they load if you don’t set image dimensions in your site’s code.
  2. Always Set Dimensions for Embeds/iframes. You’ll want to make sure that any embeds/iframes you’re using have the same dimensions as your images. Make sure to specify the height and width when embedding a YouTube video or Google Maps.
  3. Reserve Space for Ads. Ads are essentially another type of embed, but they deserve special attention because they are one of the most significant causes of Cumulative Layout Shift. Fix Issues With Font Loading. One big issue with the layout shift is how your custom fonts load. For example, if you’re using fonts from Google Fonts or Adobe Fonts, those can cause layout shift in two ways:
    • Flash of Invisible Text (FOIT)
    • Flash of Unstyled Text (FOUT)
  4. Be Careful With Dynamically Injecting Content. Don’t dynamically insert any content over existing content unless you’re responding to a user’s action.

 

How to Improve First Input Delay on WordPress

Optimizing for First Input Delay is the most difficult because it deals with code. You’ll want to limit heavy JavaScript execution so that the browser can respond to user inputs quickly.

You should start by removing unnecessary JavaScript, if possible.

As a result, you’ll be able to address PageSpeed recommendations such as “Reduce javascript execution time”, “Remove unused JavaScript”, and “Minimize main thread work”. The Delay Javascript Execution feature and the Load Javascript deferred option provided by Pegasaas will help you in resolving these issues.

In terms of the LCP, you may enhance your FID score by optimizing your code and images, using server-level compression, and using preconnect for important resources.

In general, if you’re not a developer, improving FID (First Input Delay) might be tricky. As a result, Pegasaas can help you save time and effort. On the other hand, Google has a good explanation of the more technical aspects of optimizing this metric.

 

Tips to Boost Your WordPress Performance if Core Web Vitals Don’t Improve

What if you start applying PageSpeed Insights recommendations and your Core Web Vitals scores aren’t as high as you’d like?

Take a look at the suggestions that we’ve provided. Following these steps will almost certainly improve your WordPress performance:

  1. Choose a hosting service that is faster. Hosting has an impact on server responsiveness, which is a major factor in the LCP grade.
  2. Don’t forget to optimize your images. As previously stated, image optimization can have an impact on both LCP and FID grades.
  3. Use only essential and lightweight plugins, make sure they’re performing well. Many plugins are used on WordPress websites. Because of their JavaScript files, the majority of these plugins have an impact on the front end – and you know how important JS files are for your site’s performance.
  4. Use your page builder to its full potential. Your page builder may also be able to assist you with file optimization. Take a look!

 

Start Optimizing Core Web Vitals on WordPress Today

You now have a better understanding of what Core Web Vitals are and how they affect performance. It’s time to optimize your site grades!

Not a Pegasaas member yet? Allow Pegasaas to perform the page optimization for you. You don’t even need to change any of the settings. You’ll see an immediate improvement in your Core Web Vitals scores with the naked eye.

Furthermore, you will no longer have to manage various web performance plugins. All you’ll need is Pegasaas to get an excellent Google page speed score and loading time. – We assure you that no technical knowledge is necessary!