13Performance Testing & Web Vitals

13.1 Core Web Vitals

13.2 Capturing Web Vitals in Playwright

npm i -D web-vitals

test('home page meets web vitals', async ({ page }) => {
  await page.goto('/', { waitUntil: 'networkidle' });

  /* Inject web-vitals collector */
  const vitals = await page.evaluate(() => new Promise(resolve => {
    const out: Record<string, number> = {};
    const remaining = new Set(['LCP', 'CLS', 'FCP', 'INP', 'TTFB']);
    import('https://unpkg.com/web-vitals@4?module').then(({ onLCP, onCLS, onFCP, onINP, onTTFB }) => {
      const collect = (name: string) => (m: any) => {
        out[name] = m.value;
        remaining.delete(name);
        if (remaining.size === 0) resolve(out);
      };
      onLCP(collect('LCP'));
      onCLS(collect('CLS'));
      onFCP(collect('FCP'));
      onINP(collect('INP'));
      onTTFB(collect('TTFB'));
      /* INP needs an interaction — simulate one */
      setTimeout(() => document.body.click(), 100);
      /* fallback timeout */
      setTimeout(() => resolve(out), 5000);
    });
  }));

  console.log('vitals:', vitals);
  expect(vitals.LCP).toBeLessThan(2500);
  expect(vitals.CLS).toBeLessThan(0.1);
  expect(vitals.FCP).toBeLessThan(1800);
});

13.3 Lighthouse via Playwright

For a full Lighthouse audit (perf, a11y, SEO, best practices) use playwright-lighthouse:

npm i -D playwright-lighthouse lighthouse

import { playAudit } from 'playwright-lighthouse';
import { chromium } from 'playwright';

test('lighthouse perf budget', async () => {
  const browser = await chromium.launch({ args: ['--remote-debugging-port=9222'] });
  const page = await browser.newPage();
  await page.goto('https://example.com');

  await playAudit({
    page,
    port: 9222,
    thresholds: {
      performance: 90,
      accessibility: 95,
      'best-practices': 90,
      seo: 90,
    },
    reports: { formats: { html: true }, name: 'lh-report', directory: 'lh-reports' },
  });

  await browser.close();
});

13.4 Performance API — fine-grained timings

test('navigation timing budget', async ({ page }) => {
  await page.goto('/', { waitUntil: 'load' });
  const t = await page.evaluate(() => {
    const nav = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
    return {
      ttfb: nav.responseStart - nav.requestStart,
      dom:  nav.domContentLoadedEventEnd - nav.startTime,
      load: nav.loadEventEnd - nav.startTime,
    };
  });
  expect(t.ttfb).toBeLessThan(800);
  expect(t.dom).toBeLessThan(2000);
  expect(t.load).toBeLessThan(4000);
});

test('no resource over 1 MB', async ({ page }) => {
  await page.goto('/');
  const heavy = await page.evaluate(() => performance.getEntriesByType('resource')
    .filter((r: any) => r.transferSize > 1024 * 1024)
    .map((r: any) => ({ name: r.name, size: r.transferSize })));
  expect(heavy, JSON.stringify(heavy, null, 2)).toEqual([]);
});

13.5 Network & CPU throttling

Real users aren't on a gigabit fibre. Throttle to catch perf bugs that hide on a fast dev machine.

// Via CDP session (Chromium)
test('home is usable on slow 3G', async ({ page, browserName }) => {
  test.skip(browserName !== 'chromium');
  const cdp = await page.context().newCDPSession(page);
  await cdp.send('Network.emulateNetworkConditions', {
    offline: false,
    downloadThroughput: (1.6 * 1024 * 1024) / 8,   // 1.6 Mbps
    uploadThroughput:   (750 * 1024) / 8,
    latency: 300,
  });
  await cdp.send('Emulation.setCPUThrottlingRate', { rate: 4 }); // 4× slower CPU

  const start = Date.now();
  await page.goto('/');
  await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
  expect(Date.now() - start).toBeLessThan(8000);
});

13.6 Perf budget — what to track in CI

• LCP and CLS — Web Vitals on critical pages
• Total transfer size (JS + CSS + images) on first load
• Number of requests (often correlates with bloat)
• Time to interactive (TTI)
• Bundle size deltas per PR (vs main) — fail if > +5%

13.7 Where Playwright stops, k6 takes over

Playwright tests a browser experience. For server-side load testing (5000 RPS, sustained load, ramp-up), use a tool built for it — k6, Gatling, Artillery. They generate concurrent HTTP traffic without paying the cost of a real browser.

// k6 — example smoke load
import http from 'k6/http';
import { check, sleep } from 'k6';

export const options = { vus: 50, duration: '30s' };

export default function () {
  const r = http.get('https://api.example.com/products');
  check(r, { 'status 200': (res) => res.status === 200 });
  sleep(1);
}

13.8 RUM (Real User Monitoring)

Synthetic tests use one machine in one location. RUM captures actual users' diverse devices + networks. The two together = full picture.

// Client-side
import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals';

function send(metric: any) {
  navigator.sendBeacon('/rum', JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    page: location.pathname,
    deviceType: getDeviceType(),
    connection: (navigator as any).connection?.effectiveType,
  }));
}
onLCP(send); onINP(send); onCLS(send); onFCP(send); onTTFB(send);

Aggregate server-side by route + device. Alert on p75 degradation.

13.9 Resource budget enforcement (full CI)

test('resource budget', async ({ page }) => {
  await page.goto('/');
  const res = await page.evaluate(() => performance.getEntriesByType('resource').map((r: any) => ({
    name: r.name, size: r.transferSize, type: r.initiatorType
  })));
  const js  = res.filter(r => r.type === 'script').reduce((s, r) => s + r.size, 0);
  const css = res.filter(r => r.type === 'link').reduce((s, r) => s + r.size, 0);
  const img = res.filter(r => r.type === 'img').reduce((s, r) => s + r.size, 0);
  expect(js).toBeLessThan(300_000);   // 300 KB JS budget
  expect(css).toBeLessThan(50_000);   // 50 KB CSS
  expect(img).toBeLessThan(500_000);  // 500 KB images on first load
});

13.10 LCP debugging recipe

1. Identify the LCP element via DevTools Performance panel
2. Check if it's blocked by JS/CSS (look at waterfall)
3. Preload critical image: <link rel="preload" as="image" href="hero.avif">
4. Inline critical CSS (above-the-fold)
5. Defer non-critical JS (async/defer)
6. Use modern image format (AVIF/WebP)
7. Serve from CDN close to user
8. HTTP/2 server push or 103 Early Hints

13.11 INP debugging recipe

1. Find long tasks: PerformanceObserver({entryTypes:['longtask']})
2. Break work into chunks: yield via scheduler.yield() or setTimeout(0)
3. Move heavy work to Web Worker
4. Use requestIdleCallback for non-urgent work
5. Reduce hydration cost (Server Components, partial hydration)
6. Defer 3rd-party JS (lazy-load chat, analytics)

13.12 CLS fixes (concrete)

• All images: explicit width + height OR aspect-ratio CSS
• Fonts: font-display: optional + preload, or size-adjust for fallback
• Ads/embeds: reserve fixed slot via CSS
• Don't insert content above existing — slide in from edge or below
• Cookie banners: use modal overlay, not layout shift

13.13 Server-side perf budget

• p95 server response < 200 ms
• DB query p95 < 50 ms
• Cache hit rate > 90% on hot endpoints
• Memory per worker < 512 MB
• GC pause < 50 ms