perfslides :: A sample website to demonstrate the use of browser-perf and perfkanie

Automating Web Performance Metrics

and making it a part of continuous integration

@nparashuram
Why care about performance ?

Webpage performance influences user experience and has direct impact on user engagement. Studies have shown strong correlation between revenue web performance.

Delivering the web page as soon as possible and then ensuring that the user interacts smoothly with the web page are key to a good user experience.

We did a test where we artificially [slowed the framerate from 60fps to 30fps], and engagement collapsed.

Shane O' Sullivan , Facebook

Etsy tested tested pre-fetching JS in search results page, which caused jank... All business metrics we monitored got much worse.

Jonathan Klein , Etsy
Why does a page get slow ?

Web pages can get slow due to various reasons, but they can usually be classified into the following three categories.

One commit

On a friday night by that, in the file no one touches,
by that one guy !!

Added Over time

With great code comes great performance problems

No clue Don't Blink

Don't turn your back. Don't look away.
And don't blink. Good Luck.

The web pages need to be delivered as fast as possible to the user. Equally important is the fact that the interactions on the web page feel smooth and jank-free. This presentation covers the latter - performance issues when interacting with the app.
Fixing Performance Regressions

Rules, tools, or a combination of rules and tools can be used to fix performance problems
Tools + Rules

Most modern web browsers have awesome tools that help developers understand how it works under the hood. It provides information about the time spent on various activilites like painting, calculating layouts or styles, etc.
Tools + Rules

When investigating performance problems with browser tools, we can often observe interesting patterns emerge. These patterns can be convereted to rules or "best-practices" that web developers follow when writing code for their pages. Many experts have formulated rules, some such rules are as follow

Shard the domains to increase the number of parallel requests

Enclose expensive javascript inside requestAnimationFrames

Minize JS, Images and CSS, always zip over the wire

Runtime performance checklist

Pray to the demo gods before your presentation
Tools + Rules

Remembering to follow all the rules when developing web pages is hard. Automated tools come to the rescue here, these are based on well established rules and can help identify problems during the development cycle. Some great tools that are based on well defined rules include the following.

YSlow ( link )

Google Page Speed ( link )

modern.ie Page Scan ( link )

Webpagetest.org ( link )
Fixing Performance Regressions - Everytime
Though most developers see value in running performance tests, expecting these tests to be run for every deploy is hard. Most of these tests have to be run manually, and are usually run when reacting to performance issues.
It would be even better if performance profiling can actually be automated. Just like unit tests are the defense against functional regressions, these automated performance tests could check for performance regressions. Like the unit tests, adding these to a coninuous integration server will add more value.

Run profiling for every commit - look for perf anit-patterns

Can this manual task be automated ?

Once automated, can it be added to continuous integration
Performance Graphs

Examples of some of the graphs generated using automated rendering performance measurement tools
Some tools to Measure rendering performance
http://npmjs.org/package/ browser-perf

is a NodeJS based tool that measures the runtime performance of web pages.
1. Actions
  The tool measures performance information when a user scenario is run. User actions are performed using Selenium scripts. Typical scenarios for collecting performance information could be a shopping website checkout process, or even a simple page scroll.
2. Probes
  This tool simply automates the manual process of looking at developer tools to identiy performance anti-patterns. It collects data from sources like Chrome Developer tools profiling timelines, about:tracing, or WPA/Xperf in case of IE.
3. Metrics
  Once all the data is collected, it is combined into actionable metrics. Some of the metrics include the average time required to draw each frame, time spent calculating styles or layouts.
http://npmjs.org/package/ Perfjankie

Collecting performance information once is great, but it would be even more valuable is this data is available over time. Each new commit can then be compared against baseline measures, and single commits causes trouble can be weeded out. This would also give developers, a good handle on how adding additional features to a website may impact website performance.

Grunt task, run browser-perf, save data to couchdb

CouchDB

Data store and web page for graphs
Demo time

Trying out browser-perf and perfjankie are very simple. This project uses both the tools to look at performance impact across 5 commits.
To run this, simply clone this repository usinggit clone git://github.com/axemclion/perfslides.git

Check out the README.md file in the project for more information about setting up the dev environment and running the tests on your environment.
Performance Changes over 5 commits

Check out the rendering performance graphs for this website

The five commits that were profiles are as follows
1. Basic version of the site with bootstrap
2. Responsive images, hide unnecessary content
3. Expensive Scroll handler
4. Delegation to requestAnimationFrame, CSS3D transforms
5. Social Button - third party scripts
Looking at the results again
- Adding rendering perf profiling to continuous integration is not hard
- Graphs over time help identify offending code segments
- Beware of Microbenchmarks
  - Selenium scripts adds to time taken
  - Browsers try to optimize the best they can
  - Impact of other things like system load, caches, etc
- Lots of interesting data , but not all data is useful
Can I use ?

Install browser-perf from . Run it from the or add it to a CI system like .

Alternatively, add perfjankie task into build process.
All data and HTML/JS for the graphs are saved in .

Tests are run using locally, or using services like or

Existing Selenium tests can also be reused to collect metrics from
Links

These slides are at

https://nparashuram.com/perfslides

The source code this page lives at

git://github.com/axemclion/perfslides.git

More links
- browser-perf ( npm , source code )
- perfjankie ( npm , source code )
- Performance Graphs for this website
Author information

Parashuram

Ping me on twitter and I would be glad to help you with adding browser-perf or perfjankie to your continuous integration system.