Performance testing on the web
Article Summary
Tianguang Zhang from Flutter reveals how to catch performance bugs before they reach production. His automated testing approach measures frame rendering down to the millisecond.
Flutter web apps need rigorous performance testing, but manual testing misses subtle jank. Zhang demonstrates how to automate performance benchmarking using the web_benchmarks package, testing real user scenarios like scrolling, page transitions, and button taps directly in Chrome.
Key Takeaways
- Automated recorders drive the app and capture frame timing data automatically
- Warm-up frames are excluded to measure eventual performance, not initial JIT compilation
- Outlier detection reveals janky frames that degrade user experience mid-animation
- DevTools integration tracks preroll, apply frame, and total UI frame metrics
- CI integration prevents performance regressions from landing in production
Automated performance testing in Chrome catches frame drops and jank before users experience them, with metrics that track rendering performance across real usage scenarios.
About This Article
Flutter developers had trouble spotting performance issues in web apps during development. Manual browser testing doesn't capture frame-by-frame rendering data or jank patterns, which are what actually affect how users experience the app.
Tianguang Zhang set up automated benchmark tests with the web_benchmarks package. These tests connect to Chrome's DevTools port and collect metrics like preroll time, apply frame time, and total UI frame time. The tests run predefined user gestures such as scrolling and page transitions.
The framework calculates mean, standard deviation, and outlier ratios for each dataset. This lets developers measure how much noise exists in their performance data. They can then set up CI jobs to block performance-heavy changes from being merged, similar to how Flutter Gallery's dashboard tracks performance over time.