Core Web Vitals: The Complete Explanation and Optimization

What are Core Web Vitals?

Core web vitals are factors that are considered very important by Google in determining user experience on a website. In line with Google's mission to provide information to users, users are the main focus of the search engine.

These factors identify user experience with 3 primary metrics, namely largest contentful paint (measure page loading speed), first input delay (measure the response to users interaction), and cumulative layout shift (page layout stability).

Google says that users' likelihood to leave a web page will decrease by 22 percent if webmasters can improve these three factors. Of course, this will also affect SEO. First, let's talk about the three factors above.

Largest Contentful Paint (LCP)

LCP is the time web page takes to render the largest visible content element in the website view, starting from the time user accesses the URL. Not only is loading time an important factor ensuring user experience, but pages that load quickly tend to rank higher on Google.

If the page takes too long to display content, then visitors will tend to leave the page. Search engines will also rate it as a low-quality page. These metrics typically measure page elements:

• Picture
• Image tags.
• Video thumbnails.
• Background image with CSS.
• Text elements such as headings and paragraphs

The recommended LCP is no more than 2.5 seconds for the page to load.

First Input Delay (FID)

If LCP is the time it takes to load a page element, then FID is the time the website takes to respond to the users’ interactions. The interaction is in the form of clicks or inputs to web pages.

Websites use a lot of technology and content widgets to facilitate the delivery of information. These elements can improve content delivery, but can also cause delays that require visitors to wait for a response from the search engine.

Website developers need to reduce the time users spend waiting for the browser to respond to their input in order to improve site performance. A good FID should be under 100 milliseconds.

It should be noted that FID is difficult to measure because this data can only be measured in the field. FID score depends on variables beyond the control of the web owner such as the capabilities of the user's device and their Internet speed.

Cumulative Layout Shift (CLS)

The next is CLS, a metric that measures the stability of page layouts. Site owners must ensure that it is easy for users to access buttons and links on their pages.

Positioned elements can confuse users and detract from their good experience on the page. So, it is important to make sure all the content stays in place once the page loads on the users' devices.

In simple terms, this metric helps site owners understand if content such as text, buttons, and banners, links shift when a user reads the content on a particular page. Site owners are suggested to keep the CLS at 0.1 or less.

Why are Core Web Vitals Important?

Google announced core web vitals as a ranking factor since 2020, with the aim of improving user experience in search activities. So, the three metrics above will have a big impact on page experience scores.

High-quality content must be supported by a high page experience score to get a high ranking on Google. Thus, core web vitals become an important part of SEO activities.

Checking the Core Web Vitals Score

To check if your website is well-performing, the tools below can help with the process:

• Google Search Console: provides an overview of your site's user experience. Google evaluates page experience metrics for each URL namely; core web vitals, Mobile Usability, HTTPS usage.
• PageSpeed ​​Insights: reports on page performance on mobile and desktop devices, and provides suggestions on how to improve the page score.

The Significant of Core Web Vitals on SEO

Core Web Vitals should not be forgotten when implementing SEO. If your website has high-quality content but does not optimize core web vitals, the results you want to achieve will not be optimal.

You need to make sure your website's LCP, FID, and CLS scores are optimal. Ultimately, you need to consider all the ranking factors determined by the search engines to reach the top SERPs.

How to Improve Core Web Vitals Score

Because core web vitals are one of the ranking factors, it's time for webmasters to improve it as part of the SEO process. Here are some actions you can implement to increase your core web vitals score for SEO. However, please note that optimization results will vary depending on the website itself.

Largest Contentful Paint (LCP)

LCP focuses on what matters most about the user's ability to see all the information on the page. You can check your LCP score via Google PageSpeed ​​Insights. This tool is also able to show which areas need improvement.

Google has an LCP guide where it categorizes LCP speed into 3 statuses; Good, Needs Improvement, and Poor.

In short, if you want a good LCP score, your page should be able to load full content in 2.5 seconds or less. To improve, it takes careful execution and effort, even more so if your site has a lot of features. Here are some actions that can be taken to improve the LCP

• Optimize your servers: improve how and where your servers handle your content. Use Time to First Byte (TTFB) to measure server response time.
• Use Lazy Loading: lazy loading makes the image feature only load when users scroll your page down. With this implementation, you can improve LCP significantly.
• Optimize large elements on pages: on Google PageSpeed ​​Insight you can find out which elements on your page are slowing down the LCP. Optimize this element to increase the LCP score.
• Minify CSS: CSS can contain characters, spaces, indentation, and more that search engines don't need. Minimizing it can speed up page loading times.
• Reduce JavaScript blocking time: Download and serve the minimal amount of JavaScript required to the user. Reducing the number of JavaScript blocks can speed up rendering and score better LCPs.

First Input Delay (FID)

As stated earlier, FID measures how quickly users can interact with your page and the time it takes to respond to their interaction. Examples of the interactions are:

• Select menu
• Clicking the link
• Filling email or other data into the field

For web pages that have a lot of user interaction features, optimizing the FID is a must. A good score for FID is 100 milliseconds. 

To improve it is not easy because it can be influenced by the users' factors.

• Optimize JavaScript: The more JS files you use, the harder it will be to load. Simplify the JS file, then the loading time will be faster. When the user clicks on something while the JavaScript file is being processed, the browser is unable to respond to the user. If your FID score is red, you need to split the JavaScript file so the browser can alternate between processing the JavaScript and responding to the user.
• Break Down Long Tasks: If you have been trying to reduce the amount of JavaScript that loads on a single page, breaking up long-running code into smaller, asynchronous tasks will help you.
• Reduce JavaScript execution time: limiting the amount of JavaScript on the page reduces the amount of time it takes the browser to execute JavaScript code. This will also speed up the browser to respond to each user interaction.

To optimize your FID score, Google recommends running an audit at Lighthouse and evaluating your site.

Cumulative Layout Shift (CLS)

The next is how to improve CLS which measures the user's visual experience. Users certainly want the page's layout they open to be stable and not change much after the loading is complete. A good score for CLS is 0.1 or less. 

Some tips for optimizing CLS:

• Set image dimensions: Always include width and height size attributes on your images and video elements. This ensures that the browser has allocated the amount of space in the document when the image is loaded.
• Make sure the ad elements have a certain amount of space. Otherwise, the element may suddenly appear on the content page, pushing the content down, up, or sideways.
• Dynamic content deployment: Avoid inserting new content on top of existing content, except in response to user interaction.

You can check your CLS score on Google PageSpeed ​​Insight and find diagnostics for the issue. With this feature, you can improve the areas that need optimization.

That is the complete explanation and guide on Core Web Vitals which is closely related to SEO. Improving Core Web Vitals can have a positive effect on SEO. You can apply the tips above to get better scores and rankings on search engines like Google.