In the realm of attracting visitors to a website, strategies to enhance the page’s search ranking through SEO (Search Engine Optimization) are crucial.

Central to this effort are Core Web Vitals, a concept proposed by Google as a key determinant in its search algorithm, similar to

• YMYL (Your Money or Your Life)
• EEAT (Expertise, Experience, Authoritativeness, Trustworthiness)

Improving site speed, a key indicator of Core Web Vitals, has become a paramount task in SEO strategies. This session will explain Core Web Vitals.

List of SEO On-page Strategies

• Character count for titles
• Meta description tags
• Setting headings (H tags)
• Placement of HTML tags
• Optimization of internal links
• Optimization of directory structures
• Implementation of breadcrumb navigation
• What is the alt attribute?
• Indexing strategies
• Implementation of structured data
• SSL certification (HTTPS)
• Setting canonical tags
• What is a sitemap?
• Setting robots.txt
• URL normalization
• Improvement of page display speed
• Presence or absence of ‘www’ in URLs
• Improvements to UI and UX
• Speeding up server processing
• Improvements to mobile friendliness
• Responsive web design

What Are Core Web Vitals?

Core Web Vitals are three metrics deemed essential by Google for providing an outstanding user experience.

Initially, Google evaluates websites based on seven key metrics, three of which constitute Core Web Vitals.

These Core Web Vitals include LCP (Largest Contentful Paint), FID (First Input Delay), and CLS (Cumulative Layout Shift), each with the following meanings.

• LCP: Measures the loading speed of a page
• FID: Measures the page’s responsiveness to user actions
• CLS: Measures visual stability to prevent layout shifts

Besides Core Web Vitals, Google emphasizes additional metrics that can serve as alternatives or supplements, such as

• TTFB (Time to First Byte): Server response time
• FCP (First Contentful Paint): Time until browser displays content
• TBT (Total Blocking Time): Time that actions are blocked
• TTI (Time to Interactive): The time until the page becomes interactive

The Three Metrics of Core Web Vitals

Core Web Vitals comprise the following three metrics

• LCP
• F.I.D.
• CLS

What is LCP? Speeding Up Page Display 

LCP (Largest Contentful Paint) refers to the time it takes for the content within a page to be rendered. Simply put, it’s the elapsed time from when a user clicks on a webpage to when it appears on their browser. LCP is also known as page load speed.

The evaluation criteria for LCP are as follows

• Good if LCP is less than 2.5 seconds
• Poor if LCP exceeds 4.0 seconds

Factors that slow down page display include embedding large file size images or videos. If pages take too long to display, visitors may quickly hit the back button, increasing bounce rates. Such browsing behavior is viewed negatively for SEO, so if LCP is low, implementing page speed improvement measures is necessary.

What is FID? Speeding Up Response to Actions 

FID (First Input Delay) measures the page’s responsiveness to user actions. For instance, measuring the time it takes for a page to react after a visitor starts browsing and clicks on a link. This metric helps determine if users can comfortably navigate the page.

The evaluation criteria for FID are

• Good if FID is less than 0.1 seconds
• Poor if FID exceeds 0.3 seconds

Thus, a lower FID value indicates a better rating.

If a site visitor clicks on a link and the page’s response is slow, they may perceive the site as difficult to use. If FID is high and the site feels sluggish, improvements should be made to address this inconvenience.

What is CLS? Crafting Measures to Prevent Mis-clicks 

CLS (Cumulative Layout Shift) quantifies layout instability of a page. Visitors use various devices and browsers, and if a page is incompatible with some browsers or not designed for different device sizes, the layout may break.

For example, if the layout appears fine on PC and mobile pages but breaks on an A4 size tablet, it could lead to a negative evaluation.

CLS is calculated as follows

• CLS = Area of ​​layout shift × Distance moved

And the evaluation criteria for CLS are:

• Good if CLS is less than 0.1
• Poor if CLS exceeds 0.25

Layout shifts can make a page difficult to navigate and may even lead to unintentional placement of banner links, inducing accidental clicks by visitors. Such user experiences can be stressful for site visitors, so it’s crucial to be mindful.

Metrics Related to Core Web Vitals 

While not Core Web Vitals, the following are highly related metrics

• TTFB
• FCP

What is TTFB?

