Performance and accessibility as one user journey

Learning outcome

Improve a task without trading away keyboard access, correctness or recovery. Start from a named interaction, realistic data and a representative device; “the page feels faster” is not enough evidence.

Diagnostic model

Separate network waiting, JavaScript execution, style/layout and presentation delay. Loading metrics and interaction metrics describe different moments. A route can deliver HTML quickly yet delay input during hydration or chart initialization. A small bundle can still contain an expensive algorithm; compression size does not measure CPU time.

Use a production build with source maps for investigation and record release, browser, hardware, CPU/network profile, data size and cache state. Compare several runs and report distribution or range. Synthetic laboratory timings help reproduce causes; field measurements show which users experience them. Neither automatically explains the other.

Worked investigation path

In the workbench, isolate the dashboard and agent views. Profile identity switching, opening the dialog and consuming many progress updates. If repeated rendering dominates, coalesce replaceable progress. If layout dominates, inspect geometry reads/writes and list size. If data volume dominates, page or virtualize the collection. A transition or memoization should respond to measured work, not substitute for diagnosis.

Virtualization reduces DOM work but introduces focus, find-in-page, screen-reader and variable-height concerns. Preserve the user's position and selection across data changes. For large computations, compare worker transfer/serialization cost with saved main-thread time; do not assume moving code off-thread is free.

Accessible contracts

Use native semantics, visible focus and stable labels. Keep error text associated with fields, and expose submission outcomes in a status region. Maintain focus after closing a modal or replacing a failed region. Announce meaningful stream milestones rather than every token. A spinner without text may hide whether work is pending, disconnected or cancelled.

Test 200%/400% zoom as appropriate to the layout, long translated strings, RTL, reduced motion and forced colors. Automated axe checks cover a subset of issues. A passing scan does not establish correct reading order, understandable error recovery or screen-reader usability.

Exercise and expected evidence

Create a deliberately expensive derived list, record its trace, then improve it without changing its result or keyboard behavior. Attach before/after traces and the fixed data fixture. Report the workbench production bundle as an artifact measurement only; it is not a recommendation or a Tailwind-versus-StyleX benchmark.

Set a regression budget from the baseline and product requirement. Roll out with release attribution and a task-success signal. If latency improves but users submit duplicate operations or lose focus, reject the optimization. The passing answer includes a reproducible bottleneck, a correctness assertion, a keyboard journey and the limitations of the measurement.

Executable reference and sources

Implementation · Behavioral evidence · Primary source.

Run the projects and assessment. Human review is pending.