Getting started with Core Web Vitals optimizations. Motivation
This series of articles is a translation of the text from the Russian-language resource Habr)
According to web.dev, a better user experience is the key to success in the long term for any website. Understanding how important user experience quality is for the development of the Internet, Google introduced its Web Vitals initiative in 2020 as unified guidance for quality metrics which are essential to delivering a great user experience on the web. Although Google has created a number of performance measurement and reporting tools over the recent years (Lighthouse, PageSpeed Insights, and Measure), Web Vitals is expected to facilitate performance metering and help web developers focus on the most important metrics called Core Web Vitals.
Core Web Vitals
CWV is a subset of Web Vitals metrics that provides you with a numerical estimate of your website’s user experience. What’s amazing is that the user experience scores generated by these metrics are applicable to all web pages (regardless of area of expertise and technology stack used). Therefore, all website owners can measure CWV, without fear of the need for additional analysis of the results in relation to the specifics of the project. Google intends to support CWV in all its tools for web developers.
There are three CWVs at the moment (see changelog), with more to be added over time:
- Largest Contentful Paint (LCP): perceived page loading speed. The metric’s value is the time elapsed from the start of page loading to the moment the main content has probably loaded. Loading is considered to be complete at the time the largest element (an image or text block that is visible in the viewport) has been painted. This value should be as small as possible (75 percentile is equal to 2.5 seconds).
- First Input Delay (FID): page interactivity (numerical estimate of experience users have when trying to interact with non-responding pages). This is the time from the user’s first interaction with the page (a click on a link, a screen button, etc.) up to the moment the browser can respond to the user’s action. This value should be as small as possible (75 percentile is equal to 100 milliseconds, but even now Google “still recommends using 95–99 percentiles”).
- Cumulative Layout Shift (CLS): visual stability. The metric’s value indicates the largest sudden layout shift which occurs over a particular period. Before 1 June 2021, the metric covered the whole lifecycle of a web page; at the moment, however, it refers to a quick series of shifts with less than 1-second interval between the shifts, and not more than 5 seconds for the whole series. Sudden shifts are those which occur without animation or later than within 500 milliseconds after the user’s input. This means CLS is affected by all sudden content shifts during interaction with the website (for example, the ones caused by loading ads or other async blocks). This value should be as small as possible (75 percentile is equal to 0.1).
CWV significance for the product
When it comes to improving metric values, motivation can result from several factors.
Product managers might want to optimize for Web Vitals performance metrics because high website performance is good for user experience, which eventually affects the duration of user sessions and user conversions. You can find many examples of how improved CWV metrics affect the Key Performance Indicators (KPIs) of a business on the WPO stats website.
Another possible driver is the effect of metrics on SEO: starting from May 2021, Google considers the values of metrics and utilizes the values as ranking signals for search results. Starting from Ver. 85 of Chrome for Android, a special attribute for web pages with a high CWV rating is added when a link is clicked on.
Thus, improving the performance of the site improves the user experience, which in turn affects the increase in conversions.
The next article will describe the general plan of work on improving the metrics, and provide a list of recommendations from Google for improving various CWV.
