Core Web Vitals consists of three Web vitals,
Largest Contentful Paint, LCP - measures the 'feel' of loading.
First Input Delay, FID - measures time until the first action gets executed
Cumulative Layout Shift, CLS - measures the stability of content on the web page.
As the name implies, this is usually the most significant content that loads in the viewport or above the fold. However, the metric itself measures the time it takes for the most prominent content to paint. We help create a critical path for the content above the fold to load. This process helps make the page seem to load much faster. There are other solutions like preloading the right assets, reducing render-blocking resources, layout shifts that may interfere with the space allocated for the LCP.
Learn more about Largest Contentful Paint.
First Input Delay measures interactivity. Whether it's a click, a touch, a swipe, a mouseover, whatever the first user action is. Good first impressions matter; you do not want your users waiting for their first input to generate an output. The best way to address this issue is to look at the input latency and reduce the amount of work the browser has to parse and execute scripts. FID can't be measured in the lab; measuring and improving Total Blocking Time is the closest we can get to measuring FID in the lab
Learn more about First Input Delay.
Cumulative Layout Shift is by far knfrmd's favourite Core Web Vital of all the three Core Web Vitals. CLS measured all the layout shifts during the entire lifespan of the page. However, we still use the older definition to ensure no unexpected shifts, thereby reducing the frustration on the user's side. Aspect Ratio CSS is a solid place to start addressing layout shift issues with images, thumbnails or grid. It lets the browser know that there will be content to paint in a particular region. This way, layout shifts are eliminated because of the now predetermined allocation for the content.
Learn more about Cumulative Layout Shift.