Web Performance Debugging Checklist

Performance work gets messy when every problem is called "slow." A better approach is to sort symptoms into a few concrete buckets, then test them one by one until the bottleneck becomes obvious.

1. Identify the user-visible symptom

Start by naming the exact pain:

• slow initial load
• delayed interaction
• janky scrolling
• layout shifts
• slow route transitions

Each symptom points to a different investigation path.

2. Check network and asset cost

Large JavaScript bundles are only one category of performance issue. You should also review:

• image size and format
• font loading behavior
• third-party scripts
• API response timing
• caching headers

That catches a surprising number of problems before you even open a profiler.

3. Inspect rendering and main-thread work

If the network looks reasonable, focus on what happens after bytes arrive. Ask:

• is JavaScript blocking interactivity
• are expensive components rendering too often
• is layout recalculation happening repeatedly
• is a third-party widget dominating the main thread

This is where browser tools become more useful than intuition.

4. Separate framework cost from browser cost

A React app can be slow because of rendering behavior, but it can also be slow because the browser is doing expensive paint, layout, or media work. Those are different problems and need different fixes.

That distinction prevents wasted time on framework-level changes that never touch the true bottleneck.

5. Re-test after every meaningful fix

Performance work is easy to over-claim. After each change, re-test the same path and verify whether:

• the original symptom improved
• a different metric regressed
• the fix actually matters on a realistic device

Improvement is only real if it survives comparison.

What to read next

If your performance issue starts in the component tree, revisit React Performance Optimization.