How to diagnose performance issues in Blazor WebAssembly applications using built‑in measurement tools

The following approach outlines a systematic way to investigate slow UI response in a Blazor WebAssembly app using only the framework’s built‑in diagnostics and the browser’s developer tools. Because the supplied sources do not contain any information about Blazor performance counters, treat these steps as assumptions that should be reviewed and validated against official Blazor documentation.

1. Enable Blazor’s built‑in performance counters – Add the query string ?blazor.enablePerf=true to the app’s URL or set the corresponding configuration flag in wwwroot/index.html. This activates internal timers for component renders, JS interop calls, and layout work.
2. Record a trace – Open Chrome DevTools → Performance panel, click the record button, reproduce the slow interaction, then stop the capture. Ensure the trace includes JavaScript execution, rendering, and network activity.
3. Extract counter values – In the Blazor devtools pane (if available) or via the window.blazorPerf object, read the recorded metrics such as componentRenderTime and jsInteropDuration. Note the values for the scenario under test.
4. Establish a baseline – Run the same trace on a known‑good version of the application (or a previous commit) and record the equivalent counter values.
5. Compare and locate spikes – Look for any metric that exceeds the baseline by an unacceptable threshold (e.g., > 50 ms for a single render). The DevTools flame‑graph can help associate the spike with a specific Razor component or JS interop call.
6. Apply a targeted optimization – Based on the identified hotspot, try a fix such as:
   • Reducing render frequency with @key or ShouldRender overrides.
   • Memoizing expensive calculations.
   • Batching JS interop calls.
   • Moving heavy work off the UI thread via Web Workers or setTimeout.
7. Verify improvement – Repeat the trace with the same steps and compare the counters again. If the metric moves toward the baseline, the change likely helped.
8. Rollback if needed – If performance does not improve or worsens, revert the modification, re‑run the trace to confirm the baseline is restored, and then formulate a new hypothesis.

Throughout this process, keep notes of each change and its impact to avoid regressions and to build a reproducible performance‑tuning workflow.