April 24 2021

Core Web Vitals: A Guide to Google's Core Web Vitals Vital Signs

How to measure Google Core Web Vitals to rise in Google page rankings.

Google Core Web Vitals Banner Guide
Print Friendly, PDF & Email

It has been an increasingly difficult task for Google to quantify the quality of a website's user experience, leading to the creation and development of tools to measure every aspect of the user experience. Tools often used to measure user experience on a website include PageSpeed Insights, Lighthouse and Google Search Console.

In a move to make it easier for webmasters to track and improve their user experiences, Google unveiled the report " Core Web Vitals ”On May 5, 2020 in the Google Search Console. The report draws its data from the Vital web engine, simplifying the web experience landscape into three homogeneous metrics. Google calls them "the three most important metrics for all web experiences".

The update is intended to make it easier (at least in theory but we will see that this is not the case) for webmasters and site owners to make improvements to their websites without having to hire performance gurus or go through numerous complex analytics reports. It also aims to help Google rank websites for their UX in searches.

What are the main vital parameters of the web, i Core Web Vitals ?

The three Core Web Vitals represent the three distinct phases of the user experience: in relative order we can define them, the loading experience, the interactivity of the site and the visual stability of the contents of a website page. The three are designed to be quantifiable and consistent improvements to these metrics that ultimately improve the user experience in the "real world".

Using the Google search console, you can analyze a website to see how many URLs are rated as "poor", "needs improvement" or "good". This makes the analysis simple enough for novice webmasters and website owners for understand the performance report .

What metrics are measured in Core Web Vitals?

According to Google, the three metrics discussed below are used as core web vital elements. However, Google also said that these metrics are set to evolve over time and, therefore, it's important to keep up to date with Google's latest metrics. The three metrics are;

  • Largest Contentful Paint  (LCP)
  • Cumulative Layout Shift  (CLS)
  • First Input Delay (FID)

Translated to make the idea better:

  • The time of loading the content   (LCP)
  • Cumulative shift of the layout   (CLS)
  • First entry delay (FID)

Large Contentful Paint (LCP)

The first metric analyzed in the vital signs of any online website, LCP measures load performance; the average time it takes to load the largest element of the page content into the view.

The size of the element is mainly determined by its size visible to the user in the viewport. Any content outside the user's view, cropped or invisible, will not count towards quantifying the size of the item. Furthermore, only specific categories of items are considered to be part of the LCP:

  • Elements of the image
  • Elements with background images loaded via the URL function instead of the CSS gradient
  • Image elements within an SVG element
  • Video elements
  • Block-level elements containing text nodes or any other line-level elements

Since the largest element on a page can change as the page loads, Google considers the newer and larger element until the page is fully loaded or the user begins interacting with the page's content.

First Input Delay (FID)

FID is a metric that measures the interactivity of a website. Measures how long it takes the browser to respond to a user click on a button, link, or JavaScript-based control.

However, sometimes the main thread is busy and unable to respond to user commands. This is called input latency, often caused by the user's browser being too busy handling heavy JavaScript files. When the browser is in input latency, there is a delay between the input and the action.

The first input delay is designed to focus solely on user-controlled events such as taps, clicks, and button presses instead of on-page interfaces such as zooming and scrolling.

Cumulative Layout Shift - Cumulative Layout Shift (CLS)

Have you ever been one click away from selecting an image, video or link on a page and suddenly it winces, updates or moves and you're suddenly in the AppStore? That move / jolt is caused by a cumulative shift in layout or in layman's terms; how much a page moves during loading. Google strongly intends to prevent CLS as a negative user experience that can be annoyed.

The browser measures CLS by evaluating two separate frames for the size of their respective windows with respect to the movement of unstable elements in the windows. The result is a product of the distance function and the impact function. Basically, Google will be able to tell when elements on a page are moving too far and rank them lower on search results pages.

What tools can you use to measure the main ones Core Web Vitals?

Since the three main vital elements of the web are a fundamental element in updating the Page Experience, Google incorporates metrics into the tools commonly used to optimize pages by webmasters and SEO. Since we all need to measure the success of the Core Web Vitals of our sites, it's okay to get the right tools for the job.

Pagespeed Insights

Pagespeed Google insights is one of the most used tools for measuring page speed. In addition to allowing the webmaster to view their page's score, they also include metrics from Core Web Vitals which are useful for the user as they give them information on how good the page is.

Pagespeed Insights is an excellent tool for measuring the success of SEO efforts . However, it's not the best option if you intend to optimize your site for Core Web Vitals as there are many missing details in the tool. For example, to check pages that need improvement on specific core web vital elements, you'll need to go back to the Google search console.

Google Search Console

When you try to check a particular page for its Core Web Vitals, simply log into your website's Google Search Console and select the button Core Web Vitals on the console sidebar and a report will appear.

