Measurement & Tooling

You can’t optimize what you don’t measure reproducibly. Experts use three layers: local traces, lab audits, and field RUM.

Chrome DevTools Performance

1. Open Performance panel → record → interact or reload
2. Read Main thread flame chart — y-axis is time, width is duration
3. Identify long tasks (red triangles) and LoAF entries
4. Use Summary — Scripting vs Rendering vs Painting
5. Network panel — waterfall, priority, render-blocking

INP debugging workflow

1. Performance insights → check Interaction events
2. Find longest interaction → expand → see handler stack
3. Cross-reference with web-vitals/attribution in RUM

Layout debugging

Enable Layout shifts in Rendering drawer (Cmd+Shift+P → “Show Rendering”) — flashes highlight shifting regions.

Lighthouse & PageSpeed Insights

Lighthouse (lab) gives:

• Performance score (weighted metrics — not identical to CWV pass/fail)
• Opportunities & diagnostics
• Simulated throttling (varies by mode)

PSI = Lighthouse + CrUX field data when available.

CrUX & field data

Chrome UX Report — aggregated real Chrome users:

• Origin-level or URL-level (needs traffic)
• 28-day rolling window
• Same p75 thresholds as Search Console CWV

RUM pipeline architecture

flowchart LR
  browser[Browser web-vitals] --> beacon[sendBeacon / fetch]
  beacon --> ingest[Analytics endpoint]
  ingest --> warehouse[BigQuery / ClickHouse]
  warehouse --> dashboard[Dashboards alerts]

Include in payloads:

• name, value, rating, id (unique per metric instance)
• navigationType, connectionType
• attribution (debug builds)
• page, release, deviceType

Batch with sendBeacon on visibilitychange to avoid blocking unload.

Performance budgets

Lighthouse CI in PRs:

# .lighthouserc.json concept
ci:
  assert:
    assertions:
      largest-contentful-paint: ['error', { maxNumericValue: 2500 }]
      cumulative-layout-shift: ['error', { maxNumericValue: 0.1 }]

Bundle analysis

• rollup-plugin-visualizer / webpack-bundle-analyzer
• Trace duplicate dependencies
• Dynamic import() for route-level splitting
• Tree-shake: avoid barrel imports that pull entire libraries

// Prefer
import debounce from 'lodash-es/debounce';
// Over
import { debounce } from 'lodash';

Regression workflow

1. Baseline trace saved in CI artifact
2. PR runs Lighthouse CI + bundle size check
3. On merge, RUM canary compares p75 for 24–48 h
4. Rollback if INP/CLS regress

Next: Module 07 — advanced delivery and runtime topics.