Clone this wiki locally
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.
- 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
Here are some details about how the tool works.
If you run into issues when trying to get this set up, please contact me.