Check how smooth your website scrolls - perfmonkey.com
Perfmonkey.com is currently in private beta and we are currently adding folks to the service. Till we have a fully scalable infrastructure, I wanted to create a way for developers to run performance test for single web pages using browser-perf and get an idea of the kind of metrics that can be measured.
Hence, I built the page that can take any website, run the performance tests on it and show the performance report. The challenge was to build something quickly that can scale well. Since most projects use Github for source code and Travis-ci for continuous integration, I based this service on top of github and travis.
A runner for browser-perf
The first step was to create the code that can run browser-perf. This repository simply invokes browser-perf and runs the tests specified in a config.json file. Since this runs on the cloud, the selenium server was configured to point to Sauce Labs.This public repository was also configured to run Travis builds for every commit or a pull request. This way, if someone wanted to run the tests on a site, they would just need to change the config file, and send a pull request.
Automating the trigger
A pull request triggers the test run, I wanted a simpler user interface. I created a simple web page that uses github's API to edit a file, and then send a pull request. The Github API for changing files and creating a pull request is also pretty simple, everything was done in the web page.The only server that I needed to host was an OAuth proxy to authenticate the users. The oAuth tokens are not even saved on the server, they are just cached in a user's browser
Given that Github APIs support cross-origin requests, I could simply use AJAX for all the requests.
Publishing the results
Github also provides an API to check the build status. This can be combined with the Travis API to fetch the actual build job, and the build logs. Like Github, Travis also supports cross origin request. All I had to do was pick up the Travis logs and parse the output.Sample test runs
Here are the results for the test run on a slow page with parallax effects, and the test on the same page made faster.Instead of returning to the Developer tools profiler every time, this tool can be added to your continuous integration system to monitor for performance regressions. You can also get pretty graphs that can indicate the commits of deploys that make the site slower. Sign up for the beta of perfmonkey.com and we could help you get started on monitoring rendering performance.
