Web Vitals

PagePulse captures five Core Web Vitals on every real-user pageview: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), Cumulative Layout Shift (CLS), First Contentful Paint (FCP), and Time to First Byte (TTFB). All five are reported at the 75th percentile per route, per device class, per country.

Largest Contentful Paint (LCP)

LCP measures the render time of the largest text or image block visible in the viewport. The target is under 2.5 seconds at the 75th percentile of real-user page loads. A poor LCP is over 4.0 seconds. Common LCP offenders are unoptimized hero images, render-blocking CSS, slow origin server response, and client-side rendering of above-the-fold content.

PagePulse.on('lcp', (metric) => {
  console.log('LCP:', metric.value, 'ms');
  console.log('Element:', metric.attribution.element);
  console.log('URL:', metric.attribution.url);
});

Interaction to Next Paint (INP)

INP measures the latency of every tap, click, and keystroke throughout the page lifecycle, then reports the 75th percentile. A good INP is under 200ms; a poor one is over 500ms. INP replaced First Input Delay (FID) as a Core Web Vital in March 2024.

Common INP offenders are long tasks on the main thread, synchronous event handlers, heavy client-side rendering, and large JavaScript bundles. The most effective fix is usually to defer non-critical work out of the event handler using scheduler.postTask or setTimeout.

Cumulative Layout Shift (CLS)

CLS measures unexpected layout shifts caused by images without dimensions, web fonts, dynamically injected content, and slow third-party widgets. A good CLS is under 0.1; a poor one is over 0.25. The fix is almost always the same: reserve space for content before it loads.

First Contentful Paint (FCP)

FCP measures the moment the browser first renders any text, image, or canvas. A good FCP is under 1.8 seconds; a poor one is over 3.0 seconds. FCP is highly correlated with TTFB and render-blocking resources.

Time to First Byte (TTFB)

TTFB measures the time from request start to the first byte of the HTML response. A good TTFB is under 800ms; a poor one is over 1.8 seconds. TTFB is affected by origin server response time, edge function execution, database queries, and CDN cache hit rate.