Real web developers ship; and then start looking for the performance issues that make a web page janky :).
Talking to the readers of this blog about the importance of performance would be like preaching to the choir. Most web developers interested in web performance already use tools like YSlow or Page Speed Insignts to keep an eye out for regressions. However measuring how smooth the page runs after it has been delivered over the network is still pretty hard to measure in an automated way. Tools in the browsers Chrome DevTools timeline or Internet Explorer 11 UI Responsiveness are great in a development environment. I thought that automatig this would be the logical next step and hence I build browser-perf. browser-perf is a Node based tool that
- collects data like time to paint a page, number of layout cycles, mean time to draw a frame, etc.
- from sources like the Developer tools timeline and about:tracing
- while running user actions like scrolling a page or performing a cart checkout
The tools also comes with a handy command line interface that can be used directly to understand some of the metrics. After install the tool using npm install -g browser-perf and setting up a selenium server, the user can run
browser-perf http://phpied.com/ --selenium=ondemand.saucelabs.com --username=$SAUCE_USERNAME --access-key=$SAUCE_ACCESSKEY`
Note that the selenium server can either be on sauce labs or browserstack to run the tests on the cloud or local. This command opens the website on a browser, scrolls through the page and reports the metrics.
It can also re-use existing selenium test cases for a website and collect performance information when those scenarios are run. This includes tests written for AngularJS using Protractor, or Selenium test cases in Java, Python, etc.
Now that collecting this data is now possible, it may be even more interesting to save this data and visualize it over time. perfjankie is a node module built on top of browser-perf that takes care of
- Saving the data in a Couchdb database
- Visualizing this data as graphs
- Exposing a Grunt task so that this can be used with continuous integration systems.
The graphs typically looks like this. The full graph website is available here.
Putting it all together, this can be set up as a system that runs using a website's Grunt based build system on a continuous system like Travis using Saucelabs, and saving the results to CouchDB on the cloud. This is a great option for testing open source pages and components as setting it up is easy, and most of these services are free for open source projects.