Core Web Vitals
Core Web Vitals consists of three Web vitals,
Largest Contentful Paint, LCP- measures the 'feel' of loading.
Interaction to Next Paint, INP- measures how quickly a page responds to user interaction
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.
Learn more about Largest Contentful Paint.
Interaction to Next Paint (INP)
Interaction to Next Paint (INP) measures interactivity. It evaluates how long it takes for the next frame to be painted after a user interacts with the page. Whether it's a click, a touch, a swipe, or any other user action, a quick response is crucial for a good user experience. Users expect immediate feedback, and a delay can lead to frustration. The best way to address this issue is to reduce input latency and optimize the rendering path to ensure the browser can quickly process and display the next frame. Improving INP involves optimizing JavaScript execution, reducing the complexity of style calculations, and minimizing layout shifts. While INP can't be directly measured in the lab, improving metrics like Total Blocking Time and Cumulative Layout Shift can help simulate and enhance INP performance in a controlled environment.
Learn more about Interaction to Next Paint.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) measures the visual stability of a page by tracking unexpected layout shifts. High CLS can lead to a poor user experience as content moves unexpectedly. To reduce CLS, use fixed dimensions for images and videos, reserve space for ads, and avoid inserting content above existing content without warning. Ensuring visual stability improves user satisfaction.
Learn more about Cumulative Layout Shift.