improving web performance and Lighthouse performance results

From this year google added performance as a key metric to rank your website in google search and ads Give it a look.

Now the question is what is the criteria lighthouse/google uses to measure performance.

Lighthouse Criterias (please check the image below)

Out of these things the google mainly focus on these criteria

1. FCP (First Contentful Paint)
2. LCP (Largest Contentful Paint)
3. CLS (Cumulative Layout Shift)
4. Time to interact

Let's discuss about these one by one

FCP (First Contentful Paint)

According to lighthouse First contentful paint marks the time at which the first text or image is painted.

According to web.dev FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. Images, non-white <canvas> elements, and SVGs on your page are considered DOM content; anything inside an iframe isn't included.

Lighthouse FCP evaluating criteria

How to improve FCP

1. Deliver your website through CDN.
2. Make sure the chunks is small.

LCP (Largest Contentful Paint)

According to lighthouse Largest Contentful Paint marks the time at which the largest text or image is painted.

According to web.dev LCP measures when the largest content element in the viewport is rendered to the screen. This approximates when the main content of the page is visible to users. See Largest Contentful Paint defined for more details on how LCP is determined.

Lighthouse LCP evaluating criteria

How to improve LCP

1. Defer the JS.
2. Lazy load the images and other assets.
3. Responsive image practice prefer using (use srcset).
4. Caching
5. Preconnect and preload practices.

CLS (Cumulative Layout Shift)

According to lighthouse Cumulative layout shift measures the movement of visible elements within the viewport.

According to web.dev CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.

Lighthouse CLS evaluating criteria

To calculate the layout shift score, the browser looks at the viewport size and the movement of unstable elements in the viewport between two rendered frames. The layout shift score is a product of two measures of that movement: the impact fraction and the distance fraction (both defined below).

layout shift score = impact fraction * distance fraction

## Time to interact

According to lighthouse Time to interactive is the amount of time it takes for the page to become fully interactive.

According to web.dev CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.

What TTI measures

TTI measures how long it takes a page to become fully interactive. A page is considered fully interactive when:

The page displays useful content, which is measured by the First Contentful Paint,
Event handlers are registered for most visible page elements, and
The page responds to user interactions within 50 milliseconds.

Lighthouse TTT evaluating criteria

Thanks for Bearing,
I will be writing articles talking about react hooks and and web performance upcoming articles please follow to stay connected.