Home

Daniel edited this page Dec 22, 2015 · 11 revisions

What is browser-perf ?

browser-perf is a NodeJS based tool that 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 using the Selenium Web driver to mimic typical user interactions like clicking buttons, scrolling a page or typing in content.

Why browser-perf ?

Delivering web page content to users as quickly as possible is important. It is equally important to ensure that this downloaded content provides a smooth and responsive user experience. Page scrolls that are Janky, delays when typing in text boxes or choppy animations are just as bad as pages that take a long time to load. Users spend longer using the page than waiting for it to load and we should ensure that the page renders at 60 frames per second at all times.

Most modern web browsers have tools that could help identify the various things that could slow a web page down. However, rapid release cycles make it hard to do regular performance audits. Tools exist to automate network performance audits. It would be great to have a tool that automate the rendering perf audits too.

How can I use it for my website?

Check out these instructions to get started. Quick Start: Install using npm install -g browser-perf, run selenium and then run browser-perf http://yoursite.com --verbose to test on Chrome.

Supported browsers

  • On your local machine - Safari, Chrome, Firefox, IE
  • On the cloud - Saucelabs, Browserstack
  • On Device and Emulators - iOS and Chrome on Android
  • Hybrid/Cordova App

Architecture

Here are some details about how the tool works.

More information/FAQ

See all the wiki pages for more information. You can also look at the FAQ for commonly asked questions.

Videos/Demos

  • Demo of browser-perf command line link
  • Using browser-perf for Cordova apps link

Contact

If you run into issues when trying to get this set up, please contact me.