Skip to content

Instantly share code, notes, and snippets.

Avatar

Parashuram N axemclion

View GitHub Profile
@axemclion
axemclion / phpied.md
Last active Aug 29, 2015
Article draft for phpied.com
View phpied.md

Automating Web Page Rendering Performance Measurements

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

@axemclion
axemclion / Readme.md
Last active Aug 29, 2015
GPU Composited CSS - Performance
View Readme.md

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.

Pre-requisites

  1. Ensure that you have node and npm installed
  2. Ensure that you have Selenium running, or can connect to Sauce Labs
  3. Dowload this gist using git clone https://gist.github.com/853d34ebd776047836f3.git
  4. Install other dependencies using npm install
@axemclion
axemclion / gist:64a0bbdb5d756e8eac3a
Created Sep 26, 2014
Test the stability of metrics that browser-perf generates
View gist:64a0bbdb5d756e8eac3a
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,
/*
@axemclion
axemclion / gist:d41b884cd4fce723647d
Created Oct 4, 2014
Capture Chrome timeline for CSS triggers.com
View gist:d41b884cd4fce723647d
// 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: {
View index.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<script type="text/javascript">
function renderedAll(){
document.getElementById('render').innerHTML = 'Done Rendering';
document.body.className = 'rendered-all';
}
@axemclion
axemclion / README.md
Last active Aug 29, 2015
Article for Perfplanet
View README.md

Automating Web Page Rendering Performance

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.

browser-perf

[

@axemclion
axemclion / index.js
Last active Aug 29, 2015
ScrollJank with WebPageTest
View index.js
// More details in blog post at
/*****
http://bit.ly/wpt-scrolljank
*****/
var url = 'http://nparashuram.com/perfslides';
var wptUrl = 'http://192.168.254.21'; // Location of WPT instance
var POLLING_INTERVAL = 1000 * 10; // Look every 10 seconds
@axemclion
axemclion / ember-glimmer-dbmonster-perf.js
Last active Aug 29, 2015
Perf tests for Ember Glimmer implementation using DBMonster test app
View ember-glimmer-dbmonster-perf.js
/*
Ensure that you have ember-cli installed
Clone https://github.com/wycats/dbmonster
To Run Tests
1. Update version on ember to canary (components/ember#canary) or older versions
2. Run ember build --environment production
3. Run a HTTP server on dist directory, at port 8080
4. Run this file to collect data in _data.json
@axemclion
axemclion / perfjankie-ember-perf-js
Last active Aug 29, 2015
Performance monitoring for Ember versions
View perfjankie-ember-perf-js
/*
Pre-req
- Ensure that you have ember-cli installed
- Clone https://github.com/wycats/dbmonster
- Run CouchDB to save the results
- Initialize the database using node_modules/.bin/perfjankie --couch-database=ember-perf --couch-user=admin_user --couch-pwd=admin_pass --only-update-site --couch-server=http://localhost:5984
To Run Tests
1. Update version of ember in bower.json