TTFB (Time to First Byte) is a metric used to measure the responsiveness of a web server. It refers to the time it takes for the server to respond after a site visitor accesses the site. Therefore, improving TTFB speed can lead to enhancements in LCP.

What is FCP? 

FCP (First Contentful Paint) measures the speed at which content within a page is rendered. It refers to the time from when page rendering starts to when any content on the page is displayed, making it a metric closely related to LCP.

Tools for Measuring Core Web Vitals 

When you want to check your Core Web Vitals, please use the following tools

• PageSpeed ​​Insights
• Chrome UX Report
• Google Search Console
• Chrome Devtools
• Lighthouse
• Web vitals

PageSpeed ​​Insights 

PageSpeed ​​​​Insights is a tool for measuring page performance. To use it, simply go to PageSpeed ​​​​Insights and paste the URL of the page you want to check. Then, data for metrics like LCP, FID, and CLS will be displayed.

Google Search Console 

Google Search Console is a tool that lets you check your site’s access and indexing status. To use Google Search Console, you need to register your website first. It’s a crucial tool for implementing SEO measures. If you haven’t registered your site yet, start by completing the site registration.

To check Core Web Vitals, click on “Page Experience” in the menu.

Then click on “Core Web Vitals.”

This will display the Core Web Vitals information along with pages that are flagged with warnings.

Chrome UX Report 

The Chrome UX Report (or CrUX) allows you to check the performance and UX (User Experience) of your site. It enables you to examine your entire website, not just individual pages, which can be helpful for competitor analysis.

To use it, you need a Google account. Then, search for “Chrome UX Report” on Google’s service page and authorize its use.

After authorization, enter the domain of the site you want to investigate and click “Connect” at the top right of the screen.

Once the analysis results are displayed, click “Generate Report” at the top right of the screen.

After the report is generated, you can review the details for LCP, FID, and CLS.

Chrome Devtools 

Chrome Devtools is a feature equipped within Google Chrome that allows you to check page display speed. You can access Chrome Devtools as follows

Go to the Chrome browser menu → Development/Management → Developer Tools

Once you’ve opened the tool, click on “Performance.”

Then click on “Start profiling and reload page.”

By turning on the “WEB Vitals” checkbox, metrics related to page display speed will be displayed.

Lighthouse 

Lighthouse is a tool for analyzing websites, available as a Google Chrome extension.

First, install Lighthouse in Google Chrome.

Select Lighthouse from the Chrome extensions.

This will display the analysis results of the page and allow you to check the Core Web Vitals.

Web vitals 

Web Vitals is another Chrome extension similar to Lighthouse. Its function is to automatically display Core Web Vitals data for the pages you are browsing.

First, install Web Vitals from the following link.

Once Web Vitals is enabled, it automatically measures and displays LCP, FID, and CLS.

Improving Core Web Vitals

If you identify issues with any of the Core Web Vitals metrics, improvements are necessary.

Strategies for Improving LCP

Improving LCP involves increasing page display speed, and the following three methods are typically recommended

• Speeding up server response
• Increasing rendering speed
• Reducing file sizes

Specifically, measures include;

• Using a CDN
• Changing servers
• Lightening file sizes

To speed up page display, strategies that reduce the overall size of the page are effective. However, there are other methods to accelerate page display. Depending on the current server environment, improvements can also be achieved by migrating to a different server or revising settings .

Using a CDN 

A CDN (Content Delivery Network) enhances web page display speed by utilizing cache servers located around the world. The mechanism involves routing the data between the server where the website is hosted and the site visitor through a cache server.

Implementing a CDN not only reduces the load on the server where the website is hosted but also is expected to increase page display speed on the visitor’s browser.

Changing Servers 

Sites built several years ago often continue to use the servers they were initially set up on.

If the server is outdated and hasn’t been upgraded, it could negatively impact page display speed due to insufficient specs or functionalities. Therefore, after evaluating the server environment, consider changing servers if necessary.

Furthermore, PHP (PHP: Hypertext Preprocessor), a programming language that runs on the server side, is periodically updated. Be aware that some servers may still support outdated versions of PHP.

Reducing File Sizes 

Typically, image data occupies a significant portion of the page’s total size. Optimizing image data to reduce the overall size of the page can improve display speed. To optimize images, you need to review the following

• File size
• Image size
• Resolution
• Image format

SEO beginners first do SEO measures 5/Image optimization

