Table of contents of the article:
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
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)
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.
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
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
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:
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.
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.
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
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.
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.
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.