advanced
1 min answer
A marketplace's pages paint quickly and feel unresponsive for several seconds after appearing. What is happening and how do you fix it?
Show the full answer Hide the answer
What the symptom means
Content is visible and the JavaScript that makes it interactive has not finished executing. The server rendered the markup, the browser painted it, and the framework is now walking the tree attaching event handlers and rebuilding component state on the main thread.
Until that finishes, taps and clicks are queued or lost. This is the worst experience shape available: the page looks ready and is not, so users tap, nothing happens, and they tap again.
How to confirm it
- A long gap between first contentful paint and interaction readiness.
- A long main-thread task immediately after paint, visible in a performance profile.
- Interaction latency worst in the first seconds after load and fine afterwards.
- The effect concentrated on lower-end devices, since the work is CPU-bound and device capability varies by an order of magnitude across a real user population.
The fixes in order of leverage
- Hydrate less. Most of a page is static — header, footer, article body, product description. Only genuinely interactive components need hydration, and identifying them is usually a large reduction for little effort.
- Defer non-critical hydration until visible or until the user interacts, so the initial cost covers only what is above the fold.
- Send less JavaScript. Hydration cost is proportional to code executed, so bundle reduction and route-level splitting attack the cause rather than the symptom.
- Move work off the main thread where it is genuinely computational.
- Consider a rendering approach that does not hydrate the whole page — islands, server components, progressive enhancement — which is a larger change and addresses the problem structurally.
The measurement to adopt
Interaction readiness on a representative low-end device, not paint timing on a developer laptop. Optimising the metric that was already good is the most common way this problem persists after months of work.