Optimizing Core Web Vitals

⏳ 5 min read
📝 764 words
Optimizing Core Web Vitals

Optimizing Core Web Vitals

Core Web Vitals are a set of Google-defined metrics that measure a user's real-world experience on a webpage. These metrics are important to measure the user's real world experience on a webpage.

Measuring Experience & Component's Interactivity is more important than measuring standard Page Load time. Focus on specific metrices.

Why They Matter

  • User Experience: Good Core Web Vitals scores contribute to a better, faster, and more stable experience for website visitors.

  • Search Ranking: Google uses these metrics, which are based on real-user data, as a page experience signal in its search ranking algorithm.

  • Accessibility: They help ensure websites are quick, responsive, and stable for all users.

  • Search Engine Optimization: Google or any other search engine considers Core Web Vitals as a ranking signal. While not the most important factor, good scores can provide a competitive edge over sites with similar content but poorer user experience.

  • Ads Optimization: For those who use Google Ads, better Core Web Vitals can improve ad performance.

Core Web Vitals:

The three current metrics are :

  1. Largest Contentful Paint (LCP)

  2. Interaction to Next Paint (INP)

  3. Cumulative Layout Shift (CLS)

How do I measure these metrics?

1. Largest Contentful Paint (LCP)

It measures how long it takes, until the browser renders the largest amount of content to the screen.

The largest content can be ad, or banner. (biggest in dimensions taking the maximum area)

User can see the content they are looking for and believes the page is nearly done.

Good → below 2.5s

Poor → greater than 4.0s

LCP Score

Improve LCP:
  • Optimize your server response time by upgrading hosting or using a Content Delivery Network (CDN).
  • Compress and optimize images, and use modern formats like WebP.
  • Prioritize loading of critical resources, like the LCP element, by preloading them.

If you want to optimize LCP, read this article on measuring and optimizing and lcp

2. Interaction to Next Paint (INP)

It measures interactivity. To provide a good user experience, pages should have a INP of 200 milliseconds or less.

The user can interact with the page immediately after it

To ensure you're delivering user experiences with good responsiveness, a good threshold to measure is the 75th percentile of page loads recorded in the field, segmented across mobile and desktop devices:

Good -> below or at 200 milliseconds

Poor -> above 500 milliseconds

An INP below or at 200 milliseconds means a page has good responsiveness. An INP above 200 milliseconds and below or at 500 milliseconds means a page's responsiveness needs improvement. An INP above 500 milliseconds means a page has poor responsiveness.

INP Score

Improve INP:
  • Minimize JavaScript execution time by breaking up long tasks and removing unnecessary code.
  • Use less JavaScript to power your website, and load non-critical scripts asynchronously.
  • Reduce the size of your webpage's Document Object Model (DOM).
3. Cummulative Layout Shift (CLS)

It measures how much the content on a page moves around as other content is loaded and rendered. The whole structure of the page should load, be less than 500ms.

Good → below 0.1s

Poor → greater than 0.25s

CLS Score

Improve CLS:
  • Reserve space for images, videos, and ads by including width and height attributes in your HTML or using CSS aspect-ratio boxes.
  • Avoid inserting content above existing content, particularly during page load.
  • Ensure fonts are loaded correctly to prevent flashes of invisible text that can cause layout shifts.

How to measure Core Web Vitals

Google offers several free tools that provide both "field data" (from real users) and "lab data" (simulated tests). To pass Core Web Vitals, a site must meet the "good" threshold for all three metrics for at least 75% of its page loads.

  • Google Search Console - The Core Web Vitals report, based on real-world usage data, groups similar pages and highlights performance issues.

  • Pagespeed Insights - This tool analyzes a specific URL and provides field and lab data, along with suggestions for improvement.

  • Lighthouse - Built into Chrome DevTools, this tool runs a simulated audit of a page and provides diagnostic performance data and best practices.

  • Chrome User Experience Report (CrUX) - Chrome User Experience Report (CrUX): This public dataset collects anonymized, real-user data from Chrome and is the backbone of many Google performance tools.

  • Web Vitals Chrome Extension - A browser extension that provides a quick, real-time overview of a page's Core Web Vitals.