Proper websites, done properly

Understanding Core Web Vitals

8 minute read time / 989 words

Detailed insights into Core Web Vitals, their calculations, common issues, and improvement strategies.

TL;DR

Core Web Vitals are essential metrics used by Google to evaluate website performance, focusing on user experience. They include:

  • Largest Contentful Paint (LCP): Measures load speed.
  • Interaction to Next Paint (INP): Measures interactivity.
  • Cumulative Layout Shift (CLS): Measures visual stability.
  • Time to First Byte (TTFB): Measures server response time.
  • First Contentful Paint (FCP): Measures the time to first visible content.
  • Total Blocking Time (TBT): Measures the amount of time a page is blocked from responding to user input.

Each metric has specific calculation methods and improvement strategies, and addressing their causes can significantly enhance your website’s performance and user experience.

Core Web Vitals overview

Google's Core Web Vitals are a set of metrics designed to measure the user experience of a web page, focusing on loading performance, interactivity, and visual stability. These metrics are critical for SEO and user satisfaction. The main Core Web Vitals are:

  • Largest Contentful Paint (LCP)
  • Interaction to Next Paint (INP)
  • Cumulative Layout Shift (CLS)
  • Time to First Byte (TTFB)
  • First Contentful Paint (FCP)
  • Total Blocking Time (TBT)

Largest Contentful Paint (LCP)

Definition

LCP measures the time it takes for the largest content element in the viewport to become visible. This usually represents the main content of the page and is crucial for user experience.

How LCP is Calculated

LCP is measured in seconds from when the page starts loading to when the largest image or text block is fully rendered.

Common Causes of Low LCP Scores

  • Slow server response times
  • Render-blocking JavaScript and CSS
  • Resource load times (e.g., large images)
  • Client-side rendering

Improvement strategies

  • Optimize Images: Compress and properly size images.
  • Improve Server Response Times: Use a CDN, optimize server code, and database queries.
  • Minimize Render-Blocking Resources: Defer non-critical JavaScript, minimize CSS, and use async for scripts.
  • Enhance Client-Side Rendering: Pre-render important pages if using a JavaScript framework.

Interaction to Next Paint (INP)

Definition

INP measures the latency of a web page's interactivity. It captures how quickly a webpage responds to user interactions like clicks, taps, and keyboard events.

How INP is calculated

INP is measured from the time a user interacts (e.g., clicking a button) to when the next frame is painted on the screen.

Common causes of low INP scores

  • Heavy JavaScript execution
  • Long tasks blocking the main thread
  • Excessive third-party scripts

Improvement strategies

  • Minimize JavaScript execution: Break up long tasks, defer unused JavaScript, and use web workers.
  • Optimize event handlers: Keep them small and efficient.
  • Reduce impact of third-party code: Load third-party scripts asynchronously and consider their necessity.

Cumulative Layout Shift (CLS)

Definition

CLS measures the sum total of all unexpected layout shifts that occur during the entire lifespan of the page. A lower score indicates more visual stability.

How CLS is calculated

CLS is calculated based on the fraction of the viewport that shifts unexpectedly and the distance those elements move.

Common causes of low CLS scores

  • Images without dimensions
  • Ads, embeds, and iframes without dimensions
  • Dynamically injected content
  • Web fonts causing FOIT/FOUT (Flash of Invisible/Unstyled Text)

Improvement strategies

  • Set size attributes for media: Ensure width and height are set for images and video elements.
  • Reserve space for ads and embeds: Allocate static space for ads, embeds, and iframes.
  • Avoid dynamically injecting content above existing content: Add new content below the fold.
  • Use font loading strategies: Use font-display: optional or font-display: swap to avoid FOIT/FOUT.

Time to First Byte (TTFB)

Definition

TTFB measures the time taken for a browser to receive the first byte of response from the server.

How TTFB is Calculated

TTFB is measured from the time the request is made by the browser to the time the first byte of the response is received.

Common Causes of Low TTFB Scores

  • Slow server processing
  • Network issues
  • Inefficient server-side code

Improvement Strategies

  • Optimize server performance: Use a fast web server, optimize server-side code, and use efficient database queries.
  • Use a CDN: Distribute content closer to users to reduce latency.
  • Optimize network performance: Use HTTP/2, reduce DNS lookups, and minimize redirects.

First Contentful Paint (FCP)

Definition

FCP measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.

How FCP is calculated

FCP is measured in seconds from when the page starts loading to when the first text or image is painted.

Common causes of low FCP scores

  • Render-blocking JavaScript and CSS
  • Slow server response times
  • Unoptimized resources

Improvement strategies

  • Reduce render-blocking resources: Defer non-critical JavaScript, and inline critical CSS.
  • Optimize server response times: Use caching and a CDN.
  • Optimize resource loading: Compress images and use preconnect or preload techniques for critical resources.

Total Blocking Time (TBT)

Definition

TBT measures the total amount of time that a page is blocked from responding to user input, from FCP to Time to Interactive (TTI).

How TBT is calculated

TBT is measured in milliseconds between FCP and TTI, and it sums up all long tasks (tasks longer than 50ms).

Common causes of low TBT scores

  • Heavy JavaScript execution
  • Long tasks on the main thread
  • Excessive third-party scripts

Improvement strategies

  • Minimize JavaScript execution: Break up long tasks and use web workers.
  • Optimize long tasks: Break down large functions into smaller chunks.
  • Reduce third-party script impact: Load third-party scripts asynchronously and consider their necessity.

Conclusion

Improving Core Web Vitals involves optimizing load performance, enhancing interactivity, and ensuring visual stability. Regular monitoring and iterative improvements can significantly boost user experience and SEO rankings. Use tools like Google PageSpeed Insights, Lighthouse, and Web Vitals Chrome Extension to monitor and analyze these metrics.

By understanding and addressing the factors affecting each metric, you can enhance your website's performance, providing a better experience for users and improving your search engine rankings.