What are “Core Web Vitals”? Explanation of definitions and specific improvement methods

For websites, page loading speed and user-friendliness are important. Core Web Vitals released by Google can quantitatively evaluate such elements.

For today’s Internet users, fast response times are a given. 93% said they would leave a website if the page did not load properly .

To improve user experience online, Google released a report of key web metrics called “Core Web Vitals”. This metric allows website owners to assess page speed, responsiveness, and visual stability.

Core Web Vitals reports give you valuable insight into your page’s performance, so you can improve your website’s chances of ranking higher in search .

But why is speed and user experience so important when running a website? As a reason, Google cites the following data.

  • Bounce rate increases by 32% when page load time increases from 1 second to 3 seconds
  • Bounce rate increases by 106% when page load time increases from 1 second to 6 seconds

A high bounce rate negatively impacts your revenue. If it takes a long time to load, your prospects will go to your competitor’s website.

But if you understand the metrics that matter and start improving your web pages, you’ll be able to improve your search rankings on Google and provide your prospects with a better experience.

Core Web Vitals

Table of Contents

What are Core Web Vitals?

Core Web Vitals refers to the three most important indicators of the “Web Vitals” index of page experience created by Google.

Google has long emphasized on-page user experience, and has included “mobile-friendly” and “https” in its search ranking signals, which greatly affect the experience value.

Starting in 2021, Core Web Vitals will also be included in the signals and become one of the ranking factors.

Impact of Core Web Vitals on Search Ranking

Know that Core Web Vitals also affect your Google search rankings.

Google believes page experience is important to improve user experience . On the other hand, the most important among them is not the page speed, but the quality of the content.

Page speed is used as an index for ranking when there is content of the same quality.

Therefore, the most important thing is to improve the quality of the content.

Page experience is important, but Google still tries to rank pages with high value overall, even if the page experience is poor. In other words, no matter how good your page experience is, your content will never outperform a great page. However, the page experience becomes even more important for search rankings when there are many pages of similar relevance.

On the other hand, Google has published data showing a 24% reduction in user abandonment rate by passing the Core Web Vitals threshold .

Even if the impact on ranking is small, improving Core Web Vitals numbers is important for SEO.

Three indicators of Core Web Vitals

Here, I will explain the meaning of the three indicators used in Core Web Vitals.

  • LCP – draw maximum content

    A measure of how quickly content on a page appears .This metric looks at the maximum content, not the entire page, and shows how long it takes for the largest piece of content to load. The theory is that the faster the heavy elements appear, the better the user experience .

    This is often a video, otherwise an image, or a large block-level text element. Google says that an LCP of 2.5 seconds or less is good.

  • FID – First Input Delay

    Simply put, it is the time it takes for a user to perform some action (click/tap a link or fill out a form) on the page . It can be said that the speed of FID is directly linked to the user experience , because if the reaction when operating is slow, it will cause stress .

    Google says FID of 100 ms or less is good.

  • CLS – cumulative layout shift

    It is a measure of how much layout shift has occurred in the entire page , and layout shift refers to the change in the arrangement of content while the user is looking at it.

    For example, the loading of the image is slow and the display position of the text is shifted while reading, and when you try to tap it, you accidentally press the banner that was loaded later.

    As an index, 0 means no layout shift at all. Google considers a CLS of 0.1 or less to be good.

Core Web Vitals measurement tools

Google recommends several tools that can measure Core Web Vitals .

Here, we introduce three main tools and measurement methods.

PageSpeed ​​Insights

A tool provided by Google that can measure each index of Core Web Vitals. Mobile and PC performance is evaluated on a 100-point scale in an easy-to-understand manner, making it easy to understand website issues. It also gives you points for improving each metric.

Here’s how to use PageSpeed ​​Insights:

  1. Enter the URL of the website you want to measure Core Web Vitals metrics in  Google’s PageSpeed ​​Insights .
  2.  Click Analyze.
  3.  Check the results. Both mobile and desktop performance are evaluated. You can switch between mobile and desktop using the tabs on the top left of the page.

I analyzed a HubSpot web page and got the results below.PageSpeed ​​Insights

Web Vitals (Extension)

It is one of the Google Chrome extensions, and it is a function that allows you to check the three indicators of Core Web Vitals introduced above with one click.

To use it, first visit the Web Vitals page on the Chrome Web Store and add the extension to Chrome.

After that, click the extension on the page where you want to check the Core Web Vitals index, and the result will be displayed in a popup.

Google Search Console

You can also check Core Web Vitals metrics in Google Search Console , a genuine Google tool that allows you to check search performance and index status .

After logging into Google Search Console, select “Key Web Metrics” from the left menu to open mobile or desktop reviews.

The results are based on Core Web Vitals, and like PageSpeed ​​Insights, you can also check points for improvement.

How to improve your Core Web Vitals numbers?

