Page performance: budget the critical path and reserve layout space

Case study

An inspection dashboard previously inserted a large chart above the case title only after data arrived. The title moved down as the user tried to tap it. A reserved chart box keeps the layout steady, while a compact case summary remains readable without waiting for the chart. A measured slow interaction may still come from script work after a click; image dimensions will not fix that. Similarly, compressing one image cannot solve a server delay. The team should change the bottleneck shown in measurements and then remeasure under the same conditions.

Working contract

<main>
  <h1>Case 47: inspection queue</h1>
  <p>Three checks are waiting for review.</p>
  <figure>
    <img src="/assets/queue-chart.webp" width="720" height="360"
      alt="Queue chart: three waiting checks and five complete checks">
    <figcaption>Queue at the last recorded update.</figcaption>
  </figure>
  <p><a href="/cases/47">Open the case record</a></p>
</main>
<script src="/assets/queue-filters.js" defer></script>

Cost and tradeoffs

An image of B transferred bytes has O(B) transfer and decode input, but decode memory can be far larger than compressed size. A client-side handler that scans N rows per input event has O(N) work each time and may make typing feel delayed. Reserving width and height costs almost no runtime work but can prevent a late box resize. Smaller assets can save bytes, while fewer synchronous tasks can improve interaction. Performance work is empirical: set a page-specific budget, record the baseline, change one cause, and compare the same route and device class.

Common Mistakes

• Do not call a page fast solely because the server responds quickly.
• Do not omit media dimensions and let important controls shift after load.
• Do not lazy-load the first meaningful image without measuring the effect.
• Do not ship a large script bundle for a minor control without checking its interaction cost.

Continue through the stack

Page loading: keep content available while CSS and scripts arrive; HTTP caching: validate a changed representation with an ETag; HTML srcset and sizes: let the browser choose an appropriately sized image; Responsive CSS: keep reading order and controls usable.

Broader connections

Image Variants and Delivery Budgets; Indexes and Query Plans for Case Feeds.

Failure trace

A page's HTML arrives quickly, yet a large client bundle delays its first useful content and an image without dimensions shifts the Save button while someone is about to press it. Set budgets for the actual user path: initial text, input readiness, transfer, and layout stability. Measure a slow device and narrow viewport, then remove or defer the dependency causing the delay.

Verification

• Throttle CPU and network, reload, and record when the title is readable and the form responds.
• Delay the largest image and verify that the form's position stays stable.
• Compare bundle and image transfer before and after one targeted change, including cache-cold load.

Decision note

A budget is a decision trigger, not a decorative score. Keep it tied to the route and device class; one aggregate number can conceal a slow critical page.

Advanced connections

Field and Lab Performance Evidence.

Further connections

Module Splitting and Interaction Budget.

Further connections

Load Tests and Capacity Budgets.

Further connections

Cooperative Main-Thread Scheduling.

Further connections

Reduced Motion and Rendering Budget.

Further connections

Canvas Pixel Ratio and Pointer Coordinates.