Web Performance Optimization Techniques

#webdev #javascript

If Web Performance is Thanos, then LCP, FID & CLS are the infinity stones.

So, in the multiverse of web development every web developer must be aware about the web performance techniques, so that the website developed by them must give seamless user experience.

Let's understand these abbrev in deep.

=> LCP - Largest Contentful Paint: (this is related to loading of the website)
When a website loads it fetch a bunch of assets from the server like the CSS, HTML, JS, media etc., then it paints on your browser, so you are now able to see the stuffs. By minimizing this largest paint we can achieve a faster load.

Good < 2.5 sec < needs improvement < 4 sec < Poor
& BAD LCP == BAD SEO

How to find it and fix it?
When you go to the networks tab in inspect element window and examine the network waterfall.

To fix this:
1) Reduce resource load time: Compressing the images, use bare minimum types of fonts.
2) Use a CDN(content delivery network): Serve the assets from the CDN
3) Blocking JS: Suppose you have to run some JS before showing and image, you should avoid this. this is why Server side frameworks like Next.js have taken favour over SPAs like React. As a SPA, React has to run some JS before running the original content on initial rendering*.
4)Preload time: You can give priority to some stuffs to be discovered first,
"
also we can set fetching priority to images like
"

=>FID - First Input Delay (this is related to the interactivity)
This is the time between a user interacts with the page and gets the result.

Suppose there is a button on the website, and when the user clicks that button (let's say clicked at 12:00 AM), and when the result comes (suppose the result arrives at 12:01 AM), the time between these events (in this example, 1 second) will be the First Input Delay (FID).

(bhai like the temporal dead zone while declaring variables using let and const, ifykyk)

Good < 100ms < needs improvement < 300ms < Poor

The only way to optimize this is by reducing the JS execution, one can use web workers for this or to lazy load.

=>CLS - Content Layout Shift (this is related to the visual stability)
It indicates how much the elements on a page move around during the loading process.

imagine you're reading a recipe online. As you're about to click on the ingredients list, suddenly an image loads above it, pushing the ingredients down the page. This sudden movement can be frustrating because just when you're about to use the ingredients, they move out of reach.

Good < 0.1 < needs improvement < 0.25 < Poor

To improve this the image must have it's fixed width and height or you may use css' aspect ratio property.

"Egdm makkhan website banane ka"