If you want to check the report, click "Type" and Google Search Console will show you the pages that are currently running "Poor", "Needs Improvement" or "Good". Once you have identified the pages that need optimization for Google's key vital data, you can now proceed to use PageSpeed Insights to see tips on how to optimize these specific pages.

Chrome user experience report

This Chrome user experience report provides real metrics on how Chrome users perceive websites.

The metrics are driven primarily by real data. The report compares the actual user experience of a website with local or virtual tests in simulated and defined environments. With this comparison, you will be able to clearly see the set of variables that form and lead to a good user experience.

Chrome Dev Tools

Chrome Dev Tools is a suite of website development tools built into Google Chrome. With these tools, you can quickly edit web pages on the fly and fix errors to create quality websites faster.

Additionally, Chrome Dev Tools allows the site owner or webmaster to find and fix problems related to visual instability on a web page, which can cause Cumulative Layout Shift (CLS).

Web Vitals extension

The metrics Core Web Vitals are also available for webmasters and site owners in a new extension. By providing real-time feedback on all three major web vital parameters, this extension is consistent with Chrome's tests and reports using metrics on Google and other tools. Not only will it help the webmaster diagnose their web pages on the go, but it will also help measure the performance of a competitor's pages you want to match or beat. You can save time, adapt to market situations faster and become more efficient with your commands by using the Web Vitals extension.

How to Analyze Desktop and Mobile Web Vital Scores

Independent analysis on Web Vitals can be accessed across desktop / laptop and mobile devices. In some of the tools discussed above, you can run a test or query on a specific device category and, when both are available on the same tool (such as Google PageSpeed Insights), you can easily switch between them. The default setting for PageSpeed Insights is mobile stats, and you'll need to switch to the desktop tab to see the difference between the two device categories on your pages.

The Google search console now presents metrics for Core Web Vitals when Chrome user experience data is available. When you log in to Core Web Vitals, both device categories are displayed in the Google Console dashboard. From here you can view the page groups that are having problems.

To see your desktop and mobile web vital scores in the new Chrome User Experience (CrUX) report, you'll need to configure “desktop” or “smartphone” as device form factors in SQL statements.

What a good score is in Core Web Vitals?

In addition to the three-step evaluation (“Poor”, “Need for improvement” and “Good”), Google further defines each evaluation with an agreed threshold to help webmasters progress. The following thresholds determine each vital element:

  • Largest Contentful Paint (LCP) : For a good user experience, LCP should occur within 2,5 seconds of loading the page.
  • First Input Delay (FID) - Pages must have a FID score of less than 100 milliseconds for a good user experience on a page.
  • Cumulative Layout Shift (CLS) : For a good user experience, pages should keep less than 0,1 CLS.

To make sure your pages reach recommended scores, Google recommends measuring the 75 percentile of page loads across mobile and desktop platforms.

Will the major web vital parameters affect my Google search ratings?

Your score on Core Web Vitals will affect your search rating starting in 2021. Currently, pages are not ranked using Core Web Vitals. In 2021, Core Web Vitals it will combine security, mobile optimization, security and lack of popups as signals to measure the overall user page experience. Webmasters and owners have 6 months' notice before Google starts using Core Web Vitals as a positioning signal. However, you can measure and improve the metrics right now.

Tips to improve your score Core Web Vitals

Most of the common fixes for the overall page speed will also be accompanied by the element of improving your page's main web vital data. According to Google, you could improve yours Core Web Vitals:

  • Reduce the page size to less than 500Kb
  • Page resource limitation to 50 to improve mobile device performance
  • Using AMP to improve page loading speed

Web.dev offers suggestions for metrics Core Web Vitals specifies that it is a great resource that any webmaster working in SEO or web development should use often:

You can also use the PageSpeed ​​test tool Insights to monitor the changes made. It is excellent at this because it allows you to validate your changes Core Web Vitals from the report page.

PageSpeed ​​users Long-time insights may already be familiar with similar metrics, most of which are sure to stay around. Core Web Vitals is the culmination of these metrics and intends to get out of the complexity of the Developer Experience with them. The main web vital elements are simple to eliminate and bring clarity between fewer and larger numbers of metrics to follow.

Laboratory and field data

Depending on the conditions available, the scores can vary greatly, literally changing as users navigate the pages. It is essential to know how each score is tabulated in a given environment. However, scores can only be interpreted after determining whether the data was field or laboratory data.

The laboratory data Core Web Vitals they are collected using the browser API as page load event timers and mathematical estimates that simulate user interactivity. Although the field data of Core Web Vitals consist of similar metrics, are collected from real-life user experiences while browsing web pages while the resulting event timer values ​​are passed to a repository.

Using PageSpeed Insights, Chrome Dev Tools and the new browser extension Website Vitals Chrome, both developers and SEO professionals have access to real-time lab data. By counting the times of thread blocking scripts, PSI and WebPage Test generate page interactivity scores from page load events.

