Measure the rendering performance of your site with browser-perf
Browser-perf is
- a node based tool
- that measures various performance metrics
- of a web page or a hybrid (cordova based) application
- on browsers like IE, Chrome and Firefox
- when running real scenarios (like shopping cart checkout, or scrolling a web page)
As an example, this article is a great checklist of things to watch out for, when trying to develop a smooth web page. It lists some of the most common issues that make a web page janky. However, referring back to these rules every time during a new deployment of the web site is hard. Browser-perf converts the data from a browser into numbers based on the checklist. Some of the metrics derived from the checklist include number of event handlers that take more than 1/60 seconds, expensive GC events during animations, average area of paints, number of nodes calculated during layouts, etc.
Inside Browser-perf
Browser-perf runs tests scenarios based on selenium and collects the data from sources like the chrome developer tools timeline, or about:tracing. It then maps this raw data into actionable information based on ideas derived from various performance checklists.The test scenario can range from simple page scrolls, to a complex checkout workflow that the user defines. During this scenario, various data points like duration of frame painting, layout cycles, memory growth, etc are measured and reported.
Browser-perf is extensible and developers can add ways to collect data from more sources (like xperf in case of IE), and also generate various other types of metrics.
Using Browser-perf in your environment
Browser-perf is node based and can either be used from the command line, or included as a node module to be a part of the build or continuous integration process. It can be run against a local setup of selenium or simply against "cloudified" browsers. It can also be used for testing Cordova applications on Android 4.4. You can find a lot more information in the wiki pages of the project.If you would like to try browser-perf out, please do let me know and I would love to see if I can help you out.
Type of Metrics
Some of the metrics collected when this is run include- mean time to render a frame
- Paint Times, and average nodes per layout cycle
- Memory growth rate
- Number of layers
- Aggregation of time for all events on Chrome time lines
- Event handlers that take more than 16ms (1/60 of a second)
Next Steps
On my todo list, are the following items- Enable AngularJS end to end tests also measure performance. I am working on writing an adapter for Protractor. Please vote on this issue if you think this could help you.
- Better documentation :)
- Integrate information that Windows Performance Analyzer provides for IE, to get richer data for IE
- Get more information from about:tracing
- Help a couple of sites integrate this into their build process to study how they could benefit from such information. Please contact me if you would like to try it out.My previous blog post for more details.
