Performance

Browsers will use heuristic caching, which can be unpredictable. Set explicit cache headers.

Set explicit width and height to prevent CLS.

Consider code splitting or tree shaking to reduce unused code.

The sampled response carries a text content type but no Content-Encoding, so the bytes go over the wire raw. Text compression typically removes 70-80% of a JS or CSS payload -- this is the single cheapest transfer win available on this host.

Without an explicit Cache-Control, browsers fall back to heuristic caching (~10% of Last-Modified age). Set `Cache-Control: no-cache` or `max-age=300` for HTML to control freshness explicitly -- prevents stale auth state and SPA shell drift.

Server-Timing exposes backend timing breakdowns to browser DevTools (e.g., `db: 45ms; render: 120ms; cache: 2ms`). Useful for diagnosing slow pages without backend log access. Most modern frameworks (Next.js, Cloudflare Workers, Fastly) emit it automatically; absence on a managed platform usually means telemetry headers are stripped at the edge.

Each `<script src=...>` without `async`, `defer`, or `type="module"` blocks HTML parsing while the browser fetches and executes it. The block lasts the entire round-trip + execution time -- on slow networks this translates directly into LCP delay. Add `defer` (executes after parse, in source order) for scripts that interact with the DOM, or `async` (executes whenever ready) for analytics / independent scripts. Module scripts (`type="module"`) are deferred by default.

First-load mobile users on cellular networks see meaningful latency improvements with HTTP/3. The QUIC transport collapses TLS + TCP handshakes into one and recovers faster from packet loss.

Brotli is the best text-compression algorithm for general use, ~20% smaller than gzip on average (40% on smaller files). Modern browsers all support it.

The page declares a `Vary` header, telling downstream caches which request headers the response varies on. Critical for content-negotiated responses (compression, language, cookies, device class).

Each `<link rel="stylesheet">` without a non-blocking `media` attribute holds up the first paint. Browsers download all of them before painting any content. Consolidate into 1-2 critical-path stylesheets; defer non-critical CSS via `<link rel="stylesheet" media="print" onload="this.media='all'">` or via the loadCSS pattern; inline above-the-fold CSS in `<style>` to short-circuit the request entirely.