Core Web Vitals
Core Web Vitals (CWV)
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.
Largest Contentful Paint (LCP)
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.
Click here to learn more about Largest Contentful Paint
First Input Delay (FID)
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
Click here to learn more about First Input Delay
Cumulative Layout Shift (CLS)
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. 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.
Click here to learn more about Cumulative Layout Shift
Other Important Metrics
While monitoring the CWV, it will be wise to monitor bounce rate and %exit metrics; watching for correlations between these business metrics and the Core Web Vitals plays a long way in figuring out if/where Users are getting frustrated.