Optimizing
Optimize Large Contentful Paint (LCP)
To optimize LCP some steps can be followed
Fixing server response times
One common reason can be the server response time, the time the server takes to respond to our request once the URL has been hit, to fix this issue, we can use caching in the server wherever we can, as the server needs to do a lot of database dependent or heavy processing tasks, we can cache some results we can [ for example http request result via transient api ]
The initial response from the server should be under 1s.
Optimize the JS and CSS which are blocking to render
We can use the minified versions of the css which won’t be network heavy to load them faster, or we can also split our css data into different files and only load the required ones, this can impact the loading speed of the css file
Only the main required css files must be loaded first and the rest of the css can be loaded later in the DOM.
Same thing goes with the JS as well.
Optimize resource load time
Now the resources our page required [ media ] would surely be big in size, and this will certainly impact the response time for the page, now some ways to optimize this can be.
We can compress/crop the images as per the required ratio or size. This would result in decreasing the size for the image and eventually decreasing the loading time.
We can use responsive images, [ srcset ], we can have different dimensions of image to be loaded on different screen sizes.
Optimize First Input Delay (FID)
Mostly the root cause of having a bad FID is performing some blocking task, mostly JS is responsible for it.
To optimize the FID, optimizing our JS code would be the best way.
The browser will not be able to respond to the user inputs when it is loading or executing the JS code on the main thread, now to fix this issue we can look at the following approaches.
- Split the code
Splitting tasks or the code that is being executed on the main thread can improve the performance significantly, and also splitting the JS code between files can improve it as all the JS code may not be required by all the pages, so the required JS code must be splitted across different files according ot the pages.
- Limit the JS code
As javascript is blocking the response, we must only add js code where it is helping in reducing the load time and is helping in the performance, adding the js code everywhere and relying totally on js loads would not be good for the FID performance as there would be delay between the response and the input.
We can use the code coverage tools to check out for the JS code that is being executed on a page and we must remove unwanted code from it https://developer.chrome.com/docs/devtools/coverage/
Optimize Cumulative Layout Shift (CLS)
The CLS is impacting the user experience alot as the elements might be different when the page load starts and would be different when the load is completed.
The causes for a bad CLS can be
- Media without dimension attributes
- Dynamically added content to the page
- Relying on network requests before updating the dom
To optimize the CLS we must avoid layout shifts to the most possible we can.
To fix this we can simply add the height and width attributes to the media we are expecting so that on the initial load they occupy the space they required.
For advertisements, we can create the div with the image and width expected which would wrap the advertisement content.