Ensuring that your web pages are delivered to the user as quickly as possible, results in a great user experience. However, users spend more time interacting with the page than waiting for it to download. This makes the smoothness and responsiveness of the site even more critical. Janky page scrolls, disjointed animations or delayed visual cues in a page are just as bad as a site that takes time to load.
Most modern web browsers have tools that can help determine the various performance bottlenecks during typical user interactions. Excellent tutorials have also been written about performance workflows. Despite this, rapid development and deploy cycles make it hard to implement regular performance audits. Tools like PageSpeed Insights provide ways to monitor network performance issues and it would be great to have a similar tool that monitors the rendering performance of a website.
perfjankie is an open source tool that automates this rendering performance workflow. It picks up performance data from browser developer tools and converts them to metrics like frame rates, expensive event handlers, paints, layouts, etc. It runs tests on real browsers, mimicking typical user interactions like clicking buttons, scrolling a page or typing in content and stores the results in a CouchDB database. It also has a dashboard with graphs that help you analyze performance trends or locate a single commit that slowed down the site.
perfjankie is written in NodeJS and is based on Chromium's performance test suite called telemetry. It has just a couple of pre-requisites:
- Selenium Webdriver (or Chromedriver) downloaded and running. Services like Saucelabs or Browserstack can also be used instead.
- CouchdDB database installed and running. Alternatively, hosted CouchDB services like Iriscouch or Cloudant can also be used.
Install perfjankie using npm install perfjankie. A simple configuration file should be created to specify the location of Selenium and CouchDB.
{
"browsers": [{"browserName": "chrome", "version": 34}],
"selenium": "http://localhost:4444/wd/hub",
"couch": {
"server": "http://localhost:5984", "database": "perfjankie-test"
}
}Check out the project README for more information about the various other options supported.
Perfjankie can be executed from the command line, or integrated into your node based build process.
To start the performance test from the command prompt, use
$ perfjankie --config-file=config.json http://updates.html5rocks.com/Run perfjankie --help to see a full list of command line arguments. The following command also needs to run only once to upload the HTML/CSS/JS files for the dashboard.
$ perfjankie --config-file=config.json --only-update-site.The dashboard with the graphs will be available at http://couch.server:5984/database_name/_design/site/index.html.
By default, the web page is scrolled and metrics like frame rates, paint and layouts times, etc. are collected. Using the options, custom selenium scripts can be added to run other tests like clicking buttons or typing content.
If your project or the build system is based on Node, perfjankie can be used as a node module. Here is an example of using perfjankie as a Grunt task and it can even be run on continuous integration services like TravisCI. Ensure that the command is run for every commit or deploy to see trends of various metrics.
This sample project shows how perfjankie may be a valuable tool in a development workflow. The project has the following five commits that are based on how typical code may evolve.
- First commit - Baseline, basic HTML with no styling.
- Added bootstrap styling, responsive design, resize/hide images.
- Added code that uses scroll handler and sets style top. The scroll handler does a lot of work, making the scroll janky.
- The scroll handler is improved, moving most logic to requestAnimationframe, and uses CSS transforms.
- Final Commit - Add external widgets, social buttons, etc.
Metrics like the average frame time and layout times show an increase when a bad scroll handler is added in the third commit. On the fourth commit when the code from the scroll handler is moved to a requestAnimationFrame, the frame rates and layouts get better. Similarly, adding external widgets shows an increase in the time taken to parse the HTML and even the number of layers since each widget is an iFrame.
Each of these trends can help us locate the exact code snippet that may have impacted performance and can be fixed easily.
Perfjankie can test your site on multiple environment including Safari, Chrome, Firefox, mobile Chrome on Android, iOS Safari and even Cordova/Hybrid apps. This demo video shows running it on Cordova apps.
If you are not a fan of storing your data and dashboard in CouchDB, you could simply use browser-perf, a tool that perfjankie is based on and store the data in any datastore you like. More information about browser-perf can be found on the project wiki and this video demo shows it in action.
As web pages become web applications and single page apps grow more common, it is important to ensure that the runtime performance of the app is great. Perfjankie automates the manual process of looking at dev tools to find performance issues, and helps you monitor rendering performance. Try out perfjankie, add it to your projects and ensure that you always hit 60 frames per second!