Performance Graphs for a website generated using browserperf
I have been working on browser-perf for quite some time now. With browser-perf and perfjankie, front end performance monitoring can be easily added to any continuous integration system. These tools make a lot of interesting metrics available. I always wanted to a project that demonstrates how this information can be actionable and associated to code that can be fixed to improve performance.
Perfslides is a project to show how changes in code across individual commits can impact smoothness and jank of a web page. It also doubles up as a slide deck that was used at conferences where I spoke about these tools.
The project has a simple, long and scrollable webpage on which the performance tests are run. The perf branch has five commits which are compared. Each commit is isolated in functionality to demonstrate a problem with jank or how it was fixed. These code snippets are from real world projects.
A graph over these five commits clearly shows the relation between the changed code and their impact of performance.
The Commits
The five commits are as follows
- The first commit is a very basic version of the site with minimal bootstrap styling. The site has unscaled images from the slides and the site.
- The second commit is a styled version of the page, with parts related to the presentation hidden. This translates to hiding many large pictures that were used for the slide deck. Other styles included aligning the text, resizing images, etc.
- The third commit mocks a feature that introduces performance regressions. This code has a scroll handler that tries to position a bookmark indicating the amount scrolled. Amongst other things, it also tries to save this information in a cookie to reload the page at the same position it was scrolled to.
- This commit fixes the performance regression by delegating all the expensive work to a requestAnimationFrame call, using CSS transforms and caching all jQuery elements.
- The final commit shows the impact of third party Javascript to a file. In this case, social sharing buttons and a comments form was added to the site.
The Metrics
Some noticeable and interesting changes to the metrics are
- When adding a scroll handler, the mean frame time improves when work is delegated to requestAnimationFrame.
- The addition of CSS3 transforms in commit 4 is shown by the increase in Layers metric
- The average painted area is also different
- Javascript execution time and navigation metrics increase when third party code was added to the site.
- The main difference between commit 1 and 2 is resized images. Looking at the DecodeImage and ResizeImage clearly indicates this.
The built folder was also copied to the www folder in a cordova project and similar performance tests were run. The results were very similar.
Using it for your sites
Checking the developer tools for performance regressions after every deploy is very hard. Using tools like browserperf and perfjankie make tracking regressions simple. You could simple add a grunt task as shown in this project, connect to hosted browsers on saucelabs and save the data on cloudant. Alternatively, you could also try out this entire setup by signing up for perfmonkey.com, and sending a CURL request every time a new version of the site is deployed. Perfmonkey.com is a hosted service that does all this for you.
Follow the projects on github or watch out this space for more updates.
