What are Core Web Vitals ?
Every year Google makes necessary changes to its algorithms, to the ranking factors and one such major change is the introduction of Google Core web vitals which will be introduced somewhere in 2021 and the reason we are well informed early is to take the necessary steps to embrace this change.
In April 2020, Google announced Web Vitals as an initiative to provide unified guidance for quality signals that are essential for delivering a great user experience on the web.
Core Web Vitals
Core Web Vitals are a subset of factors that will be part of Google’s “page experience” score (basically, Google’s way of sizing up your page’s overall UX)
For now, they include
- LCP — Largest Contentful Paint
- FID — First Input Delay
- CLS — Cumulative Layout Shift
Now lets move to some technical concepts as to what these are
- LCP (largest contentful paint): The amount of time to render the largest content element visible in the viewport, from when the user requests the URL. The largest element is typically an image or video, or perhaps a large block-level text element. This is important because it tells the reader that the URL is actually loading.
This is how an LCP looks like for Instagram
- FID (first input delay): The time from when a user first interacts with your page (when they clicked a link, tapped on a button, and so on) to the time when the browser responds to that interaction. This measurement is taken from whatever interactive element that the user first clicks. This is important on pages where the user needs to do something, because this is when the page has become interactive.
- CLS (Cumulative Layout Shift): The amount that the page layout shifts during the loading phase. The score is rated from 0–1, where zero means no shifting and 1 means the most shifting. This is important because having pages elements shift while a user is trying to interact with it is a bad user experience.
A simple example could be that you’re about to tap a link or a button, but in the instant before your finger/pointer lands the link moves, and you end up clicking something else!
How to measure Web Vitals ?
Google has come up with lots of alternatives to measure them for your website and you can find them here
I personally use Addy Osmani’s Chrome Extension for Web Vitals
Measuring Web vitals with JavaScript
You can also use the web vitals JavaScript library to measure it.
import {getCLS, getFID, getLCP} from 'web-vitals';function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);
Go give it a try!
Keep measuring and make your website blazingly fast!
