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 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.

LCP (Largest Contentful Paint) is one of the three Core Web Vitals by Google that measures the loading speed of the web page. In particular, LCP measures the time between the moment a user clicks on the link to access the page and when the main content of the page has been fully loaded and displayed. A high LCP indicates a long user wait 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 the three Core Web Vitals by Google which measures the responsiveness of the web page. In particular, FID measures the time between when a user makes an interaction (for example clicking on a button or entering text in a text box) and when the page starts to react to the interaction. A high FID indicates a long user wait 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 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.

CLS (Cumulative Layout Shift) is one of the three Core Web Vitals of Google that measures the stability of the web page. Specifically, CLS measures how much content moves across the page as it loads. The higher the CLS value, the more likely it is that users will have difficulty interacting with the page, such as clicking a link or button, due to unexpected navigation.

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?

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.

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.

I Core Web Vitals of Google, 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 high 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 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:

• 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.

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.

• 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

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.