Why should I care about Core Web vitals !!

Browser application Performance Part2

In the first part of the “Web Performance” series,

Performance

We have seen how to improve YOUR website loading time and other factors that make your website more user friendly and caters great experience.

In this article we are going to discuss few more important factors which is very much needed for our web developers who are working for a customer facing applications and SEO based applications.

In November of 2020, Google added three more vitals/signals which is focused on user experience. These are:-

1. Cumulative Layout Shift
2. Largest Contentful paint
3. First Input Delay

CORE WEB VITALS

Core Web Vitals

Let us understand these CWV in brief and we will discuss on ways to make your Core Web Vitals better.

1. Cumulative Layout Shift (In short CLS)- As per webdev

CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.

A layout shift occurs any time a visible element changes its position from one rendered frame to the next.

Cumulative Layout Shift (CLS)

Let’s break it down in a generic term:- Basically the page components (header, body, footer, ) should not shift while it is being rendered. See the example below:-

There was an API call which was happening on the page and a UI component was dependent on that, as soon as the api responded the page created that element and other components were shifted below. Due to this the user who’s intention was to click on change date of his journey has ended up in cancelling the ticket. So this is about Cumulative Layout Shift in a nutshell.

NOTE:- a very important point which i want to highlight here is that a CLS is not only for shift happening on load of the page, it actually means any shift which happens when user is interacting on the screen. It can be on-load or after that. The on-load CLS has a bad impact on SEO scores and ranking as google crawler will get the metric when they hit your page(if it is SEO enabled). But this is a user experience metric so it needs to be taken care for both SEO and NON SEO pages.

2. Largest Contentful Paint (In Short LCP)- As per webdev

Largest Contentful Paint (LCP)

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.

You might feel like this guy, but trust me its not that confusing as it looks initially, let me explain this with an example:- As the name suggests Largest contentful paint means what is the largest content(image/text blocks) available on the page inside users viewport.

The important point to note here is which HTML elements are considered to be causing LCP.

LCP is measured when the largest element of a webpage becomes visible in the user’s browser

There are majorly 2 elements which will cause heavy LCP issues:-

1. Images/Icons inside viewport
2. Any banner with a background image loaded with the help of css using URL() inside viewport.
3. Slow server response time for your assets and bundles.

Below is the score for one sample webpage:-

The point which I would like you all to focus on is the LCP score and the below image tells the element causing that.

Now we will see that by making slight change in design how the LCP element changes:-

As we can see that LCP has shifted to text element and it’s not an image anymore. We have simply made some alterations in size and things started changing. There are multiple ways to solve LCP problem which we will discuss in resolution section below.

3. First Input Delay (In Short FID) :- As per Webdev-

FID measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction.

First Input Delay (FID)

Sample:-

What can be the major reason for this issue?

To understand this lets categories it in two parts:-

1. Large initial payload of javascript file which is needed to render the page.
2. Browser main thread getting blocked due to long javascript tasks execution.

redBus Mobile web India Homepage

You can go through https://web.dev/custom-metrics/ to measure your website vitals using few code changes.

Let us now understand how can you measure Cumulative layout shift/Largest Contentful Paint/ First Input Delay on your page.

1. LightHouse Tab in Google chrome-
2. Page Speed Insights
3. WebPage Test
4. …….(many more)

I am personally very much happy with Lighthouse and Page speed insights as they are easily available for all developers and it has lot of options to inspect and every details of the UI elements causing any issues in any vitals.

Next point to focus is:- how to fix our vitals.

The first is Cumulative layout shift:-

Lighthouse report

Elements causing CLSLets list them down:-

1. Fix the height of all components on your page.
2. Don’t take a decision of rendering a component based on api response on page(while rendering). (If needed, plan for a fallback for that section on page but the space should not jump or shrink if api fails or some other response.)
3. Define your above the fold area very clearly with less dynamic content.
4. Do not inject promotion banner or anything on top of screen while rendering by use of any third party. Plan it after the rendering cycle is complete.
5. Choose your font family and style very wisely and try to keep it similar to standard system fonts.

TLDR

The second is LCP :-

1. Optimise your images very precisely, It should be as light as possible.
2. Try to use webP format and use png as fallback for the assets.
3. Rethink on your design aspects of how you are rendering your above the fold component.(Viewport area)
4. Try to have less images in above the fold area, use more css to design graphics etc… if images are very much needed then try to keep the less in size, so that they cannot become the largest content on the page.
5. Some specific fonts which we use on our website can also take time to download.
6. After you are done with above steps and optimisations, try to use web workers. There are immense opportunities inside it which will improve your website loading time.

There are several ways which we can try out to make our website perform better, we discussed about all those in the these articles but what we observed is when our website goes into production environment, there is a drop in the expected TTI and other vitals.

Many time, after doing all the optimisations which are best as per web standards, we observed that one of the major reason behind these are third party lib , etc.. which gets injected at runtime in our system. Now the question is :- Can we get rid of it ? Absolutely NOT

Then how can we handle it to get the best performing website along with these third party lib.

To understand the ways to solve it, Stay tuned to part 3 of

How to improve website performance series

Conclusion:-

To conclude, I would say that the core web vitals is focused on providing better user experience for your customers. If you are providing your service to customers using web based applications then it would be worth to invest time and effort to make your website experience more pleasant for user.

Follow me on https://amitkumar-v.medium.com/

MORE READ

Performance

Live error tracking @redbus