Core Web Vitals — Field Testing Checklist

Goals & Success Criteria

• LCP < 2.5s (75th percentile field data)
• INP < 200ms for key interactions (navigation, primary CTAs)
• CLS < 0.1 across all critical templates

Test Setup

• Devices: low-mid Android, iPhone, and a budget laptop
• Networks: 4G throttled and Wi‑Fi; test first-load and repeat-view
• Profiles: signed-in vs. signed-out; cache-cold vs. warm

Test Scenarios

• Landing → Product/Service CTA flow
• Blog/article → in-article CTA → contact
• Nav open/close; search open/type; accordion/faq interactions

Measurements & Tools

• Field: CrUX dashboard, GSC Core Web Vitals report
• RUM: PerformanceObserver for LCP/INP/CLS, send to analytics
• Lab: Lighthouse, WebPageTest, Performance panel for long tasks

See the CWV Optimization Tutorial and Technical SEO pillar for deep fixes.

RUM Instrumentation (PerformanceObserver)

Capture real-user LCP, INP, and CLS and send them to your analytics endpoint. Run this on production only.

// Place in a client-side entry loaded on all pages
// Capture LCP
new PerformanceObserver((list) => {
  const entry = list.getEntries().pop();
  if (entry) {
    const lcp = Math.round(entry.startTime);
    navigator.sendBeacon('/rum', JSON.stringify({ metric: 'LCP', value: lcp }));
  }
}).observe({ type: 'largest-contentful-paint', buffered: true });

// Capture CLS
let clsValue = 0;
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) clsValue += entry.value;
  }
  navigator.sendBeacon('/rum', JSON.stringify({ metric: 'CLS', value: Number(clsValue.toFixed(3)) }));
}).observe({ type: 'layout-shift', buffered: true });

// Capture INP (supported in modern browsers)
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.interactionId) {
      const inp = Math.round(entry.duration);
      navigator.sendBeacon('/rum', JSON.stringify({ metric: 'INP', value: inp }));
    }
  }
}).observe({ type: 'event', buffered: true, durationThreshold: 0 });

Triage & Fixes

• LCP: serve hero via CDN; preload key resources; compress and resize media
• INP: split long tasks; defer non-critical JS; avoid layout trashing
• CLS: reserve space; include width/height; avoid late-loading UI shifts

Regression & Monitoring

• Automate RUM beacons; alert on regressions beyond thresholds
• Lock budgets in CI (JS size, image weight, LCP time)
• Monthly field review and quarterly deep-dive