| npm = require('npm') | |
| npm.load({ | |
| argv: { | |
| remain: [], | |
| cooked: ['test'], | |
| original: ['test'] | |
| } | |
| }, function() { | |
| npm.commands.test([], function() {}); | |
| }); |
#browser-perf results
Performance Comparison between old and new versions of HTML5rocks
Using the browser-perf tool, a test suite similar to Chromium-telemetry on the old and new versions of html5rocks was run.
Page: http://www.html5rocks.com/en/tutorials/speed/animated-gifs/ Page versions: New Commit against Old Commit Browser: Chrome 31
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](http://updates.html5rocks.com/201
Protractor is the end to end test case runner for AngularJS. These end to end test cases can be repurposed to record performance metrics when the scenario is being run. This is a sample repository with an example of how this can be done.
Install all dependencies using npm install
Real web developers ship; and then start looking for the performance issues that make a web page janky :).
Talking to the readers of this blog about the importance of performance would be like preaching to the choir. Most web developers interested in web performance already use tools like YSlow or Page Speed Insignts to keep an eye out for regressions. However measuring how smooth the page runs after it has been delivered over the network is still pretty hard to measure in an automated way. Tools in the browsers Chrome DevTools timeline or Internet Explorer 11 UI Responsiveness are great in a development environment. I thought that automatig this would be the logical next step and hence I build browser-perf. browser-perf is
Ariya Hidayat has written an excellent article on GPU Composited CSS and how it can be used to optimize web rendering performance.
The impact of adding CSS transforms is evident in developer timline and this experiment is a way to capture that information using browser-perf. The results from this experiment clearly indicate how certain CSS properties move rendering load to the GPU, and how that that impact the overall responsiveness of the page.
git clone https://gist.github.com/853d34ebd776047836f3.gitnpm install
| // ==UserScript== | |
| // @name Feedly - Open entry in background | |
| // @description Adds 'h' as a hotkey to open selected entry in background tab | |
| // @namespace userscripts.org/users/Lyk | |
| // @author Lyk | |
| // @include http://feedly.com/* | |
| // @include https://feedly.com/* | |
| // @include http://*.feedly.com/* | |
| // @include https://*.feedly.com/* | |
| // @grant GM_openInTab |
| var browserstack = { | |
| "selenium": "http://hub.browserstack.com:80/wd/hub", | |
| "browsers": [{ | |
| 'browserName': 'chrome', | |
| 'browser_version': 35, | |
| 'os': 'OS X', | |
| 'platform': 'OS X', | |
| 'os_version': 'Mavericks', | |
| "browserstack.debug": false, | |
| /* |
| // Remeber to do npm install wd and run a web server where the pages are hosted. | |
| var wd = require('wd'); | |
| var path = require('path'); | |
| var browser = wd.promiseRemote(); | |
| var caps = { | |
| browserName: 'chrome', | |
| loggingPrefs: { |