Decryption of Core Web Vitals – New Performance Indicators by Google
If you follow SEO and Web Performance news, then you’ve probably read that Google recently launched new metrics to improve its rating of the browsing experience. These metrics are called Core Web Vitals and we suggest you decrypt them together. What are Core Web Vitals? The Core Web Vitals are a set of indicators on the speed, response time and visual stability of a website. According to Google, these KPIs should help site owners measure user experience in a Georgia WhatsApp Number List more meaningful way. These new signals must eventually combine with existing signals such as having a site compatible with mobile browsing, offering secure browsing through the HTTPS protocol or the fact of not imposing interstitial intrusive.
The diagram below summarizes Google’s desire to integrate Core Web Vitals into its existing KPIs as future metrics to measure user experience. The diagram summarizes Google’s desire to integrate Core Web Vitals Source: Googleblog The Core Web Vitals are currently composed of three indicators that we propose to detail: 1. Largest Contentful Paint (LCP) The Largest Paint Contentful measure the speed of loading perceived by the user by calculating the time of loading of the element most important visible on the screen. It replaces existing indicators such as Load or the DOMContentLoaded which did not take into account the notion of visibility on the screen .
It Is Also Easier to Understand Than the First Meaningful Paint (Fmp)
and the Speed Index (SI) which are two indicators that are quite complex to understand but that can still be found within the Lighthouse tool . Source: https://web.dev/lcp/ Google considers that a site should be able to display the most important element visible on the screen within the first 2.5 seconds for a good user experience. Are taken into account in this loading time: <img> elements <image> elements within an <svg> tag <video> elements elements with an image loaded in the background through a url (_) function text blocks Here are 2 examples where we see that the LCP is measured after the display of the largest element visible on the screen, in this case, the two main images: Examples where we see that the LCP is measured Source: https://web.dev/lcp/
First Input Delay (FID) The First Input Delay measures the time required before the Internet user can interact with them. Google recommends having an FID of less than 100 milliseconds. First Input Delay Source: https://web.dev/lcp/ This indicator is the real first impression that your site will leave on the Internet user on its responsiveness. And as in all areas, the first impression is often crucial. The FID notably takes into account events such as clicks, keystrokes and “taps” on mobile. 3. Cumulative Layout Shift (CLS) Last of the indicators, the Cumulative Layout Shift which will focus on measuring the visual stability of your website. We’re talking about how often users experience an unexpected layout change.
The Lower This Score, the More Pleasant the Navigation
The CLS is the sum of all individual layout change scores for each unexpected layout change that occurs during the life of the page. This score must be less than 0.1 . To calculate these individual scores, Google uses the following rule: layout shift score = impact fraction * distance fraction For example, if within a page, you have a block of text that shifts down to reveal another element, Google will measure the Impact Fraction , i.e. the union of the visible areas of all unstable elements of the previous image and the current image.
Example of a block of text that shifts down In the image above, there is a text element that takes up half of what is visible on the screen. Then, in the following image, the element moves down 25% of the window height. The red dotted rectangle indicates the union of the visible area of the element in the two frames, which in this case is 75% of the total window, so its Impact Fraction will be 0.75 . Also in the example given by Google, the largest dimension of the window is the height, and the unstable element has moved 25% of the height of the window, which gives a fraction distance of 0.25 .