Automation for Site Performance - Web Directions 2015

Kitt Hodsden • @kitt • http://ki.tt/wd15 1
Automation for
Site Performance
Kitt Hodsden / @kitt
slides here

View Slide

Me.

View Slide

You.

View Slide


View Slide

Performance is
everybody’s problem.

View Slide

“What does FAST even mean?”

View Slide

Determine key metrics

View Slide

Establish a baseline

View Slide

Make a change

View Slide

Make a change
Measure effects

View Slide


View Slide

40% will abandon a
website that takes more
than 3 seconds to load.

View Slide

https://blog.kissmetrics.com/loading-time/
Not quite

View Slide

Performance Budgets

View Slide

http://timkadlec.com/2013/01/setting-a-performance-budget/
http://timkadlec.com/2014/11/performance-budget-metrics/
http://danielmall.com/articles/how-to-make-a-performance-budget/

View Slide


View Slide

How fast is our site?

View Slide


View Slide

No.

View Slide

The simplest way?

View Slide

Your browser

View Slide

Firefox

View Slide

Safari

View Slide

IE

View Slide

Chrome

View Slide

https://developer.chrome.com/devtools/docs/network

View Slide


View Slide

Kitt Hodsden • @kitt • http://ki.tt/wd15
http://wpotools.github.io/perfBar/
36

View Slide

https://raw.githubusercontent.com/WPOTools/perfBar/master/build/perfbar.js
37

View Slide


perfBar.init({});
38

View Slide


View Slide

But… but…
41

View Slide

My network!
42

View Slide

My browsers!
43

View Slide


View Slide

Automation!
45

View Slide


View Slide

npm
48
Node Package Manager for installing node packages

View Slide


View Slide

npm install -g grunt-cli
50

View Slide

51
package.json
Gruntfile.js
The two files grunt uses

View Slide

npm init
52

View Slide

53
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (dev) performance
version: (1.0.0)
description: Automating front-end performance metrics and improvements
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to .../e4e/dev/package.json:
...

View Slide

54
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (dev) performance
version: (1.0.0)
description: Automating front-end performance metrics and improvements
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to .../e4e/dev/package.json:
...

View Slide

55
{
"name": "performance",
"version": "1.0.0",
"description": "Automating front-end performance”,
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
This is what a package.json file looks like

View Slide

Just download them.
https://github.com/search?q=Gruntfile.js
https://github.com/kitt/grunt-perf-template
56

View Slide

57
{
"engines": {
"node": ">= 4.1.0"
},
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.11.3",
"grunt-contrib-watch": "~0.6.1",
}
}

View Slide

58
{
"engines": {
"node": ">= 4.1.0"
},
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.11.3",
"grunt-contrib-watch": "~0.6.1",
}
}

View Slide

59
$ npm install
With a package.json file, you can install the needed packages easily.

View Slide

60
$ npm install
No -g here!
With a package.json file, you can install the needed packages easily.

View Slide

61
$ ls
Gemfile README.txt fonts node_modules tpl
Gemfile.lock config.rb img package.json widgets
Gruntfile.js css js scss

View Slide

Check dependencies into the repo?
http://addyosmani.com/blog/checking-in-front-end-dependencies/
http://redotheweb.com/2013/09/12/should-you-commit-dependencies.html
62
Total sidebar on checking dependencies into the repo or not

View Slide

module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%="yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};

View Slide

64
grunt.initConfig({
uglify: {
options: {
},
build: {
}
}
});
// Default task(s).
};
A basic Gruntfile.js file

View Slide

65
grunt.initConfig({
uglify: {
options: {
},
build: {
}
}
});
// Default task(s).
};

View Slide

66
grunt.initConfig({
uglify: {
options: {
},
build: {
}
}
});
// Default task(s).
};

View Slide

67
grunt.loadNpmTasks('grunt-aws-s3');
grunt.loadNpmTasks('grunt-cafe-mocha');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-copy');

View Slide

68
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-imagemin');

View Slide

69
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-env');
grunt.loadNpmTasks('grunt-favicons');
grunt.loadNpmTasks('grunt-html-validation');
grunt.loadNpmTasks('grunt-mkdir');

View Slide

70
$ npm install load-grunt-tasks --save-dev

View Slide

71
$ npm install load-grunt-tasks --save-dev

View Slide

