The App Feels Slow: A Frontend Performance Investigation Playbook

Start with a user journey and a number

'The dashboard is slow' is not an actionable diagnosis. Identify the route, device class, network condition, and interaction that hurts. Is the first meaningful content late? Does a filter click freeze? Does an image shift the page? Different symptoms point to different layers.

Record a baseline in production-like conditions before changing code. A fix without a before-and-after measurement is an anecdote.

• LCP: when primary content becomes visible.
• INP: how quickly the page responds to an interaction.
• CLS: whether visible content shifts unexpectedly.
• Custom marks: time until a user can complete the real task.

Read a performance trace as a story

A network waterfall identifies slow responses, blocking assets, and duplicated requests. The main-thread track reveals long JavaScript tasks that delay input and paint. React Profiler tells you which component commits are expensive. Use each tool for its layer rather than asking one flame chart to explain everything.

Capture the trace while reproducing one concrete action. Compare the same flow after each focused change.

Classify before optimizing

A huge image needs responsive dimensions and correct loading priority. Too much JavaScript may need route splitting or a smaller dependency. Repeated expensive renders may need better state boundaries, virtualization, or deferred rendering. A slow API needs backend or cache work, not another useMemo.

Memoization has a cost and often hides an ownership issue. Profile first, then optimize the measured bottleneck.

// Keep input urgent; allow a heavy view to lag briefly.
const [query, setQuery] = useState("");
const deferredQuery = useDeferredValue(query);
const results = filterLargeDataset(deferredQuery);

Keep performance from regressing

Add budgets to the workflows that matter: image dimensions, route JavaScript, Core Web Vitals, and interaction traces. Review regressions with the same seriousness as an API latency increase. Performance is a product property, not a one-time cleanup sprint.