These lab data tools are invaluable for your reporting workflow and for improving scores Core Web Vitals and they should always be in your SEO arsenal. Unless you notice issues in the field data, this lab data might also be all you need as a developer if your website is based on just a few templates.

The bookstore Web Vitals JavaScript it can also be useful in workflow when used as a test pipeline. The library is available via CDN and can be included in HTML production and configured to transmit independently collected field data to comparison centers for reporting.

Lighthouse offers the webmaster various access points that are particularly useful in the development workflow. It includes several tests that help you ensure adherence to established web standards. Lighthouse can also help you debug situations where you are troubleshooting Core Web Vitals.

Comparison of field data with laboratory results

Chrome, Firefox, Safari, Opera mini, and other modern browsers measure how users experience your websites in real time from their devices via the built-in JavaScript API. As noted, Google collects and reports its field data from Chrome users via the CrUX report using the same browser APIs at times.

It is much easier to access actual field data after verifying that your pages contain field data in CrUX. This is done by verifying ownership of your website on the Google search console. The Search Console dashboard displays field data on an interface that lets you drill down using clicks instead of writing SQL queries.

Alternatively, you can use PSI, which uses field data dating back 28 days. The API that drives the recency report is a standalone open source JavaScript library that can be inserted into your development workflow or used to control an app dashboard. PSI can also act as a standalone app where a developer has already created a great frontend for the app.

How to troubleshoot vital data reporting issues

Due to the nature of some of the timing of the reports and the way the data was collected, it will be necessary to verify the laboratory data by correlating it with field data and debug discrepancies. For example, subsequent page loads may vary results scores when monitoring Web Vitals using the extension. There may be a couple of reasons behind this.

The browser has the ability to bring together interactive values ​​via the extension while scrolling through a page in a way similar to real-world field data. By using its own cache, the browser is also able to gather resources faster on update.

To get the most accurate data and local results when optimizing for Core Web Vitals using Chrome Dev Tools and Web Vitals Extension, remember to clear the cache or bypass it by pressing Shift-Refresh on the web browser in your workflow. Another brilliant tip is to load the “about blank” page before starting a performance monitoring and recording session in Dev Tools to cleanly start writing a report.

Field and laboratory data are typically very similar and with good reason. Whenever you make significant changes to both, your lab results will be ahead of the field data or vice versa. Therefore, if you notice that your tests fail in the field and you have already improved your lab scores to pass them, you need to be patient enough to allow the field data to catch up with the lab data, or send the data to the field. independently via Analytics check it out.

While it may seem pretty obvious that CLS is the most complicated field data score to match locally, this is not necessarily the case. You can use the Chrome extension to set the option to apply an overlay of Core Web Vitals, so you can watch the score changes as you navigate and interact with the page.

The same goes for FID. Your score becomes the interaction on the first page (scroll, click, zoom or keyboard input) after the thread blocking activities are added to the moment.

The highly detailed information available in Chrome Dev Tools allows you to troubleshoot CLS issues at a miniaturized level with playback and performance recording. Click on the “Experience” section which reproduces the CLS shifts in the recording. You can also highlight shifts in the display using a setting that flashes items in blue as they move and records them on the results.

Core Web Vitals minor

Although LCP, FID and CLS Web CORE vital signs are considered, there are some other minor metrics that can be used to deliver a great user experience. They are commonly referred to as secondary web vital elements or just web vital elements.

Conclusion

Optimization for Core Web Vitals is bound to be a big deal if you want your pages to rank high in the SERPs in the next year. Since the web's three main vital parameters are technical in their essence, there may be many webmasters who are less knowledgeable about this particular aspect.

However, there are many experienced SEO developers and experts, technicians and systems engineers who will help you in this regard.

We hope we've given you a clear insight into Google Web Core's vital signs.

Feel free to contact us if you want to significantly improve your score.

Do you have doubts? Not sure where to start? Contact us


We have all the answers to your questions to help you make the right choice.

Chat with us

Chat directly with our presales support.

0256569681

Contact us by phone during office hours 9:30 - 19:30

Contact us online

Open a request directly in the contact area.

PRACTICAL

ManagedServer.it is the leading Italian provider of high performance hosting solutions. Our subscription model is affordable and predictable, so customers can access our reliable hosting technologies, dedicated servers and the cloud. ManagedServer.it also offers excellent support and consulting services on Hosting of the main Open Source CMS such as WordPress, WooCommerce, Drupal, Prestashop, Magento.

JUST A MOMENT !

Would you like to see how your WooCommerce runs on our systems without having to migrate anything? 

Enter the address of your WooCommerce site and you will get a navigable demonstration, without having to do absolutely anything and completely free.

No thanks, my customers prefer the slow site.
Back to top