Core Web Vitals — Now Built-n to Chrome

Have you wondered what these numbers in the DevTools are?

<img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fin4r78y6ns4jknc1jxt1.PNG" alt="Core Web Vitals (CWV) introduced in Chrome
” loading=”lazy” width=”800″ height=”531″>

Earlier this year, Google introduced an in-browser preview of Core Web Vitals in the DevTools. This article dives deep into what Core Web Vitals (CWV) are, why they matter and how can we improve them.

Core Web Vitals (CWV) are a new addition to the performance tab of Google Chrome. CWV are a set of metrics that Google uses to assess the overall user experience of a web page. They focus on three key aspects of performance:

LCP is the measure of how quickly the web page loads. A fast LCP indicates that the user can quickly start interacting with the most important content on the page.

According to the docs:

To provide a good user experience, sites should strive to have an LCP of 2.5 seconds or less for at least 75% of page visits.

Best Practices to optimize LCP:

• Optimize images and reduce their file size.
• Minimize render-blocking resources.
• Leverage browser caching.
• Improve server response times.
• Use a CDN.
• Learn more here.

INP is the measure of the responsiveness of the page during interactions like clicking buttons or typing in forms. A fast INP indicates that the page is responsive and doesn’t feel sluggish or unresponsive.

According to the docs:

To provide a good user experience, websites should strive to have an Interaction to Next Paint of 200 milliseconds or less.

Best Practices to Optimize INP:

• Minimize JavaScript execution time.
• Avoid long tasks that block the main thread.
• Prioritize critical tasks and defer non-critical ones.
• Optimize event handling and input processing.
• Learn more here.

CLS is the measure of the visual stability of the page, assessing how often elements shift unexpectedly after the page has loaded. An example of unexpected layouts can be found here.

A low CLS indicates that the page is visually stable and doesn’t suffer from unexpected layout shifts that can disrupt the user experience. According to the docs:

To provide a good user experience, sites should strive to have a CLS score of 0.1 or less.

Best Practices to optimize CLS:

• Reserve space for dynamic content.
• Avoid images without specified dimensions.
• Use font-display: swap for fonts.
• Minimize JavaScript-triggered layout shifts.
• Learn more here.

Why are Core Web Vitals important?

User Experience: A good user experience is crucial for website success. Core Web Vitals directly impact how users perceive a website’s performance and usability.

Search Engine Ranking: Google has indicated that Core Web Vitals are a ranking factor. Websites with poor Core Web Vital scores may rank lower in search results.

Conversion Rates: A fast and stable website is more likely to convert visitors into customers.

Conclusion:

By focusing on improving Core Web Vitals, you can create a better user experience, improve your website’s search engine ranking, and increase your website’s conversion rates.