knfrmd.

About WebLogs Services Projects

Core Web Vitals

Last Modified: 2022-09-22
Knfrmd - Core Web Vitals
Kanmi Obasa
Kanmi Obasa

Core Web Vitals (CWV)

Core Web Vitals consists of three Web vitals,

  1. Largest Contentful Paint, LCP - measures the 'feel' of loading;
  2. First Input Delay, FID - measures time until the first action gets executed
  3. 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.

Other Resources

** Web.Dev** is an excellent resource for those interested in building a better web. Here is an article about The Business Impact of Core Web Vitals.