advanced 2 min answer

A page renders quickly and is unresponsive to input for several seconds on a low-end device. What is happening?

meeshohydrationinteractivityjavascriptlow-end
Show the full answer Hide the answer

What is happening

The page was rendered on the server and the client is now executing the JavaScript required to make it interactive. During that execution the main thread is blocked, so the page looks complete and does not respond — which is a worse experience than a slower page that responds when it appears.

On a low-end device, JavaScript execution frequently costs more than the network transfer, so shipping less code matters more than shipping it faster.

What drives the cost

  • The total JavaScript shipped, which must be parsed, compiled and executed regardless of whether the user interacts with the component it powers.
  • Hydrating the entire page rather than only the interactive parts. Most of a commerce page is static content that does not need any client-side behaviour.
  • Third-party scripts, which are frequently the majority of the payload and are added by people who never see the build.
  • Framework overhead, which is a fixed cost paid on every page.

What reduces it

  • Ship less JavaScript. The most direct lever, and it means auditing what is actually needed rather than optimising delivery of what is not.
  • Partial or selective hydration: only the interactive components hydrate, and the static content remains markup. This can remove most of the cost on a content-heavy page.
  • Defer hydration until interaction or visibility, so components below the fold cost nothing until they matter.
  • Move computation to the server, so the client receives a result rather than the code to compute one.
  • Budget the third-party share separately, since it is the part nobody owns and the part that grows.

The measurement that matters

Interaction responsiveness on a representative device, not on a build agent. Measuring on the wrong device measures the wrong system, and it is the most common reason budgets pass while users suffer.

And measure in the field, not only in the lab. The lab number is a proxy; the field distribution is the truth, and a budget that passes while field metrics worsen is measuring the wrong thing.

The framing for a value-conscious market

For an audience on constrained devices and metered data, performance is not a quality attribute — it is access. A page that is too heavy is not slow for these users; it is unusable, and they do not report it, they leave.