Core Web Vitals

A Complete Guide on Google Core Web Vitals

Google focuses on Great User experience as its key ranking factor. To ensure this, Google has come with many updates like Mobilegeddon, core updates, etc. But, Core web vitals was unique and focused on loading speed with core metrics 

Google Core Web Vitals was introduced as one of the ranking factors on 17 June 2021.

Since this has become one of the key ranking factors, many websites couldn’t recover their organic rankings. Even the nearest Broad Core Update that happened in May 2022 focused much on the usability of web pages.

Many website owners, and SEO marketers, need their website to have a great user experience. But how?

This article will break down all the mysteries and concepts behind core web vitals. Let us move on to grab the complete concept.

What is Core Web Vitals?

Core Web Vitals are the group of web essentials that help measure a web page’s performance on chrome lab and real-world data. The three attributes of core web vitals are loading speed, visual interactivity (responsiveness), and the stability of the web page.

Core web vitals is a part of the Page experience applicable for mobile and desktop. This has become vital to optimizing web pages for a better user experience.

Each metric has its implications for understanding how users interact with your web pages. These metrics can change over time, yet, the current google’s core web vitals are Large Contentful paint (LCP), First Input Delay (FID), Cummulative layout shift (CLS)

Google Core Web Vitals

Why Do Google Core Web Vitals Matter?

Google’s search advocate John Mueller once answered a question on Reddit stating, that Core Web Vitals are more than a tie-breaker. Since, this update, many websites have lost their positions due to a lack of great user experience.

John Mueller still emphasizes, that relevancy is the most credible Google ranking factor. But, when two websites with a similar score on relevancy tie-breakers, Core Web Vital decides the winner.

No website owner, developer, SEO professional today will take CWV in a lighter side. We have practically seen many websites that were underperforming shooted up, only by fixing the web vitals of all web pages.

Google is also continuing to improve the performance of mobile websites. They company haves shifted its focus to making it easier for people to purchase items on secure networks, and it has additionally started to reward fast-loading sites.

The introduction of web core vitals is part of its strategy to make it easier for businesses to succeed online.

What are the Metrics of Core Web Vitals

Google focuses on three key metrics that measure a user’s experience while navigating a web page. They are: 

  • Large Contentful Paint (LCP) – Website Loading Speed
  • First Input Delay (FID) – Visual Interactivity
  • Cumulative Layout Shift (CLS) – Visual Stability, 

The three metrics scores are part of the Google Page Experience Signal. It also considers other features such as Safe Browsing and Intrusive Interstitials.

Largest Contentful Paint (LCP):

The Largest Contentful Paint measures the time it takes to load a web page’s large text block or image to render in the browser’s window. LCP doesn’t calculate the time taken to load the complete website. 

The largest part of the web page loaded is often referred to as the point in time when a page’s content has been delivered. In simple, LCP calculates the largest element of a webpage, and the elements can be text, image, video, etc.

The terms used to describe this process are the DOM or Content Load, but Google claims that this is a metric that only measures the time it takes to render a large image or text block. 

If a page’s content takes a long time to load, it might be affecting its search engine rankings.

Largest Contentful Paint - LCP

LCP starts its measurement only when it loads the largest content of the webpage, till then it waits as the first resource will not always be the largest.

Google recommends LCP of any web page or website should be less than or equal to 2.5 seconds.

Google’s LCP guidelines:

  • Good – Less than or equal to 2.5 seconds
  • Need Improvement – 2.5 to 4.0 seconds
  • Poor – More than 4.0 seconds

What are the reasons for Poor LCP

Largest Contentful Paint Errors as per Page Speed Insight

There might be various reason for poor LCP (loads higher than 4 seconds). You can check the issues by analyzing via page speed insight test.

The above image is the LCP issue that was figured by page speed insight test.

  • Render-blocking by JS (JavaScript) or CSS (cascading style sheets) on your site.
  • Slow server response.
  • Images without lazyload.
  • Slow resource loading time.
  • Client-side Rendering.

How to Fix Poor LCP?

  • Optimize CSS files (Minify)
  • Remove unused CSS files
  • Optimize JS files (Minify & Combine)
  • Defer JS files & Delay JavaScript execution.
  • Remove unused CSS files
  • Use lazyload to Images
  • Compress Images, and create in New Generation format.
  • Optimize the webfonts.

If your websites are built in WordPress, we recommend to use cache plugins like WP rocket, or Nitro Pack, to resolve these issues.

