Profiling React Web Apps in Production
summary
Claims that interactions must hit a 100 ms interaction budget and shows concrete measurement: React Profiler plus the unstable interaction-tracing API capture render commits and attribute them to named interactions, Redux middleware wraps dispatched actions to auto-trace user intents, and Sentry collects slow-interaction events with grouping and release tagging. Real numbers appear — profiler bars showing ~700 ms main-thread blocks, issues affecting two users on three occasions — and the pipeline reports, groups, and files bugs automatically when thresholds are exceeded.
AI-written summary · about
chapters (9)
- 0:00Welcome
- 1:07Vague performance issues
- 3:13Defining interactions
- 6:05Measuring with Google Analytics
- 8:13React Profiler API
- 12:05Redux middleware tracing
- 14:34Debugging slow interactions
- 17:02Automating with Sentry
- 19:08Summary
related talks
40mProfiling React rendering performance
27mProfiling and Optimizing Performance of React Applications
18mProfiling with Performance tracks
20mPerformance Anxiety with React: Track and increase speed of your apps
21mMaking Your React Apps Perform At Scale
23mProfiling the Profiler
23mPerfecting Your Profiling
16mDeep dive into react profiles and performance optimisation