// load grunt tasks matching ['grunt-*', '@*/grunt-*'] patterns
require('load-grunt-tasks')(grunt);
grunt.initConfig({
...

View Slide

// load grunt tasks matching ['grunt-*', '@*/grunt-*'] patterns
require('load-grunt-tasks')(grunt);
grunt.initConfig({});
grunt.registerTask('default', []);
}

View Slide

https://www.flickr.com/photos/dandechiaro/4151566643

View Slide

npm install grunt-devperf --save-dev
75

View Slide

https://github.com/macbre/phantomas

View Slide

77
devperf: {
options: {
urls: [
'http://localhost:8000'
]
}
}
…
grunt.registerTask('pe', ['devperf']);

View Slide


View Slide

79
…
devperf: {
options: {
urls: [
'http://grunt.wtf/'
],
numberOfRuns: 5,
openResults: true,
resultsFolder: './devperf',
phantomasOptions: {
'film-strip': true
}
}
}
…
grunt.registerTask('pe', ['devperf']);

View Slide


View Slide

https://www.flickr.com/photos/ndrwfgg/8072089187

View Slide

http://www.devobjective.com/

View Slide

Remove HTML
Comments
89
https://github.com/gruntjs/grunt-contrib-htmlmin

View Slide

npm install grunt-contrib-htmlmin —save-dev
90
https://github.com/gruntjs/grunt-contrib-htmlmin

View Slide

91
…
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: {
'dist/index.html': 'src/index.html',
'dist/contact.html': 'src/contact.html'
}
},
dev: {
files: {
'dist/index.html': 'src/index.html',
'dist/contact.html': 'src/contact.html'
}
}
}
…
grunt.registerTask(‘comments-be-gone‘, ['htmlmin']);

View Slide

Make a change
Measure effects

View Slide

Concatenate and
Minify CSS files
94

View Slide

npm install grunt-contrib-cssmin --save-dev
95
Minimize CSS files

View Slide

Remove duplicate CSS?
96

View Slide

npm install grunt-csscss --save-dev
97
Report duplicate CSS in files

View Slide

Remove unused CSS?
98

View Slide

npm install grunt-uncss --save-dev
99
Remove unused CSS

View Slide

npm install grunt-phantomcss —save-dev
100
Make sure you haven’t removed things you need

View Slide

npm install grunt-phantomcss —save-dev
101

View Slide

npm install @micahgodbolt/grunt-phantomcss --save-dev
https://github.com/micahgodbolt/grunt-phantomcss
https://github.com/Huddle/PhantomCSS
102

View Slide

npm install @micahgodbolt/grunt-phantomcss --save-dev
https://github.com/micahgodbolt/grunt-phantomcss
https://github.com/Huddle/PhantomCSS
103
We can install from github

View Slide


View Slide

grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats
phantomcss: {
desktop: {
options: {
screenshots: 'test/visual/desktop/',
results: 'results/visual/desktop',
viewportSize: [1024, 768]
},
src: [
'test/visual/**.js'
]
},
mobile: {
options: {
screenshots: 'test/visual/mobile/',
results: 'results/visual/mobile',
},
src: [
'test/visual/**.js'
]
}
}

View Slide

phantomcss: {
desktop: {
options: {
screenshots: 'test/visual/desktop/',
results: 'results/visual/desktop',
},
src: [
'test/visual/**.js'
]
},
mobile: {
options: {
screenshots: 'test/visual/mobile/',
results: 'results/visual/mobile',
},
src: [
'test/visual/**.js'
]
}
}

View Slide

casper.thenOpen('http://grunt.wtf/web-directions')
.then(function() {
phantomcss.screenshot('#region-branding', 'region-branding');
})
.then(function now_check_the_screenshots() {
phantomCSS.compareAll();
});

View Slide

npm install grunt-cssstats --save-dev
108
https://github.com/cssstats/grunt-cssstats
Look at the site’s CSS statistics

View Slide

https://github.com/cssstats/cssstats

View Slide


View Slide

cssstats: {
dev: {
options: {},
files: {
'stats/css-stats.json': ['css/example.css']
},
}
}
…
grunt.registerTask('stats', ['cssstats']);

View Slide

cssstats: {
dev: {
options: { safe: false }, // Barf on invalid CSS
files: {
'stats/cssstats-dev.json': ['app/styles/main.css']
}
},
prod: {
files: {
'stats/cssstats.json': ['dist/styles.css']
}
}
}

View Slide

https://github.com/cssstats/cssstats
118

View Slide

Aggregate and
Minify JavaScript?
119

View Slide

npm install grunt-contrib-uglify --save-dev
120
Minimize javascript ﬁles

View Slide

Make a change
Measure effects

View Slide

