How to improve the UX for your website with 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 is an initiative to provide unified guidance for quality signals that are essential for delivering a great user experience on the web and we must know what these are to build an amazing UX for our users.

What are 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

So what do they actually mean?

• 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 if I want to quickly check the quality of the site I'm building.

It gives a neat little info on how the website is doing. This is what LinkedIn's home page web vitals looked like on a desktop while I was drafting this article

Go ahead, try it out on your favourite websites.

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);

How to improve your web vitals?

• LCP ( Largest Contentful Paint): Improve your websites server-side response times, since images are usually the largest meaningful content on most websites, try optimising them or use webP images. Implement critical CSS or use some tooling to do it.
• FID (First Input Delay): Moving non-UI operations to a separate worker thread can cut down main thread blocking time and consequently improve FID. You can use web workers to do this. Defer unused JavaScript and minimise the use of unused polyfills in your app. The Coverage tab in Chrome DevTools can tell you how much JavaScript is not being used on your web page.
• CLS (Cumulative Layout Shift): One of the main reasons for poor CLS is using images, videos, embeds and iframes without dimensions. So make sure you always include width and height attributes. (use srcset if possible). Use the performance tab in your dev tools to analyse the CLS on your website. I tried it out out a popular e-commerce website. Check the image example below.

Although the above image is of a page transition, it's just an example of where you can find Layout shift issues.

Overall try and make sure your web vitals are below the min threshold as shown in this image

Go give it a try!

Keep measuring and make your website blazingly fast!

PS: If you're a React dev and have built apps with CRA, you might have seen this file reportWebVitals.js

The thing to focus on here are these function calls

Now you know what most of them do right?

Do look up in the resources shared below to delve deeper.

Note: I've mainly referenced from the resources mentioned below. The main credit goes to the authors of these articles, not me.

Resources:

Learn Web Vitals

https://backlinko.com/hub/seo/core-web-vitals

https://support.google.com/webmasters/answer/9205520

https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html