Core Web Vitals

Understand the performance metrics tracked by Pipetrace.

Pipetrace automatically captures Core Web Vitals for every page view. These metrics are sent with the page_exit event and help you understand real-world performance from your users.

Google's Core Web Vitals (2024)

These are the three metrics Google uses for search ranking:

LCP

Loading

≤ 2.5s

INP

Interactivity

≤ 200ms

CLS

Visual Stability

≤ 0.1

All Performance Metrics

LCPweb_vitals_lcp
Largest Contentful Paint

Measures loading performance. LCP marks the point when the largest content element becomes visible.

Good
≤ 2,500ms
Needs Work
≤ 4,000ms
Poor
> 4,000ms
Optimization Tips:
  • • Optimize and compress images
  • • Use a CDN for static assets
  • • Preload critical resources
  • • Remove render-blocking JavaScript
INPweb_vitals_inp
Interaction to Next Paint

Measures responsiveness. INP tracks the latency of all interactions throughout the page lifecycle.

Good
≤ 200ms
Needs Work
≤ 500ms
Poor
> 500ms
Optimization Tips:
  • • Break up long JavaScript tasks
  • • Minimize main thread work
  • • Use web workers for heavy computation
  • • Optimize event handlers
CLSweb_vitals_cls
Cumulative Layout Shift

Measures visual stability. CLS tracks unexpected layout shifts during the page lifecycle.

Good
≤ 0.1
Needs Work
≤ 0.25
Poor
> 0.25
Optimization Tips:
  • • Always include size attributes on images
  • • Reserve space for ads and embeds
  • • Avoid inserting content above existing content
  • • Use CSS transform for animations
FCPweb_vitals_fcp
First Contentful Paint

Measures initial render time. FCP marks when the first content is painted to the screen.

Good
≤ 1,800ms
Needs Work
≤ 3,000ms
Poor
> 3,000ms
Optimization Tips:
  • • Reduce server response time
  • • Eliminate render-blocking resources
  • • Minify CSS and remove unused CSS
  • • Preconnect to required origins
TTFBweb_vitals_ttfb
Time to First Byte

Measures server responsiveness. TTFB tracks the time from request to first byte received.

Good
≤ 800ms
Needs Work
≤ 1,800ms
Poor
> 1,800ms
Optimization Tips:
  • • Use a CDN to reduce latency
  • • Optimize server-side code
  • • Use HTTP/2 or HTTP/3
  • • Cache dynamic content when possible
FIDweb_vitals_fid
First Input Delay

Legacy metric (replaced by INP). FID measures the delay from first interaction to browser response.

Good
≤ 100ms
Needs Work
≤ 300ms
Poor
> 300ms
Optimization Tips:
  • • Note: FID is being replaced by INP as of March 2024
  • • Focus on optimizing INP instead

Quick Reference

MetricField NameGoodNeeds WorkPoor
LCPweb_vitals_lcp≤ 2,500ms≤ 4,000ms> 4,000ms
INPweb_vitals_inp≤ 200ms≤ 500ms> 500ms
CLSweb_vitals_cls≤ 0.1≤ 0.25> 0.25
FCPweb_vitals_fcp≤ 1,800ms≤ 3,000ms> 3,000ms
TTFBweb_vitals_ttfb≤ 800ms≤ 1,800ms> 1,800ms
FIDLegacyweb_vitals_fid≤ 100ms≤ 300ms> 300ms

Debugging Web Vitals

You can access current Web Vitals values using the JavaScript API:

// Get current Web Vitals
pipetrace.getWebVitals();

// Returns:
{
  lcp: 1234,    // Largest Contentful Paint (ms)
  fid: 12,      // First Input Delay (ms)
  inp: 89,      // Interaction to Next Paint (ms)
  cls: 0.05,    // Cumulative Layout Shift
  fcp: 890,     // First Contentful Paint (ms)
  ttfb: 150     // Time to First Byte (ms)
}