Too many small images?
123

View Slide

npm install grunt-montage --save-dev
124
Making things easier with sprites!

View Slide

125
grunt.initConfig({
montage: {
iconaroo: {
files: {
"images/sprites": [
"images/icons/*.png"
]
},
options: {
size: 32,
outputImage: "sprite-icons.png",
outputStylesheet: "sprite-icons.css"
}
}
}
});
Sample grunt-montage configuration

View Slide

npm install grunt-contrib-imagemin --save-dev
126
Make pages load faster by reducing image sizes

View Slide

127
imagemin: {
prod: {
files: [{
expand: true,
cwd: 'imgs-src/',
src: ['**/*.{png,jpg,gif}'],
dest: 'imgs/'
}]
}
}

View Slide

npm install grunt-svgmin --save-dev
128
Reduce SVG sizes, too

View Slide

129
grunt.initConfig({
svgmin: { // Task
options: { // Configuration that will be passed directly to SVGO
plugins: [
{ removeViewBox: false },
{ removeUselessStrokeAndFill: false }
]
},
dist: { // Target
files: [{ // Dictionary of files
expand: true, // Enable dynamic expansion.
cwd: 'img/src', // Src matches are relative to this path.
src: ['**/*.svg'], // Actual pattern(s) to match.
dest: 'img/', // Destination path prefix.
ext: '.min.svg' // Dest filepaths will have this extension.
// ie: optimise img/src/branding/logo.svg and store it in img/branding/logo.min.svg
}]
}
});
grunt.loadNpmTasks('grunt-svgmin');
grunt.registerTask('default', ['svgmin']);
Sample grunt-svgmin configuration

View Slide


View Slide

npm install grunt-responsive-images --save-dev
131
Responsive images by resizing
https://github.com/andismith/grunt-responsive-images

View Slide

132
grunt.initConfig({
responsive_images: {
myTask: {
options: {
sizes: [{
width: 320,
height: 240
},{
name: 'medium',
width: 640
},{
name: "large",
width: 1024,
suffix: "_x2",
quality: 60
}]
},
files: [{
expand: true,
src: ['original/**.{jpg,gif,png}'],
cwd: 'images/',
custom_dest: 'images/{%= width %}/'
}]
}
},
});
Sample grunt-responsive-images configuration

View Slide

133
srcset="/images/small/cat.jpg 320w,
/images/large/cat.jpg 1024w">
Using img srcset

View Slide

134
srcset="/images/small/cat.jpg 320w,
/images/medium/cat.jpg 640w,
/images/large/cat.jpg 1024w">
Using img srcset

View Slide

npm install grunt-grunticon --save-dev
135
SVG with PNG fallbacks
https://github.com/ﬁlamentgroup/grunticon

View Slide

?
136

View Slide

webfonts!
137

View Slide

Him: “Hey, I have two megs of webfonts…”
Me: “…”
Him: “Is this okay?”
138

View Slide

No.
139

View Slide


View Slide

npm install grunt-ziti —save-dev
https://github.com/caiguanhao/grunt-ziti
141
Reduce font file sizes

View Slide

142
grunt.initConfig({
ziti: {
subset_only: {
options: {
font: {
chars: '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
},
convert: false
},
files: {
‘assets/fonts/my.ttf': [ ‘src/fonts/original.ttf' ]
}
}
}
});
grunt.loadNpmTasks('grunt-ziti');
grunt.registerTask('fontsubset', ['ziti']);
Sample grunt-ziti configuration

View Slide

Wait… again…
143

View Slide

Dependent on
my network?
144

View Slide

Yep.
145

View Slide

How about not?
146

View Slide


View Slide

Request an API key.

View Slide


View Slide

The API key is provisioned for up
to 200 page loads per day …
sufficient for most low-volume use
cases and for building a proof-of-
concept for larger testing

View Slide

Need more?

View Slide

Set up your own WebPageTest server.

View Slide

npm install grunt-perfbudget --save-dev
153
https://github.com/tkadlec/grunt-perfbudget

View Slide

154
perfbudget: {
default: {
options: {
url: ‘http://example.io/',
key: 'PUT_YOUR_API_KEY_HERE'
}
}
}
…
grunt.registerTask('budg', ['perfbudget']);

View Slide

155
perfbudget: {
default: {
options: {
url: 'http://fromthemiddle.io/',
key: 'thisismykey',
wptInstance: 'ec2.us-west-2.amazonaws.com',
location: 'us-west-2_wptdriver',
pollResults: 10,
connectivity: '3G',
runs: 1,
timeout: 240
}
}
}

