Largest Contentful Paint (LPC):
It refers to the time for the display of the longest content, it measures the loading performance of your website. To provide a good experience, the LCP must occur within 2.5 seconds of your page starting to load; The best thing for the positioning of web pages is that these times are as short as possible. We are going to give you some tips so that you can implement and thus improve your LCP:
Allow caching: If you enable the possibility of caching, users who have recently entered will notice a big difference in load times between your page and the others.
Choose lazy loading: This will cause images and other files to load as the user scrolls down the page.
Compress the images: Something you should know is that the images in many cases are the heaviest on a website, using a tool that helps you compress it without taking away quality is a great option for your page.
Cumulative Layout Shift (CLS):
It refers to the cumulative change in the design, it measures the visual stability that the client has on the page and helps to quantify the frequency with which users experience design changes; a low CLS helps to guarantee and measure that these changes occur naturally and not so abruptly in the design when entering your web page. To deliver a good experience, your page must have a CLS of less than 0.1. We give you some tips to improve it in case you need it:
You do not want to add content on top of what is already created, except that it is in response to a comment that has been left and these changes are expected by customers.
Resize images using the ratio between width and height. This will allow the browser to more accurately calculate the space needed to display the image and thus reduce the risk of unexpected movement of content.
When the user downloads the fonts, a blank space is often displayed until the content of your website is loaded; Even sometimes after downloading and displaying the font, the design tends to move a lot. So that this does not happen or that the changes are less noticeable, you can use font: display values such as auto, fallback, swap, block or optional. But if you want a
even neater result you can also preload the sources using <linkrel=preload> so that the file will be downloaded in priority before the user sees the content of your page.
First Input Delay (FID):
It refers to the delay time of the first entry to the website, it measures interactivity and helps to improve the first impression according to the interactivity and responsiveness of your website, first impressions in the world of marketing are important and many times they They depend on the response speed of each page, if it takes time to load then the traffic of users will most likely decrease. To deliver a positive experience to users who enter your page, it must have an FID of less than 100 milliseconds. In order to improve the FID of your website, here are some tips:
JavaScript tasks are usually the main cause of the FID application not being carried out correctly, this blocks the main thread of the browser for a long time and consequently does not allow the user to interact. A solution to this can be to break large processes into smaller tasks or to generate as much static content as possible, which will cause a load of JavaScript to be freed.
Moving operations that are not performed on the user connection to a main worker thread can reduce main thread block time and improve FID. For this you can use Web Workers or use libraries to facilitate the use of web workers, we leave you some examples: Comlink, Workerize, Workway.
Some tools that you can use to measure these three aspects are:
Field tools:
Chrome user experience report
Pagespeed Insights
Search Console (Core Web Vitals report)
JavaScript Library
Laboratory tools:
Chrome DevTools
Lighthouse
WebPageTest
