Improving web performance and Lighthouse performance results
Tags: webdev, react, javascript, performance
Published: 2021-03-29 11:12:53

From this year google added performance as a key metric to rank your website in google search and ads [Give it a look](https://developers.google.com/web/updates/2018/07/search-ads-speed).


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


## Lighthouse Criterias (please check the image below)
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2910m80q54p1m7z3gui.png)
 
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](https://web.dev/first-contentful-paint/) `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* 

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mrcds3nadc34cpco96g.png)
 
## 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](https://web.dev/lighthouse-largest-contentful-paint/) `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* 

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55lsejeg1cghqve0ue02.png)
 
## 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](https://web.dev/cls) `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`

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79gwk4kl94vse95ryzgt.png)

 ## 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](https://web.dev/lighthouse-largest-contentful-paint/) `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*
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hw73771c97c9cr73gy1m.png)
 

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