A lab run repeats one page under a controlled device and network profile, making a regression easier to reproduce. Field measurements reflect actual visitors, devices, cache states, routes, and interactions. Neither replaces the other. A fast home page says little about a private case route with a large image and active form; one slow trace says little about typical users without distribution and context. Define the task and metric first: useful content, interaction delay, or layout movement. Segment by route and device class, compare the same populations before and after a change, and keep privacy-safe collection. Browser performance APIs can collect timing entries, but support and attribution vary; the code below records navigation timing when available and avoids treating one sample as a site-wide score.
Field and Lab Performance Evidence
Working case
A release reduces the first page's script bundle but adds a heavy chart to case 47. A lab run of the homepage improves, while reviewers on low-power phones report delayed clicks on the case form. The team needs a case-route lab trace to identify main-thread work and field data to learn how often real reviewers hit it. The page also shifts when a photo loads without a reserved box. Fix the chart work and dimensions, then compare the same route on similar devices; do not claim success from an unrelated route's faster load.
Implementation boundary
function readNavigationTiming(performanceTimeline) {
const navigation = performanceTimeline.getEntriesByType("navigation")[0];
if (!navigation) return null;
return {
responseMs: Math.round(navigation.responseEnd - navigation.requestStart),
documentReadyMs: Math.round(navigation.domContentLoadedEventEnd - navigation.startTime)
};
}Cost and boundaries
Collecting a few timing values is small local work, but sending every event from every visitor adds transfer, storage, and privacy costs. Sample deliberately and strip account identifiers and private case content. Lab runs cost build and test time; field data takes enough visits to stabilize and can lag behind a release. Large images consume transfer and decoding, while long scripts block interaction even if the response is cached. Diagnose the specific bottleneck before adding more metrics or more client code.
Failure trace
The team reports one synthetic score as proof that all case pages are fast. The test used a warm desktop cache and never opened the form, while the affected users have cold mobile loads. Another dashboard averages all routes, hiding a bad inspection page beneath thousands of cheap static guides. Compare distributions for the route and device class that matters, inspect an interaction trace, and state the sample size and observation window before deciding whether a change helped.
Verification
- Capture cold and warm lab loads for the same case route at a constrained device profile.
- Segment field timing by route and device class instead of averaging the whole site.
- Delay the case photo and inspect both layout movement and the resulting user task path.
Decision note
Use lab traces to explain a suspected cause and field observations to judge impact. A target belongs to a real user task, not to a score detached from the page people use.
Common Mistakes
- Do not generalize from one homepage lab run to every route.
- Do not aggregate private case and static guide behavior into one verdict.
- Do not send private content or identifiers with performance telemetry.
Connected lessons
Integration and Verification; Signed Webhook Delivery and Replay Control; API Evolution and Compatibility Windows; Browser Journey and Fault-Injection Tests; Page performance: budget the critical path and reserve layout space; Page loading: keep content available while CSS and scripts arrive; Image Variants and Delivery Budgets; Observability: connect user failure to a safe request trace.
Apply and check
Build Project: webhook contract and browser verification and review Web Development: identity and integration contracts quiz.
Further connections
Navigation Prefetch and Private Data Budget; Critical Resource Discovery and Priority.