Also, we recommend to use cloud based servers to reduce server loading time.

First Input Delay (FID):

The First Input Delay measures the visual interactivity of a webpage. FID is calculated by the time browser takes for a user to interact with a web page after they click any button, or link.

The page will be more responsive, if the browser reacts faster.

FID is used to accurately measure certain user interactions, such as scrolling or zoom. Because these actions often don’t run in the browser’s main thread, and can’t be accurately observed.

One of the factors considered when it comes to optimizing a website is the experience that its users have when they navigate through its pages.

First input delay is a great way to monitor and improve the overall responsiveness of the websites.

FID also serves as a link between the various performance metrics that Google has listed.

Just think of clicking a button on web page, and it doesn’t loads, or consumes much time. Frustrating is it? Same applicable to the users when experience a delay in response from the browser.

As the websites become more complex with JavaScripts of various size. These JavaScripts increases number of requests in browser. As the number of request increases, the interaction time also extends.

First Input Delay

Focusing on the FID will speed up the process of getting content on the screen and making it interactive.

The FID measures every interaction that occurs during page loading. A tap, a click, and a key press are input actions, not interactions like zooming or scrolling.

Google recommends FID of any web page or website should be less than or equal to 100 milliseconds

Google’s FID guidelines:

  • Good – Less than or equal to 100 milliseconds
  • Need Improvement – 100 to 300 milliseconds
  • Poor – More than 300 milliseconds

What are the reasons for Poor FID?

Reasons Causing Issues in FID

There might be various reason for poor FID (loads higher than 100 milliseconds). You can check the issues by analyzing via page speed insight test.

The highlighted points in the above image of page speed test results could be the reasons.

  • Render-blocking by JS (JavaScript) or CSS (cascading style sheets) on your site.
  • Unused CSS files
  • Unused JavaScript files

How to Fix Poor FID?

  • Remove unused JavaScripts
  • Remove unused CSS files
  • Delay JavaScript execution.
  • Eliminate Render blocking resources.
  • Reduce third-party code.
  • Minimize main threads
  • Keep low HTTP requests.

If your websites are built in WordPress, we recommend to use cache plugins like WP rocket, or Nitro Pack, to resolve these issues.

Cummulative Layout Shift (CLS):

The cumulative layout shift (CLS) measures the visual stability of the web pages.

For instance, if a visitor loads a page while reading it, a banner will suddenly appear and go down, resulting in a higher CLS metric score.

It’s almost as if the entire layout of the page changes continuously, resulting in a series of shifts cumulatively. 

The issue happens when the page fails to load appropriate content after being allotted.

For instance, if you have an image that’s too large, you might have decided to delay its load until the critical content has been delivered.

A sidebar widget that adds a link to the main article pop-up sometimes. This type of layout instability can be considered a Cumulative Layout Shift.

A score based on the total number of unexpected layout shifts appears.

Cummulative Layout Shift

Google recommends CLS of any web page or website should be less than or equal to 0.1

Google’s CLS guidelines:

  • Good – Less than or equal to 0.1
  • Need Improvement – 0.1 to 0.25
  • Poor – More than 0.25

What are the reasons for Poor CLS?

What Causes CLS Issues_

There might be various reason for poor CLS (score higher that 0.1). You can check the issues by analyzing via page speed insight test.

The highlighted points in the above image of page speed test results could be the reasons.

  • Pop ads that causes Intrusive Interstitials (As they are not well-optimized JavaScripts, and are from external server)
  • Images are another reason for poor CLS. Image elements that do not have explicit width and height always lead poor CLS.
  • Images that are not served in new generation formats like webp and avif also cause poor CLS.

How to Fix Poor CLS?

  • Avoid heavy and extensive Pop-up Ads
  • Use only Pop Ups that can be easily closed
  • Serve images in new generation formats.
  • Image elements should have explicit width and height.
  • Always use lazy load for images.

Other Speed Performance Metrics:

Apart from the three-core web vital metrics, other website performance metrics are considered in the overall ranking of a website.

First Contentful Paint (FCP):

The first contentful paint is when the browser finishes rendering the first bit of content from the page’s DOM. It provides feedback to the user about the page’s loading state.

To provide a good browsing experience, Google recommends that a site visitor has a First Contentful Paint score of 1.8 seconds or less.

FCP is the time when the browser shows the first bit of content coming from the DOM.

The FCP is measured when the browser first rendered any image, text, or background images, without any additional software. It includes all of the text with pending web fonts.

