Web performance from symptom to cause
Connect Core Web Vitals and task timing to rendering, JavaScript, media, fonts, and caching decisions you can reproduce and change.
Use field data for impact and lab data for diagnosis
Performance is experienced by people on different devices, networks, and pages. Field data captures that variation and supports percentile-based decisions. Lab data controls the environment so a trace can be repeated while one variable changes. Neither replaces the other: field data can show that a problem is widespread, while a lab trace can reveal the render-blocking stylesheet, late-discovered image, long task, or unreserved media box causing it.
The current Core Web Vitals are Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift. The “good” thresholds documented by web.dev are LCP at or below 2.5 seconds, INP at or below 200 milliseconds, and CLS at or below 0.1, evaluated at the 75th percentile. Treat thresholds as experience boundaries, not as permission to stop investigating an obviously slow critical task.
| Entity | Attribute | Useful value | Likely owner |
|---|---|---|---|
| LCP | Good threshold | ≤ 2.5 s at p75 | Server, critical path, hero resource |
| INP | Good threshold | ≤ 200 ms at p75 | Main-thread work, event handling, rendering |
| CLS | Good threshold | ≤ 0.1 at p75 | Media dimensions, fonts, injected UI |
| Task | Completion | Product-specific duration and success | Whole interaction path |
Diagnose LCP as a four-part chain
LCP can be separated into time to first byte, resource load delay, resource load duration, and element render delay. This decomposition prevents a common mistake: compressing an image when the browser did not discover it until a client script ran. If the LCP element is text, web fonts or blocking styles may delay rendering. If it is an image, it should usually be discoverable in initial HTML, correctly prioritized, appropriately sized, and served in an efficient format.
<link rel="preload" as="image"
href="/assets/hero-1280.avif"
imagesrcset="/assets/hero-800.avif 800w, /assets/hero-1280.avif 1280w"
imagesizes="(max-width: 800px) 100vw, 50vw">
<img src="/assets/hero-1280.avif"
srcset="/assets/hero-800.avif 800w, /assets/hero-1280.avif 1280w"
sizes="(max-width: 800px) 100vw, 50vw"
width="1280" height="853" alt="...">Preload only when the browser would otherwise discover a genuinely critical resource too late. Excessive high priority creates competition. Compare the waterfall before and after, and confirm the selected responsive candidate matches the rendered size.
Reduce INP by shortening work, not hiding feedback
INP measures responsiveness across interactions. A slow interaction can spend time waiting to begin, executing event callbacks, and presenting the next frame. Use a performance trace to identify long main-thread tasks and the interaction that triggered them. Break nonurgent computation into smaller work, reduce unnecessary rendering, and avoid repeatedly reading layout after writing styles.
Immediate visual acknowledgement can improve clarity, but it does not erase blocked work. Keep the handler focused on the user intent, move unrelated analytics or preparation away from the critical transition, and render only what changed. The explicit state model in the JavaScript guide makes this separation visible.
button.addEventListener("click", () => {
setState({ status: "saving" }); // urgent feedback
queueMicrotask(() => saveDocument()); // still measure actual work
});
// Large CPU work may need chunking or a worker, not another microtask.Prevent CLS by reserving the final geometry
Unexpected layout movement often comes from images without dimensions, ads or notices inserted above existing content, and font changes that alter text metrics. Include intrinsic width and height on media so the browser can calculate aspect ratio before bytes arrive. Reserve space for embeds and late content. For overlays such as a consent message, choose a placement that does not push the active task after the visitor begins interacting.
Font strategy is a product trade-off among branding, byte cost, rendering, and metric compatibility. Use a deliberate fallback stack, subset only the characters required, and test the real text rather than assuming a loading directive solves every shift. The layout guide shows how intrinsic constraints reduce geometry surprises.
Cache immutable assets by identity
A hashed asset URL can represent immutable content: when the bytes change, the URL changes. That supports a long freshness lifetime. HTML usually needs revalidation so it can reference the current asset graph. Personalized responses should not enter shared caches. MDN distinguishes private browser caches, shared caches, and managed caches such as CDNs, and emphasizes explicit Cache-Control policies.
# Versioned asset
Cache-Control: public, max-age=31536000, immutable
# HTML that should revalidate
Cache-Control: no-cache
ETag: "release-4f8d2a"
# Personalized response
Cache-Control: private, no-cacheno-cache permits storage but requires validation before reuse; no-store asks caches not to store the response. Choose based on semantics rather than copying a kitchen-sink header. Asset naming and release promotion must agree, which is why caching is also a deployment concern.
Run a change-controlled diagnosis
Performance decision framework
- Name the affected page, task, population, and metric.
- Capture field distribution and one reproducible lab trace.
- Decompose the metric into timing segments or long tasks.
- Change the smallest owning cause and keep all other variables stable.
- Repeat the lab trace, deploy with release identity, then watch field data over an appropriate window.
Create budgets around a user path: maximum critical JavaScript, maximum hero bytes, maximum main-thread blocking, or a target percentile for task completion. A budget should stop a known regression, not exist as a ceremonial number. Document exceptions with their user benefit and an expiry for review.
Sources and further reading
These references support the standards and factual claims in this guide. The decision frameworks and worked examples are original editorial synthesis.
Questions practitioners ask
Are Lighthouse and field data interchangeable?
No. A lab run is controlled and reproducible; field data represents real devices, networks, and interactions. Use lab traces to diagnose and field data to understand population impact.
Should every page meet the same byte budget?
Not necessarily. Budgets should reflect the user task and delivery context, but exceptions need an explicit benefit and measurement.
Does a CDN fix performance automatically?
No. A CDN can reduce delivery distance and provide managed caching, but it cannot correct oversized media, blocking application work, unstable layout, or an invalid cache policy.