Core Web Vitals

What is Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP) measures the time it takes for the largest content element in the viewport to render. This metric helps assess when the main content of the page has likely loaded. A fast LCP reassures users that the page is useful. Improving LCP involves optimizing critical resources and minimizing render-blocking scripts and styles.

What is Interaction to Next Paint (INP)?

INP is a metric that assesses a page's overall responsiveness to user interactions by observing the latency of all click, tap, and keyboard interactions that occur throughout the lifespan of a user's visit to a page. The final INP value is the longest interaction observed, ignoring outliers.

Details on how INP is calculated:

INP is calculated by observing all interactions made with a page. For most sites, the interaction with the worst latency is reported as INP. However, for pages with large numbers of interactions, random hiccups can result in an unusually high-latency interaction on an otherwise responsive page.

To give a better measure of the actual responsiveness for pages with a high number of interactions, one highest interaction is ignored for every 50 interactions. The 75th percentile of all page views is then reported, further removing outliers and giving a value that the vast majority of users experience or better.

An interaction's latency consists of the single longest duration of a group of event handlers that drive the interaction, from the time the user begins the interaction to the moment the browser paints the next frame.

What is Cumulative Layout Shift (CLS)?

CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifecycle of a page. A layout shift happens whenever a visible element changes its position from one rendered frame to the next.

Details on how CLS is calculated:

A burst of layout shifts, known as a session window, is when one or more individual layout shifts occur in rapid succession with less than 1 second between each shift and a maximum of 5 seconds for the total window duration. The largest burst is the session window with the maximum cumulative score of all layout shifts within that window.

How Core Web Vitals Impact User Experience

Core Web Vitals metrics are crucial for understanding and optimizing user experience. A fast LCP means the user can see the main content quickly, a low INP ensures responsive interactions, and a low CLS provides a stable and visually pleasant experience.

Conclusion

Core Web Vitals provide essential insights into your site's performance and user experience. By optimizing these metrics, you can ensure a smoother, faster, and more enjoyable experience for your users, leading to higher engagement and improved SEO rankings.