Improving page performance takes some effort, but you can approach the problem with a step-by-step approach.

  1.  Prioritize issues according to labels: Address the red items rated as poor performers first. Then we get to solving the larger issues that affect the most URLs, or the URLs that matter most. Then move on to the issues labeled “needs improvement”.
  2.  Create a list: Create a to-do list of issues in order of priority.
  3.  Share common fixes: There are dozens of ways to improve your Core Web Vitals metrics numbers.
    Below is a summary of the main causes of poor performance and how to improve each.

 

How to improve LCP

The following methods are effective for improving LCP.

CSS optimization

CSS, which defines how text and other things look on a web page, needs to be processed before the browser loads the page, so if it’s unnecessarily large, it can slow down loading speed.

For CSS optimization, methods such as deferring the loading of unimportant CSS, and conversely, inlining and extracting important CSS are effective.

Please refer to the link destination for each specific method.

image optimization

Large images on the page take longer to load, so optimize them.

Specifically, there are methods such as using image compression tools and plug-ins, outputting images of appropriate sizes for PC and mobile, and trying “WebP”, which has a higher compression rate than JPEG and PNG.

web font optimization

Web font data is often large, so if you apply it to a web page, the text can take a long time to load.

In order to avoid this, it is effective to split the font data and load the necessary parts preferentially, or defer the loading of the font data.

JavaScript optimization

JavaScript, which is essential for website pages, may be slowing down loading.

To prevent this, there are countermeasures such as deleting code that is not actually used, dividing the code and loading only the necessary part first.

If you want to know more about specialized measures, please refer to the following pages.

  • Applying Instant Load with PRPL Patterns
  • Optimizing the critical rendering path

How to improve FID

The following adjustments are expected to improve your FID score. Please refer to the link for specific improvement methods.

Mitigate the Impact of Third-Party Code

If you use social media related tools, A/B testing tools, analytics, advertising tools, etc. provided by third parties (external vendors, etc.), this effect may increase the FID.

In this case, you can remove unused third-party scripts, or use lazy loading to efficiently load third-party scripts.

A great way to find out which third-party tools are making the biggest impact is Google’s developer tool, Lighthouse .

Reduce execution time of JavaScript scripts

Execution of JavaScript can increase network traffic and memory pressure on the viewer’s device, resulting in longer FIDs.

To solve this, there are methods such as compressing the JavaScript code by shortening or splitting the code, and removing currently unused code.

Minimize Main Thread Processing

Of the “threads” that refer to the unit of program processing, the main thread is the first to perform processing.

Web page loading can also be speeded up by minimizing main thread processing.

Keep Requests and Transfer Sizes Down

When a web page is displayed on a device, a request is made to transfer each element such as images, fonts, documents, CSS, and JavaScript over the network.

As for images, if there are 3 images on the page, I will send 3 image requests. Reducing this number may reduce the transfer size and speed up page loading.

To reduce the transfer size, there are methods such as reducing the number of images, removing unused JavaScript code and CSS, and compressing images.

How to improve CLS

Some best practices also exist on how to reduce unexpected shifts and improve CLS. Use this as a guide to avoid situations where banner ads move around and you accidentally click on an ad.

For images and videos, specify size attributes and fix CSS aspect ratios

By doing things like this in CSS, we can tell the browser how much space these elements need before loading the image or video.

Browsers will now be able to reserve space before loading heavy videos and images, preventing elements from blurring while the user is viewing them.

After displaying the content, display additional content at the top of the page to prevent display gaps

If other content such as related articles appear at the top of the page with a delay after the content is displayed, the entire page will be out of alignment. Avoid this as it can also cause users to click on your content by mistake.

The only exception is when responding to user actions where a shift is expected to occur.

Do not use animations that cause display misalignment

Due to the way animations are implemented, there are cases where layout shifts occur.

Some CSS properties are re-executed from “Layout” in the browser rendering process, so it is effective to replace properties that affect layout collapse with “transform”.

Once you’ve fixed any of the issues, check your Core Web Vitals in Google Search Console to see if your numbers have improved.

Clicking Validate Fix will initiate a 28-day monitoring session to validate your site for any issues. If the issue does not occur during this period, it is considered fixed.

As with all ranking factors, pitfalls are hidden in plain sight.

To ensure that no detail is overlooked, we recommend that developers and technologists interested in learning more about optimizing Core Web Vitals take a look at Google’s LCP, FID, and CLS optimization guides .

What is the future development of Core Web Vitals?

Core Web Vitals will be included in Google Search ranking metrics from mid-June 2021, with full-scale rollout completed in September 2021.

Initially, we announced an update schedule for May 2020, but the release was postponed in consideration of the impact of the global spread of the new coronavirus.

One thing to keep in mind when preparing your website for Core Web Vitals is that these metrics are only part of Google’s existing search signals .

Our search ranking criteria also take into account guidelines for mobile compatibility, HTTPS security, browsing safety, and intrusive interstitials .

With the introduction of Core Web Vitals, important changes have also been implemented for website owners.

“A change to target non-AMP content to appear in Search’s ‘top news on mobile’ feature was also released in May 2021. This will allow us to display any page that adheres to the Google News Content Policy. It will also prioritize the best page experiences in search results rankings, whether implemented using AMP or other web technologies.” (Source: Google )

Leave a Comment