View Slide

156
perfbudget: {
default: {
options: {
key: 'thisismykey',
pollResults: 10,
connectivity: '3G',
runs: 1,
timeout: 240
}
}
}

View Slide

157
perfbudget: {
default: {
options: {
key: 'thisismykey',
pollResults: 10,
connectivity: '3G',
runs: 1,
timeout: 240
}
}
}

View Slide


View Slide

159
perfbudget: {
default: {
options: {
…
connectivity: '3G',
timeout: 240,
budget: {
render: '3000',
SpeedIndex: '7500',
visualComplete: '6000'
}
}
}
}

View Slide


View Slide

Scripting!
162

View Slide

Now what?
163
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting

View Slide

164
// bring up the login screen
navigate https://grunt.wtf/user
// log in
setValue name=user testuser
setValue name=password testpassword
submitFormname=user-login

View Slide

Now what?
165

View Slide

npm install grunt-shell --save-dev
166
http://example.com/
Installing the grunt shell package to get to everything else

View Slide

function log(err, stdout, stderr, cb) {
console.log(stdout);
cb();
}
grunt.initConfig({
shell: {
dirListing: {
command: 'ls',
options: {
callback: log
}
}
}
});

View Slide

npm install grunt-mocha --save-
dev
168
http://example.com/
Running client side tests

View Slide

npm install grunt-mocha-test --
save-dev
169
http://example.com/
Running server side tests

View Slide

Integrate into CI builds
170

View Slide


View Slide

Tracking over time
172

View Slide

Tracking over time
173
http://www.wptmonitor.org/home

View Slide

npm install grunt-wpt --save-dev
174
https://github.com/sideroad/grunt-wpt
https://github.com/sideroad/grunt-wpt-page

View Slide

175
wpt: {
options: {
server: 'ec2.us-west-2.amazonaws.com',
dest: 'wpt/'
},
ftm: {
options: {
server: 'http://ec2.us-west-2.amazonaws.com',
url: ['http://fromthemiddle.io/']
},
dest: 'wpt/',
}
}
…
grunt.registerTask('wptrun', ['wpt']);

View Slide


View Slide

https://github.com/trulia/webpagetest-charts-ui
https://github.com/trulia/webpagetest-charts-api

View Slide

Oh boy!

View Slide

webpagetest-mapper

View Slide

webpagetest-api

View Slide

npm install webpagetest-api -g
npm install webpagetest-mapper -g
181

View Slide

$ cat tests.json
[
{
"name": "From the Middle",
"url": "http://fromthemiddle.io/",
"type": "home"
},
{
"name": "Kitt Hodsden",
"url": "https://kitt.hodsden.org/",
"type": "away"
}
]

View Slide


View Slide

https://github.com/trulia/webpagetest-charts-ui
https://github.com/trulia/webpagetest-charts-api

View Slide

Make a change
Measure effects

View Slide

Make a change
Measure effects
Announce effects

View Slide


View Slide

sitespeed.io

View Slide

http://run.sitespeed.io/

View Slide


View Slide

Automation!

View Slide

https://speakerdeck.com/soulislove/monitoring-
web-performance-using-open-source-tools-san-
francisco-and-silicon-valley-web-performance-group
Peter Hedenskog / @soulislove

View Slide

https://speakerdeck.com/soulislove/monitoring-
web-performance-using-open-source-tools-san-
francisco-and-silicon-valley-web-performance-group
snk.ms/sswpt

View Slide

https://docs.docker.com/installation/

View Slide

Start docker (osx)

View Slide

docker pull sitespeedio/graphite
docker pull grafana/grafana
docker pull sitespeedio/sitespeed.io

View Slide

start graphite

View Slide

https://www.sitespeed.io/documentation/performance-dashboard/
$ sudo mkdir -p /data/graphite/storage/whisper
$ sudo htpasswd -c /path/to/.htpasswd YOUR_USERNAME
$ sudo docker run -d \
--name graphite \
-p 8080:80 \
-p 2003:2003 \
--restart="always" \
-v /data/graphite/storage/whisper:/opt/graphite/storage/whisper \
-v /path/to/.htpasswd:/etc/nginx/.htpasswd \
sitespeedio/graphite

View Slide

start grafana

View Slide

$ sudo mkdir -p /data/grafana
$ sudo docker run -d -p 3000:3000 \
-v /data/grafana:/var/lib/grafana \
-e "GF_SECURITY_ADMIN_USER=myuser" \
-e "GF_SECURITY_ADMIN_PASSWORD=MY_SUPER_STRONG_PASSWORD" \
--name grafana \
grafana/grafana

