As per the new Google policy, starting from June 2021, page experiences would be an important part of page ranking. Google measures the user experiences of any page with the aid of Page Experience signals. The signals make use of speed metrics known as Core Web Vitals that measures visual load, visual stability, and interactivity. The visual load is measured by the metric LCP (Largest Contentful Paint). Visual stability is measured through CLS (Cumulative Layout Shift). Interactivity is evaluated via FID (First Input Delay).
Starting from June 2021, page ranking would undergo new criteria where Page Experience and the included Core Web Vital metrics would be officially employed to rank a page. Page ranking would be also be dependent on features like HTTPS, safe browsing, mobile friendliness, and absence/presence of intrusive interstitials.
Web Vitals: An Introduction
Web Vitals is a Google initiative to deliver unified guidance for quality signals necessary for providing stellar web experience. In the past few years, Google has come up with numerous tools to evaluate and give performance report. While a few developers have acquired expertise in using these tools and benefitting from them, a large number are left baffled by the overwhelming numbers or metrics and tools generated by Google and find it difficult to maintain the pace. It gives them a definite disadvantage.
Google understands that site owners should remain involved in what they are best at- namely the quality of experience delivered to the users. Hence, it has simplified the landscape by introducing Core Web Vitals and making them essential tools for page ranking. Now the web owners can increase their chances of visibility on the net and enhance their page ranks by working on enhanced user experience.
Core Web Vitals
The subset of Web Vitals, Core Web Vitals are applicable to all web pages. The site owners can use this tool to measure their websites’ performances on the basis of user experiences. The experiences can easily be measured in the field, and reflect the actual experience of a critical user-centric result. Core Web Vitals metrics are still in evolution stage and would take some time to come in a fully functional form. Currently in 2021, the focus is on three user experience aspects- visual stability, interactivity, and loading.
Largest Contentful Paint (LCP): It is used to measure the loading performance of a page. In a page that provides good user experience, LCP must transpire within 2.5 seconds from the time when the page starts loading.
In a viewport, LCP is the single largest visible loaded element. The largest component is generally marked as a featured image or could be the <h1> tag. However, they could be any of the given below options:
- <image> component
- <image> component inside a <svg> component
- The image encased in a <video> component
- Background image loaded with the url() function
- Text blocks
There is a chance that <svg> and <video> components could be added in the future.
Process to Check LCP
In a PageSpeed Insight, the LCP component would be identified in the Diagnostics segment. For a page that has been tested, the LCP is the blog post’s featured image.
Follow the given below steps in Chrome DevTools:
- Performance > check “Screenshots”
- Hit ‘Start profiling and reload page’
- Check timing graph to view LCP
- Hit the node. It is the component for LCP
Augmenting LCP
In general, the featured image account for the LCP component in all the pages. The LCP could be augmented by preloading the image. Web owners could also inline the entire image so that it gets downloaded along with the HTML code. The purpose is to make the image load faster than the earlier speed.
First Input Delay (FID): The tool is used to measure interactivity. For a good user experience, page must possess a FID of 100 milliseconds or less. The feature of FID is interactivity. It is the period when a user starts an interaction with a page and the time taken for the page to respond. Hence, FID can also be thought of as the page’s responsiveness. However, page responsiveness is not dependent on zoom or scroll.
The examples of interaction includes:
- Hitting a button or a link
- Filling a blank field with text
- Clicking on a drop-down menu
- Hitting a checkbox.
Users can find it frustrating if they click on a particular link with no visible result. Hence, a page with high responsiveness benefits from a better page ranking and vice versa. However, not all users are interested in interacting with a webpage and so here the FID would not have any value. Consequently, lab test tools would also be deprived of value as there is no interaction with the page. Here, you would need to employ Total Blocking Time (TBT).
FID Causes
First Input Delay transpire when the JavaScript contends with the main thread. Since there is a single main thread, the JavaScript competes to process tasks on it. During the processing of a task, the page is unable to respond to the user’s input. It causes a visible delay. The duration of a task being processed is dependent on the length of the task. As a result, longer tasks take more time in processing and they cause great user experience delay. The tasks could be speeded up by breaking them into shorter processes as the breaks in-between the tasks are used as page opportunities to switch to user input interaction and respond at the earliest to that interaction.
FID Optimization
For optimized FID, break the long tasks into smaller processes and avoid any JavaScript whose need would arise at a later time.
Tools for Core Web Vitals Measurement
The lab data is different from the field data because the former gets consistently tested on the basis of same conditions with a belief that there is a repetition in the test results. Contrarily, field data takes into account actual real-time users, network circumstances, caching, devices, and other components.
Cumulative Layout Shift (CLS): It is used to measure visual stability. Google dictates that in a page that delivers good user experience, the CLS should be maintained at 0.1 or less. The feature of CLS is visual stability. The main purpose of CLS is to test the stability of a page by assessing the stability in a page layout and taking into account all moveable components. The moveable components are assessed based on the content size and the distance covered by it. Its vital problem is that it pertains to measure the visual stability even after the loading of initial page. Hopefully, Google would resolve this issue soon.
Users can feel annoyed if they hit on a specific button and due to the movement of the page something else gets clicked. Hence, Google uses page stability as an important component of user experience on a page.
CLS could occur due to a variety of reasons such as:
- Dimensionless images
- Dimensionless iframes, embeds, or advertisements.
- Content injection through JavaScript
- Late application of style of fonts in the load
Steps to Check CLS
Webpage owners can check the list of shifting components in PageSpeed Insights found under the Diagnostics tab.
Using WebPageTest. In Filmstrip View, employ the subsequent steps:
- Highlight Layout Shifts
- Thumbnail Size: Huge
- Thumbnail Interval: 0.1 sec
CLS Optimization
In the test page, it would be fruitful if the custom font is preloaded and then completely dropped. Alternately, web owners can employ a default font for loading the initial page and subsequently load the fonts on ensuing page loads.
In each individual metric, web owners could make sure that they are fulfilling the recommended target for major proportion of the users by following a threshold of 75 percent of the page loads which could be divided into desktop and mobile based experiences. Similarly, tools engaged in Core Web Vitals compliance assessment must qualify a page if it is able to meet the stipulated target of 75 percent of all three metrics.
Tools Used for Core Web Vitals Measurement and Reporting
According to Google, Core Web Vitals are essential for an optimum web experiences. Therefore, it is forever coming up with new and effective practices in all the popular tools. The following sections details which tools support the Core Web Vitals.
Field Tools for Core Web Vitals Measurement
The Chrome User Experience Report gathers anonymous, real user measurement data for every individual Core Web Vital. The website owners could use this report to swiftly evaluate their performances without needing any manual instrument for page analytics or power tools like PageSpeed Insights, and Search Console’s Core Web Vitals report. Core Web Vitals provide a simple and easy approach to see the individual site metrics. Through this tool the web owners would know if their page is identified as “good URL,” “URL need improvement,” or “poor URL”. Furthermore, the report would provide an in-depth analysis on a specific issue and list all the affected pages.
Core Web Vitals- Quick Facts
Fact 1: Although there is a split in the metrics between mobile and desktop experiences, just the mobile signals would be employed for page ranking. Since March 2021, Google has switched to complete mobile-first indexing. Hence, the web owners should make effort to employ the mobile speed signals as even the indexed pages would be centred on the mobile versions.
Fact 2: The Chrome User Experience Report (CrUX) provides the data after recording them from opted-in Chrome users. As mentioned earlier, the assessment criteria for metrics is 75 percent of user experience. Hence, even if 70 percent of users experience good URL and the remaining 5 percent experience the “URL need improvement” category, the page would be judged according to “URL need improvement.”
Fact 3: Each page of a website would be used for metrics assessment. However, if there is a limitation on data, then signals from whole or partial site could be employed.
Fact 4: The new metrics additions have absolved the need to have AMP as a requirement from mobile’s Top Stories feature. As new stories would be devoid of any speed metrics related data, in all probability, the metrics from a larger page category or even the entire domain could be employed for it.
Fact 5: Both metrics and threshold could witness transitory changes. In fact, Google has repeatedly altered and amended the metrics used for speed measurement along with the thresholds that give new meaning to the word “speed”. In all probability, the current mandates and evaluation threshold would undergo a modification in the near future. For example, google worked to improve previous year’s metrics and again the need arose in 2021 to make further improvements in the new metrics.
The Importance of Core Web Vitals for Page Ranking
Web owners must realize that Google employs 200+ ranking factors. Hence, while Core Web Vitals would make negligible difference in a page ranking. So, even if you work to enhance the page experience, the page ranking would undergo only a slight improvement since Google uses several elements of page experience to ascertain a rank.