The First Contentful Paint score is a critical metric for website owners.

To improve FCP, use a faster server, create more critical CSS, and reduce their DOM size.

Websites can also serve ads in next-gen formats to enhance the FCP.

Google’s FCP guidelines:

  • Good – Less than 2 seconds
  • Need Improvement – 2 to 4 seconds
  • Poor – More than 4 seconds

Speed Index

The Speed Index is a performance measure that shows how quickly pages are loaded.

Calculated by taking into account the average time it takes to display the various parts of a page, the speed index measure performance of a website.

It shows you the fastest loading times and the most likely time it takes to load.

The speed index is a metric that shows how quickly the pages’ contents are displayed.

Speed Index considers the average time it takes to display the visible parts of the page. The score is also adjusted depending on the size of the page’s viewport.

To improve the speed index score, reduce the number of threads and JavaScript execution time.

Google’s Speed Index guidelines:

  • Good – Less than 4.3 seconds
  • Need Improvement – 4.4 to 5.8 seconds
  • Poor – More than 5.8 seconds

Time to interactive

The Time to Interactive metric is a non-standardized way of measuring web performance.

It shows how fast the last long task was completed and how quickly the main thread and network were inactive.

One of the factors considered when it comes to optimizing web performance is having a Time to Interactive score of fewer than 3.8 seconds.

This metric compares the time it takes for a page to load on mobile and desktop.

The TTI is a user-centric metric that shows how quickly a page loads and interacts with its users.

It can help determine if your website is still sluggish or not working. One of the most common factors that can affect this metric is the use of JavaScript

Google’s Time to Interactive guidelines:

  • Good – Less than 3.8 seconds
  • Need Improvement – 3.9 to 7.3 seconds
  • Poor – More than 7.3 seconds

Total Blocking Time

The total blocking time metric measures the amount of time the main thread of a program is blocked to prevent the input responsiveness of the program.

 Good TBT should be less than 300 MS in a network connection and device.

The total blocking time is added to the long tasks between Time to Interactive and First Contentful Paint. It is done to prevent the users from accessing the main thread.

The total blocking time is a metric used to measure the responsiveness of a page to load.

It helps determine the severity of the page’s non-interactive elements before it can be reliably interactive.

Google’s TBT guidelines:

  • Good – Less than 200 milliseconds
  • Need Improvement – 201 to 600 milliseconds
  • Poor – More than 600 milliseconds

Page Performance Scores:

Page Performance Scores

Performance measures how quickly a page loads and displays in the browser. Page optimization is a process that involves improving the speed of pages.

It is done through various methods such as web speed testing and optimization.

Having a good website page is very important for any business as it influences how users feel about a company and its associated brand.

First impressions are also important when it comes to converting potential customers and buying.

The Page Timings report provides a detailed analysis of a page’s performance. It can be used to analyze individual page attributes and improve the efficiency of Web pages.

To see how a page is doing in Google Analytics, go to the All Pages section. There, under Behavior, you can find the page content. If you can’t find it, it’s because it’s not within the first ten results.

Google’s Page Performance Score guidelines:

  • Good – More than 90
  • Need Improvement – 50 to 90
  • Poor – Less than 50

Understanding Core Web Vitals Report:

The Core Web Vitals report shows how your pages perform based on real-world usage data. The longer your page load times, the more likely it is that your visitors will bounce.

The three metrics of core web vitals are:

The largest contentful paint (LCP) is a measure of how long it takes for a page to load from the perspective of a user. It takes into account the time it takes for a user to navigate a certain section or page.

The first input delay (FID) is a measure of how long it takes for a user to interact with a page. It takes into account the time it takes for a user to load and navigate through the content.

The cumulative layout shift (CLS) is a measure of how stable a page is when it loads and achieves visual stability. It considers the number of times page elements shift on screen, which makes it hard for users to interact with the content on smaller screens.

The core web vitals are measured using certain tools that include the,

  • Google Search Console
  • Page Speed Insights
  • Lighthouse
  • Chrome DevTools.
  • Chrome UX report
  • Web Vital Extensions.

Google Search Console

Google Core Web Vitals Reports by Google Search Console

You can get the details of Core Web Vitals in Google Search Console tools. This tool provides a seperate section to list the number of URL that are Good, Need improvement, and Poor to the test.

This tool will never provide the score of each core web vital metrics. As mentioned in the above image, it exactly share the reasone like “LCP Issue: longer than 4s (mobile)” with number of URLs affected.