View Slide


View Slide

$ sudo mkdir -p /data/grafana
$ sudo docker run -d -p 3000:3000 \
-v /data/grafana:/var/lib/grafana \
-e "GF_SECURITY_ADMIN_USER=myuser" \
-e "GF_SECURITY_ADMIN_PASSWORD=MY_SUPER_STRONG_PASSWORD" \
--name grafana \
grafana/grafana

View Slide

seed a single metric run

View Slide

# ifconfig
docker0 Link encap:Ethernet HWaddr 02:42:62:d5:83:18
inet addr:172.17.42.1 Bcast:0.0.0.0 Mask:255.255.0.0
inet6 addr: fe80::42:62ff:fed5:8318/64 Scope:Link
UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1
RX packets:419578 errors:0 dropped:0 overruns:0 frame:0
TX packets:399294 errors:0 dropped:0 overruns:0 carrier:0
collisions:0 txqueuelen:0
RX bytes:66734551 (66.7 MB) TX bytes:834474594 (834.4 MB)

View Slide

$ docker run --privileged --rm -v /sitespeed.io:/sitespeed.io
sitespeedio/sitespeed.io sitespeed.io -u http://fromthemiddle.io -b
firefox -n 1 --graphiteHost 172.17.42.1 --graphiteNamespace
sitespeed.io

View Slide

sitespeed.io

View Slide


View Slide

SHELL=/bin/bash
PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin
0,15,30,45 * * * * docker run --privileged --rm -v /sitespeed.io:/
sitespeed.io sitespeedio/sitespeed.io sitespeed.io -f urls.txt -b
firefox -n 11 --connection cable -r /tmp/ --graphiteHost
YOUR_GRAPHITE_HOST --seleniumServer http://127.0.0.1:4444/wd/hub >>
/tmp/sitespeed-run.txt 2>&1
# YOUR_GRAPHITE_HOST = likely your IP address if you docker’d
# -f urls.txt = list of URLs to analyze
# -n 11 = depth to go, use -n for single page

View Slide

Phew!
229

View Slide

http://tiny.run:3000/
myuser / MY_SUPER_STRONG_PASSWORD
hi / hihihi
230

View Slide

Worth looking at:
https://github.com/andyshora/grunt-yslow
https://github.com/jrcryer/grunt-pagespeed
https://github.com/addyosmani/psi/
http://perf-tooling.today/tools
231

View Slide


View Slide

Questions?
233

View Slide

Thanks!
Kitt Hodsden
http://ki.tt/
@kitt

View Slide

Wait a second…

View Slide


View Slide

Set up your own WebPageTest server.

View Slide

https://aws.amazon.com/
Login In to Amazon AWS

View Slide

Click on EC2

View Slide

Click on Launch Instance

View Slide

Click on Community AMIs

View Slide


View Slide

$ ssh -i downloaded.pem [email protected]

View Slide

$ vi ~/.ssh/authorized_keys
dd # delete the first line
[esc] # trigger the vi command sequence
:wq # save the file and quit

View Slide

sudo vi /var/www/webpagetest/www/settings/settings.ini
# update publishTo with ec2 hostname
# update ec2 = 0
# update ec2_locations = 0
# add EC2.us-west-2.securityGroup line from sample
# add EC2.us-west-2.subnetId line from sample
#

View Slide

sudo vi /var/www/webpage/test/www/settings/keys.ini
[server]
secret=addarandomstringhere
key=addakeyhere
[addakeyhere]
description=Web UI
;[email protected]
limit=0
[thisisyourapikey]
description=API Key
;[email protected]
limit=0

View Slide

$ cd /var/www/webpage/test/www/settings/
$ sudo cp locations.ini.EC2-sample locations.ini
# delete extra locations
# update key values to your thisisyourkey value

View Slide

$ sudo service nginx restart

View Slide

Set up testing instances

View Slide

EC2 server key in settings.ini
(more complicated to set up, better automation management)

View Slide

OR

View Slide

Manual Setup

View Slide

Click on Launch Instance

View Slide


View Slide

wpt_server=ec2.us-west-2.amazonaws.com wpt_key=YOURKEY wpt_location=us-west-2

View Slide

Automation for Site Performance - Web Directions 2015

Automation for Site Performance - Web Directions 2015

Kitt Hodsden

More Decks by Kitt Hodsden

Other Decks in Technology

Featured

Transcript