Improving FID 

To enhance FID ratings, it’s essential to improve the page’s response speed to user actions.

The execution of page responses primarily relies on JavaScript. Thus, optimizing JavaScript’s behavior can improve FID. Specific measures include

• Removing unnecessary JavaScript
• Modifying JavaScript code

Removing Unnecessary JavaScript 

Over time, as a website is maintained, the source code accumulates. After testing, you may find remnants of JavaScript code that are no longer in use. The first step is to identify and delete any unnecessary code.

Modifying JavaScript Code 

If there are inherent issues with how the JavaScript is written, a review and revision of the code are necessary. Common problems include:

• Calling external files in the head tag
• Executing synchronous processes
• Overusing ads or plugins

In such cases, consider the following strategies

• Write directly (inline) in the head tag or place the code in the body tag
• Shift to asynchronous loading
• Remove unnecessary ads or plugins

Improving CLS 

Improving CLS requires identifying the causes of layout shifts. Common causes include:

• Not specifying image sizes
• Lack of mobile-friendly adjustments

Therefore, the following measures are necessary.

• Specify image sizes
• Ensure mobile-friendly design

Specifying Image Sizes 

When we talk about images here, it includes not only the main visuals and images within the page but also advertising content. Typically, when you place an image on a page, the image file is directly exposed, which can cause layout disruptions.

By specifying the size of the image files using HTML, which is a markup language, you can prevent layout disruptions. Specifically, you write it like this 

<img src=”image URL” width=”value” height=”value” />

This description instructs the image specified in the ‘src’ to be displayed. Additionally, ‘width’ specifies the width, and ‘height’ specifies the height of the image. For example, if you input the following values:

<img src=”image URL” width=”50%” height=”50%” />

The image data will be displayed at 50% of the screen size of the device, assuming the device screen is 100%.

Adapting for Mobile Friendliness

Mobile-friendly means automatically adjusting the layout according to the type of device. For instance, the screen size and aspect ratio differ between a computer and a smartphone. By making your website mobile-friendly, you can ensure it displays correctly on various devices.

On the contrary, if it’s not appropriately adapted for mobile, the layout may disrupt depending on the viewing device, so be cautious.

Common Questions about Core Web Vitals

Here we have compiled some frequently asked questions about Core Web Vitals.

Q: Are Core Web Vitals important for SEO? 

A: Very important.

Google has explicitly stated it influences their algorithm. Core Web Vitals essentially quantify the ease of use of a page for visitors. No matter how excellent the information you’re publishing is, if the page isn’t comfortable to browse, it stresses out visitors.

Q: When were Core Web Vitals introduced? 

A: They began implementation on June 16, 2021.

Core Web Vitals were announced in May 2020, and the search engine was updated on June 16, 2021, which is when Core Web Vitals were introduced.

Q: What are Web Vitals? 

A: Web Vitals are metrics proposed by Google to ensure users can comfortably use websites.

The particularly important three metrics are referred to as Core Web Vitals.

There’s also an extension called Web Vitals for Google Chrome, which is sometimes used as a proper noun for this tool.

Q: Is there an easy way to check Core Web Vitals? 

A: You can easily measure Core Web Vitals using a tool called PageSpeed ​​​​Insights .

Just go to PageSpeed ​​​​Insights through the link below and enter the URL of the page you want to measure to check the Core Web Vitals.

Summary

Core Web Vitals refer to three key metrics that Google deems essential for web pages: LCP, FID, and CLS. They numerically express aspects like page load speed, response of the page to user actions, and layout shifts. These metrics encompass factors related to how comfortably visitors can use your pages. To ensure a pleasant experience for visitors, check your Core Web Vitals and strive to improve them if necessary.

Author Profile

Mr. Takeshi Amano, CEO of Admano Co., Ltd.

Mr. Takeshi Amano is a graduate of the Faculty of Law at Nihon University. With 12 years of experience working in the advertising agency industry, he discovered SEO and began his research during the early days of SEO. He self-taught and conducted experiments and verifications on over 100 websites. Using this expertise, he founded Admano Co., Ltd., which is currently in its 11th year of operation. Mr. Amano handles sales, SEO consulting, web analytics (holding the Google Analytics Individual Qualification certification), coding, and website development. The company has successfully managed SEO strategies for over 2000 websites to date.

Return to the top of Japan SEO