CrUX and Core Web Vitals

15 June 2021

The page experience update is now slowly rolling out (Top Stories will begin using this new signal by Thursday). It will be complete by the end of August 2021. More here: https://t.co/kDwhhOYklK

— Google Search Central (@googlesearchc) June 15, 2021

Today Google announced the launch of the most anticipated update to its algorithm in 2021. This update, known as the Page Experience Update, introduces the measurement of website performance into the ranking factors. In the following post, a few words about what is measured how and how we can check it ourselves.

CrUX Report

CrUX or Chrome User Experience Report. It is a report based on the visits of real website users whose browsers report to Google data about the website they are viewing.
The CrUX score is based on a dozen parameters describing the performance of our website. The final score is based on 75% of the data collected from various users averaging the results from desktops and phones. Extreme results are discarded so that the report shows average values for most devices on which our website is opened.

First Paint

First Paint reports the time the page skeleton is first rendered in the browser after navigation. This is the first key moment that developers care about when loading a page – that is, the time from when the server requests the page to when the data is received and the skeleton of the page is first drawn.

First Contentful Paint

First Contentful Paint reports the time when the browser first rendered any text, image (including background images), other than canvas or SVG. This includes text with web fonts loaded. This is the time after which the user sees the generated page and can start viewing it.

DOMContentLoaded

DOMContentLoaded reports the time when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images and external elements to finish loading.

Onload

This is an event, with JavaScript, which are executed after the page loads all the required resources. The value tells you after what time the browser is ready and how long it took to fully load all the resources.

First Input Delay

FID is an important metric for measuring responsiveness because it quantifies the experience users have when trying to interact with non-responsive pages – a low FID helps ensure that a page is usable. FID measures the time from the user’s first interaction with a page (i.e., when they click a link, press a button, or use a JavaScript-based custom control) until the browser can actually begin processing events in response to that interaction. That is, how quickly the page or program responds to clicks or other interactions.

Largest Contentful Paint

LCP is an important indicator for measuring perceived loading speed because it marks the point on a page’s loading timeline at which the main content of the page is likely to have been loaded – a fast LCP helps reassure the user that the page is useful.
LCP indicates the rendering time of the largest block of image or text visible in the visible area relative to when the page was first loaded. A value of up to 2.5 seconds is currently considered an indicator of fast loading.

Cumulative Layout Shift

CLS is an indicator for measuring visual stability because it helps determine how often users experience unexpected layout changes – a low CLS helps ensure that a page is visually stable. This is one of the indicators that Google has been adjusting most frequently in recent times to catch pages with unstable layout that makes it difficult to view or click on the elements we wanted.

Time to First Byte

Time to first byte (TTFB) is a measure used as an indicator of the response of a web server or other network resource. TTFB measures the time from when a user or client makes an HTTP request to the first byte of the page received by the client’s browser. This time consists of the time it takes to connect to the server, the time it takes to send the HTTP request and the time it takes to download the first byte of the page to the user’s browser. In Google Search Console, we can directly preview the Core Web Vitals results as part of the CrUX report for the pages of our website. In the “Core Web Metrics” menu, we get information about pages and CLS FID LCP values and whether they are good or need improvement. Based on this, we can diagnose how our site loads with real visitors and where we can improve the results.