Web performance diagnosis

A hero image is small but paints late. What timing breakdown should guide investigation?

Separate server response time, resource discovery delay, download time, and render delay. Reducing bytes will not fix a resource discovered late or hidden behind JavaScript.

Why can lazy-loading the above-the-fold LCP image make loading worse?

It can delay discovering or scheduling a resource needed immediately. Make the critical image discoverable early and reserve lazy loading for suitable offscreen content.

Why is marking every image high priority counterproductive?

Priority only helps by distinguishing more urgent resources. Too many high-priority requests compete with the actual critical path; verify scheduling in the network waterfall.

How can an incorrect sizes attribute waste bandwidth despite a correct srcset?

The browser uses the declared display size to select a candidate. Overstating it can fetch an unnecessarily large image; match sizes to the real responsive layout.

A click handler runs for 10 ms but the interaction takes 400 ms to paint. What else must be measured?

Input delay before the handler and presentation delay afterward. A busy main thread or expensive style/layout work can dominate even when the handler itself is short.

Does INP measure the entire time until a network-backed action finishes?

No. It measures interaction responsiveness through the next paint, not eventual business completion. Track task completion latency separately and render prompt feedback.

Why can splitting a long computation into smaller tasks improve responsiveness even when total CPU work is unchanged?

It gives the browser opportunities to handle input and paint between chunks. Choose meaningful yield points and avoid recreating an endless microtask chain.

What costs must be measured before moving a small computation to a web worker?

Startup, messaging, serialization or transfer, and result handling. A worker helps main-thread responsiveness, but overhead can exceed the computation's cost.

A loop alternates changing element width and reading getBoundingClientRect. What change can reduce forced layout?

Group necessary reads before writes where dependencies permit. Repeated read-after-write patterns can force synchronous recalculation for every iteration.

Why might a layout-shift report identify a paragraph even though an ad caused the problem?

The reported nodes are often the content that moved. Inspect what was inserted or resized above them, then reserve space or change the insertion behavior.

How can a web font produce layout shifts after text is already visible?

Fallback and downloaded fonts may have different metrics and line wrapping. Use suitable fallback metrics and font-loading choices, then test real text and viewports.

Why can a load-only audit miss the layout instability users encounter later?

Ads, async content, navigation, and interactions can shift content after initial loading. Record representative user flows and field observations over the page lifetime.

How can aggressive code splitting increase time to a usable route?

A route can require a chain of serial chunk discoveries and requests. Split at useful boundaries and examine dependencies rather than minimizing each file independently.

Why can two equally sized JavaScript bundles have different interaction costs?

Parsing, execution, initialization, and triggered rendering depend on code behavior, not bytes alone. Measure main-thread work alongside compressed transfer size.

How can you attribute a responsiveness regression to a third-party script?

Compare traces and controlled runs with the script disabled, looking at its long tasks and network work. Confirm the result under realistic consent and loading conditions.

Why do long-lived immutable asset caches require content-versioned URLs?

Clients can legitimately retain the old resource until expiry. A new content hash creates a new identity; replacing bytes at the same immutable URL leaves users on stale code.

Why should personalized HTML not inherit the same public caching policy as a hashed JavaScript asset?

HTML may contain user-specific data and changing asset references. Define shared-cache behavior and variation deliberately to prevent stale pages or cross-user data exposure.

Which context makes a slow interaction report actionable without collecting entered text?

Route template, interaction target category, device class, release, timing phases, and a trace correlation identifier where appropriate. Avoid raw form values and unbounded identifiers as metric labels.

What would verify that a route optimization helped rather than merely moving work later?

Compare field loading and interaction distributions, task completion, errors, and representative later interactions. A faster initial paint can conceal deferred work that makes the first click worse.