You can fix the core web vitals of the URLs that are affected.

Page Speed Insight Test:

Core Web Vitals by Page Speed Insight Test

When you need the Core Web Vitals score for every web pages, you can run through Page Speed Insight test.

This test provides you the details like,

  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumulative Layout Shift (CLS)
  • First Contentful Paint (FCP)
  • Interaction to Next Paint (INP)
  • Time to First Byte (TTFB)
  • Time to Interactive
  • Speed Index
  • Total Blocking Time (TBT)

Lighthouse Test:

Core Web Vitals Report by Lighthouse

You can also use Lighthouse tools to validate the Core web vitals of every web page.

Apart from performance, it also estimates the results of accessibility, best practices and SEO

You will get the following performance metrices,

  • Largest Contentful Paint (LCP)
  • Cumulative Layout Shift (CLS)
  • First Contentful Paint (FCP)
  • Time to Interactive
  • Speed Index
  • Total Blocking Time (TBT)

Chrome DevTools:

Chrome Dev Tools

DevTools by chrome helps to diagnose the stability of web pages, and to figure out what causes visual instability of a page that contributes to poor cumulative layout shift (CLS) of a page.

DevTool also provide the details of Total Blocking Time (TBT), and First Input Delay (FID)

How to Fix Core Web Vitals?

1. SEO Friendly Web Hosting:

The primary step to improving the Google Core Web vitals is by connecting your domain with SEO-friendly web hosting. We recommend purchasing Cloud based hosting like AWS, Google Cloud, Digital Ocean, etc.

These hosting are dedicated and have minimum uptime of 99.99%. So, the server-related issues 5xx will be relatively zero.

Hosting is important to optimize initial server response time, and total blocking time.

2. Image Optimization:

Images should be in webp or avif format with less than 100 kb in size. Besides this, always compress the image before uploading them.

Always use lazy loads for images, and provide proper dimensions for the image, this can help in better LCP and CLS.

3. Minify JavaScript and CSS files:

Using bulky JavaScript and CSS files can increase the website loading speed, and harm the core web vitals.

Usually, there you can minify or combine JavaScript and CSS files. This can reduce the overall size, and improve a web page’s performance.

4. Delay JavaScript Execution:

JavaScripts can increase the loading speed, and web pages are made of multiple JS files. When you delay the execution of these files, the page opens without loading all JavaScript files.

This can reduce the initial loading time or FID of the web page. While performing delay in execution of JavaScript, these files will load only when viewers scroll near them.

5. Reduce Unused CSS and JS files:

Every webpage consists of various CSS or JS files, that are not needed, or not used. These are known as Unused CSS or JavaScript files.

These unwanted resources also loads as the web page gets request from browser.

So, reducing or removing the unused resources can obviously increase the web page performance

6. Use Cache Plugins for WordPress Site:

If your websites are built in WordPress, we recommend using cache plugins like WP rocket, or Nitro Pack, to resolve these issues.

These plugins give the options of all the above points like,

  • Lazy load images
  • CDN (Content Delivery Network)
  • Reduce unused CSS and JavaScript files
  • Minify and Combine JavaScript and CSS files
  • Delay JavaScript Execution.
  • Defer Off Screen Loads and many others.

7. Use Only Light Weight Theme and Website Builders for WordPress:

Using lightweight themes, and builders can keep your DOM size under control. DOM increases the FCP of web pages.

Use Themes like Astra, Generatepass, and Website builders like Oxygen, and Elementor

Conclusion:

  • The core web vitals are a set of factors that Google considers when assessing a webpage’s overall user experience.
  • These factors include page speed, interaction, and contentful painting.
  • The core web vitals metrics will be used to measure a page’s performance.
  • Some factors included in this score are the browser’s responsiveness, the lack of interstitial pop-ups, and the safe-browsing feature.
  • It’s widely believed that the core web vitals will be the main factor that contributes to a web page’s page experience score.
  • However, it’s important to note that a great page experience score doesn’t automatically translate into a high ranking on Google.
  • The search engine giant confirmed that page experience is one of the many factors it uses to rank websites.
  • Getting the most out of a website is a challenge that can be daunting if the websites don’t have the proper combination of technical expertise and web development experience.
  • Having the right agency partner can help websites achieve their goals and maintain a steady flow of traffic through organic search results.

Leave a Comment

Your email address will not be published. Required fields are marked *