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

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 monitor and improve their user experiences, Google introduced the " Core Web Vitals " report on May 5, 2020, in Google Search Console. The report draws its data from the Web Vitals engine, simplifying the web experience landscape into three consistent 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 as the loading experience , the site's interactivity, and the visual stability of a website's page content. The three are designed to be quantifiable and consistent improvements to these metrics that ultimately improve the user experience in the "real world."

Using Google Search Console, you can analyze a website to see how many URLs are classified as “poor,” “needs improvement,” or “good.” This makes the analysis fairly simple for novice webmasters and website owners to 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.

LCP (Largest Contentful Paint) is one of Google's three Core Web Vitals that measure web page loading speed. Specifically, LCP measures the time between when a user clicks the link to access the page and when the page's main content has fully loaded and displayed. A high LCP indicates a long wait for the user and a poor browsing experience.

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.

To improve the LCP, there are several strategies that can be adopted:

1. Image Optimization: Reduce image size and use optimized formats such as JPEG 2000, WebP or AVIF to reduce loading time.
2. Use a fast connection: If possible, use a fast connection for uploading resources.
3. Using a Content Delivery Network (CDN): Use a CDN to distribute resources in a way that reduces the distance between the user and the server.
4. Minimize JavaScript Code: Reduce unused or non-essential JavaScript code to improve page load time.
5. Using asynchronous fonts: Load fonts asynchronously to avoid blocking resource loading.
6. Using lazy loading: Load only the essential content in the beginning and load the rest of the content later according to the user's needs.
7. Monitoring and Data Analysis: Use tools like Google Analytics or Google Search Console to monitor the LCP and identify any issues.

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.

FID (First Input Delay) is one of Google's three Core Web Vitals that measure web page responsiveness. Specifically, FID measures the time between a user performing an interaction (such as clicking a button or entering text into a text box) and the page starting to respond to the interaction. A high FID indicates a long wait for the user and poor page responsiveness.

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 large JavaScript files. When the browser experiences input latency, there is a delay between input and 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.

CLS (Cumulative Layout Shift) is one of Google's three Core Web Vitals that measure web page stability. Specifically, CLS measures the amount of content shifting on a page during loading. The higher the CLS value, the greater the likelihood that users will have difficulty interacting with the page, such as clicking a link or button, due to unexpected shifts.

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.

To improve the CLS, there are several strategies that can be adopted:

1. Use a default image size: Set a default image size so that the page layout doesn't change when images are loaded.
2. Use a default size for videos: Set a default size for videos so that the page layout doesn't change when videos load.
3. Using asynchronous fonts: Load fonts asynchronously to avoid blocking resource loading and causing unexpected layout shifts.
4. Using lazy loading: Load only the essential content at the beginning and load the rest of the content later according to the user's needs to avoid causing unexpected movement in the layout.
5. Using an interface development framework: Use an interface development framework like React or Angular to create stable user interfaces.
6. Using an animation for inserting elements: Use an animation for inserting elements to avoid causing unexpected movement in the layout.
7. Monitoring and data analysis: Use tools such as Google Analytics or Google Search Console to monitor the CLS and identify any problems.

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

Because the three main web vitals are a key component of updating the Page Experience, Google incorporates these metrics into the tools commonly used by webmasters and SEOs to optimize pages. Since we all need to measure the success of our sites' Core Web Vitals , it's important to have 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 want to check a particular page for its Core Web Vitals , simply log in to your website’s Google Search Console and select the Core Web Vitals button on the console’s 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

Core Web Vitals metrics are also available to webmasters and site owners in a new extension. Providing real-time feedback on all three key web vitals, this extension is consistent with Chrome's tests and reports using Google metrics and other tools. It not only helps webmasters diagnose their own web pages on the go, but it also helps them measure the performance of competitor pages they want to match or beat. Using the Web Vitals extension, you can save time, adapt to market conditions faster, and become more efficient with your controls.

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.

Google Search Console now displays Core Web Vitals metrics when Chrome user experience data is available. When you access Core Web Vitals , both device categories appear in the Google Console dashboard. From there, you can view the groups of pages experiencing issues.

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 Core Web Vitals score will impact your search ranking starting in 2021. Currently, pages are not ranked using Core Web Vitals . In 2021, Core Web Vitals will combine safety, mobile-friendliness, security, and lack of popups as signals to measure the overall user experience of the page. Webmasters and owners have six months' notice before Google begins using Core Web Vitals as a ranking signal. However, you can measure and improve the metrics now.

It is likely that in the future, Google will increasingly use user and browsing experience as ranking factors, along with site speed. Website speed is already an important factor in search engine rankings, but as the importance of user experience increases, it will become more and more critical to ranking in the top positions.

Google's Core Web Vitals , such as LCP, FID, and CLS, are a measure of user experience and site speed. If a site achieves optimal values ​​for these factors, it will have a better chance of ranking highly in search results.

For this reason, it is important for website owners to focus on site speed and user experience in the coming months, using techniques such as optimizing images, using a fast connection, using a Content Delivery Network (CDN) and JavaScript code optimization.

Tips to improve your score Core Web Vitals

Most common fixes for overall page speed will also involve improving your page's core web vitals. According to Google, you can improve your Core Web Vitals by:

• 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 tips for the specific Core Web Vitals metric , which is a great resource that every webmaster working in SEO or web development should use often:

• LCP optimization
• Optimization of the FID
• Optimization for CLS

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.

Core Web Vitals lab data is collected using the browser API, such as page load event timers and mathematical estimates that simulate user interactivity. While Core Web Vitals field data consists of similar metrics, it is collected from real-life user experiences as they navigate web pages, with the resulting event timer values ​​being transmitted 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 your Core Web Vitals scores and should always be in your SEO arsenal. Unless you notice issues with your field data, this lab data might even be all you need as a developer if your website is based on just a few templates.

The Web Vitals JavaScript library can also be useful in your workflow when used as a testing pipeline. The library is available via CDN and can be included in HTML output and configured to stream independently collected field data to comparison centers for reporting.

Lighthouse offers webmasters several entry points that are particularly useful in the development workflow. It includes several tests that help ensure adherence to established web standards. Lighthouse can also help you debug situations where you're 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, sometimes using the same browser APIs.

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 the Web Vitals Extension, remember to clear your cache or bypass it by pressing Shift-Refresh in your web browser in your workflow. Another great tip is to load the “about blank” page before starting a performance monitoring and logging session in Dev Tools to get a clean start on reporting.

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 obvious that CLS is the most difficult field data score to match locally, this isn't necessarily the case. You can use the Chrome extension to set the option to apply a Core Web Vitals overlay , so you can watch the scores change 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

While LCP, FID, and CLS are considered the core web vitals, there are several other smaller metrics that can be used to deliver a great user experience. These are commonly referred to as secondary web vitals or simply web vitals.

• Time to First Byte : TTFB is the time it takes for the browser to receive the first byte of the page content
• Time to interactive : TTI is the time it takes for the page to load its sub-resources and be able to respond to user commands.
• Total blocking time : TBT takes care of the time between FCP and TTI that a total block has occurred in the thread, preventing the page from responding to user input.

Conclusion

Optimizing for Core Web Vitals is bound to be a major challenge if you want your pages to rank high in the SERPs in the coming year. Since the three main web vitals are essentially technical, many webmasters may be 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.