Slide 1
Slide 1 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 1
Automation for
Site Performance
Kitt Hodsden / @kitt
slides here
Slide 2
Slide 2 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 2
Me.
Slide 3
Slide 3 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 3
You.
Slide 4
Slide 4 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 4
Slide 5
Slide 5 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 5
Performance is
everybody’s problem.
Slide 6
Slide 6 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 6
“What does FAST even mean?”
Slide 7
Slide 7 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 7
Determine key metrics
Slide 8
Slide 8 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 8
Determine key metrics
Establish a baseline
Slide 9
Slide 9 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 9
Determine key metrics
Establish a baseline
Make a change
Slide 10
Slide 10 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 10
Determine key metrics
Establish a baseline
Make a change
Measure effects
Slide 11
Slide 11 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 11
Determine key metrics
Establish a baseline
Make a change
Measure effects
Slide 12
Slide 12 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 12
Determine key metrics
Slide 13
Slide 13 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 13
40% will abandon a
website that takes more
than 3 seconds to load.
Slide 14
Slide 14 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 14
https://blog.kissmetrics.com/loading-time/
Not quite
Slide 15
Slide 15 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 15
https://blog.kissmetrics.com/loading-time/
Not quite
Slide 16
Slide 16 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 16
Performance Budgets
Slide 17
Slide 17 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 17
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/
Slide 18
Slide 18 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 18
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/
Slide 19
Slide 19 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 19
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/
Slide 20
Slide 20 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 20
Slide 21
Slide 21 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 21
Determine key metrics
Slide 22
Slide 22 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 22
Establish a baseline
Slide 23
Slide 23 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 23
How fast is our site?
Slide 24
Slide 24 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 24
Slide 25
Slide 25 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 25
No.
Slide 26
Slide 26 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 26
The simplest way?
Slide 27
Slide 27 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 27
Your browser
Slide 28
Slide 28 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 28
Firefox
Slide 29
Slide 29 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 29
Safari
Slide 30
Slide 30 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 30
IE
Slide 31
Slide 31 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 31
Chrome
Slide 32
Slide 32 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 32
Chrome
Slide 33
Slide 33 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 33
https://developer.chrome.com/devtools/docs/network
Slide 34
Slide 34 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 34
Slide 35
Slide 35 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 35
Slide 36
Slide 36 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
http://wpotools.github.io/perfBar/
36
Slide 37
Slide 37 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
https://raw.githubusercontent.com/WPOTools/perfBar/master/build/perfbar.js
37
Slide 38
Slide 38 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
perfBar.init({});
38
Slide 39
Slide 39 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 39
Slide 40
Slide 40 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 40
Slide 41
Slide 41 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
But… but…
41
Slide 42
Slide 42 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
My network!
42
Slide 43
Slide 43 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
My browsers!
43
Slide 44
Slide 44 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 44
Slide 45
Slide 45 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Automation!
45
Slide 46
Slide 46 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 46
Slide 47
Slide 47 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 47
Slide 48
Slide 48 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm
48
Node Package Manager for installing node packages
Slide 49
Slide 49 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 49
Slide 50
Slide 50 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install -g grunt-cli
50
Slide 51
Slide 51 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
51
package.json
Gruntfile.js
The two files grunt uses
Slide 52
Slide 52 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm init
52
Slide 53
Slide 53 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
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:
...
Slide 54
Slide 54 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
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:
...
Slide 55
Slide 55 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
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
Slide 56
Slide 56 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Just download them.
https://github.com/search?q=Gruntfile.js
https://github.com/kitt/grunt-perf-template
56
Slide 57
Slide 57 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
57
{
"engines": {
"node": ">= 4.1.0"
},
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.11.3",
"grunt-contrib-watch": "~0.6.1",
}
}
This is what a package.json file looks like
Slide 58
Slide 58 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
58
{
"engines": {
"node": ">= 4.1.0"
},
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.11.3",
"grunt-contrib-watch": "~0.6.1",
}
}
This is what a package.json file looks like
Slide 59
Slide 59 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
59
$ npm install
With a package.json file, you can install the needed packages easily.
Slide 60
Slide 60 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
60
$ npm install
No -g here!
With a package.json file, you can install the needed packages easily.
Slide 61
Slide 61 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
61
$ ls
Gemfile README.txt fonts node_modules tpl
Gemfile.lock config.rb img package.json widgets
Gruntfile.js css js scss
Slide 62
Slide 62 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
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
Slide 63
Slide 63 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 63
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']);
};
Slide 64
Slide 64 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
64
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']);
};
A basic Gruntfile.js file
Slide 65
Slide 65 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
65
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']);
};
A basic Gruntfile.js file
Slide 66
Slide 66 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
66
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']);
};
A basic Gruntfile.js file
Slide 67
Slide 67 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
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');
Slide 68
Slide 68 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
68
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');
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');
Slide 69
Slide 69 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
69
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');
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-contrib-uglify');
grunt.loadNpmTasks('grunt-env');
grunt.loadNpmTasks('grunt-favicons');
grunt.loadNpmTasks('grunt-html-validation');
grunt.loadNpmTasks('grunt-mkdir');
Slide 70
Slide 70 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
70
$ npm install load-grunt-tasks --save-dev
Slide 71
Slide 71 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
71
$ npm install load-grunt-tasks --save-dev
Slide 72
Slide 72 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 72
module.exports = function(grunt) {
// load grunt tasks matching ['grunt-*', '@*/grunt-*'] patterns
require('load-grunt-tasks')(grunt);
grunt.initConfig({
...
Slide 73
Slide 73 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 73
module.exports = function(grunt) {
// load grunt tasks matching ['grunt-*', '@*/grunt-*'] patterns
require('load-grunt-tasks')(grunt);
grunt.initConfig({});
grunt.registerTask('default', []);
}
Slide 74
Slide 74 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 74
https://www.flickr.com/photos/dandechiaro/4151566643
Slide 75
Slide 75 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-devperf --save-dev
75
Slide 76
Slide 76 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 76
https://github.com/macbre/phantomas
Slide 77
Slide 77 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
77
devperf: {
options: {
urls: [
'http://localhost:8000'
]
}
}
…
grunt.registerTask('pe', ['devperf']);
Slide 78
Slide 78 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 78
Slide 79
Slide 79 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
79
…
devperf: {
options: {
urls: [
'http://grunt.wtf/'
],
numberOfRuns: 5,
openResults: true,
resultsFolder: './devperf',
phantomasOptions: {
'film-strip': true
}
}
}
…
grunt.registerTask('pe', ['devperf']);
Slide 80
Slide 80 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 80
Slide 81
Slide 81 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 81
Slide 82
Slide 82 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 82
Slide 83
Slide 83 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 83
Slide 84
Slide 84 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 84
Slide 85
Slide 85 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 85
Slide 86
Slide 86 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 86
https://www.flickr.com/photos/ndrwfgg/8072089187
Slide 87
Slide 87 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 87
http://www.devobjective.com/
Slide 88
Slide 88 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 88
http://www.devobjective.com/
Slide 89
Slide 89 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Remove HTML
Comments
89
https://github.com/gruntjs/grunt-contrib-htmlmin
Slide 90
Slide 90 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-contrib-htmlmin —save-dev
90
https://github.com/gruntjs/grunt-contrib-htmlmin
Slide 91
Slide 91 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
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']);
Slide 92
Slide 92 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 92
Determine key metrics
Establish a baseline
Make a change
Measure effects
Slide 93
Slide 93 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 93
Determine key metrics
Establish a baseline
Make a change
Measure effects
Slide 94
Slide 94 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Concatenate and
Minify CSS files
94
Slide 95
Slide 95 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-contrib-cssmin --save-dev
95
Minimize CSS files
Slide 96
Slide 96 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Remove duplicate CSS?
96
Slide 97
Slide 97 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-csscss --save-dev
97
Report duplicate CSS in files
Slide 98
Slide 98 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Remove unused CSS?
98
Slide 99
Slide 99 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-uncss --save-dev
99
Remove unused CSS
Slide 100
Slide 100 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-phantomcss —save-dev
100
Make sure you haven’t removed things you need
Slide 101
Slide 101 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-phantomcss —save-dev
101
Make sure you haven’t removed things you need
Slide 102
Slide 102 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install @micahgodbolt/grunt-phantomcss --save-dev
https://github.com/micahgodbolt/grunt-phantomcss
https://github.com/Huddle/PhantomCSS
102
Make sure you haven’t removed things you need
Slide 103
Slide 103 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install @micahgodbolt/grunt-phantomcss --save-dev
https://github.com/micahgodbolt/grunt-phantomcss
https://github.com/Huddle/PhantomCSS
103
We can install from github
Slide 104
Slide 104 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 104
Make sure you haven’t removed things you need
Slide 105
Slide 105 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 105
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',
viewportSize: [320, 480]
},
src: [
'test/visual/**.js'
]
}
}
Slide 106
Slide 106 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 106
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',
viewportSize: [320, 480]
},
src: [
'test/visual/**.js'
]
}
}
Slide 107
Slide 107 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 107
grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats
casper.thenOpen('http://grunt.wtf/web-directions')
.then(function() {
phantomcss.screenshot('#region-branding', 'region-branding');
})
.then(function now_check_the_screenshots() {
phantomCSS.compareAll();
});
Slide 108
Slide 108 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-cssstats --save-dev
108
https://github.com/cssstats/grunt-cssstats
Look at the site’s CSS statistics
Slide 109
Slide 109 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 109
https://github.com/cssstats/cssstats
Slide 110
Slide 110 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 110
Slide 111
Slide 111 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 111
Slide 112
Slide 112 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 112
Slide 113
Slide 113 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 113
Slide 114
Slide 114 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 114
Slide 115
Slide 115 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 115
grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats
cssstats: {
dev: {
options: {},
files: {
'stats/css-stats.json': ['css/example.css']
},
}
}
…
grunt.registerTask('stats', ['cssstats']);
Slide 116
Slide 116 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 116
grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats
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']
}
}
}
Slide 117
Slide 117 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 117
grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats
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']
}
}
}
Slide 118
Slide 118 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
https://github.com/cssstats/cssstats
118
Slide 119
Slide 119 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Aggregate and
Minify JavaScript?
119
Slide 120
Slide 120 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-contrib-uglify --save-dev
120
Minimize javascript files
Slide 121
Slide 121 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 121
Determine key metrics
Establish a baseline
Make a change
Measure effects
Slide 122
Slide 122 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 122
Determine key metrics
Establish a baseline
Make a change
Measure effects
Slide 123
Slide 123 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Too many small images?
123
Slide 124
Slide 124 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-montage --save-dev
124
Making things easier with sprites!
Slide 125
Slide 125 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
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
Slide 126
Slide 126 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-contrib-imagemin --save-dev
126
Make pages load faster by reducing image sizes
Slide 127
Slide 127 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
127
imagemin: {
prod: {
files: [{
expand: true,
cwd: 'imgs-src/',
src: ['**/*.{png,jpg,gif}'],
dest: 'imgs/'
}]
}
}
Slide 128
Slide 128 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-svgmin --save-dev
128
Reduce SVG sizes, too
Slide 129
Slide 129 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
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
Slide 130
Slide 130 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 130
Slide 131
Slide 131 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-responsive-images --save-dev
131
Responsive images by resizing
https://github.com/andismith/grunt-responsive-images
Slide 132
Slide 132 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
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
Slide 133
Slide 133 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
133
Using img srcset
Using img srcset
Slide 134
Slide 134 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
134
Using img srcset
Using img srcset
Slide 135
Slide 135 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-grunticon --save-dev
135
SVG with PNG fallbacks
https://github.com/filamentgroup/grunticon
Slide 136
Slide 136 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
?
136
Slide 137
Slide 137 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
webfonts!
137
Slide 138
Slide 138 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Him: “Hey, I have two megs of webfonts…”
Me: “…”
Him: “Is this okay?”
138
Slide 139
Slide 139 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
No.
139
Slide 140
Slide 140 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 140
Slide 141
Slide 141 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-ziti —save-dev
https://github.com/caiguanhao/grunt-ziti
141
Reduce font file sizes
Slide 142
Slide 142 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
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
Slide 143
Slide 143 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Wait… again…
143
Slide 144
Slide 144 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Dependent on
my network?
144
Slide 145
Slide 145 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Yep.
145
Slide 146
Slide 146 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
How about not?
146
Slide 147
Slide 147 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 147
Slide 148
Slide 148 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 148
Request an API key.
Slide 149
Slide 149 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 149
Slide 150
Slide 150 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 150
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
Slide 151
Slide 151 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 151
Need more?
Slide 152
Slide 152 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 152
Set up your own WebPageTest server.
Slide 153
Slide 153 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-perfbudget --save-dev
153
https://github.com/tkadlec/grunt-perfbudget
Slide 154
Slide 154 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
154
perfbudget: {
default: {
options: {
url: ‘http://example.io/',
key: 'PUT_YOUR_API_KEY_HERE'
}
}
}
…
grunt.registerTask('budg', ['perfbudget']);
Slide 155
Slide 155 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
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
}
}
}
Slide 156
Slide 156 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
156
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
}
}
}
Slide 157
Slide 157 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
157
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
}
}
}
Slide 158
Slide 158 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 158
Slide 159
Slide 159 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
159
perfbudget: {
default: {
options: {
url: 'http://fromthemiddle.io/',
…
connectivity: '3G',
timeout: 240,
budget: {
render: '3000',
SpeedIndex: '7500',
visualComplete: '6000'
}
}
}
}
Slide 160
Slide 160 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 160
Slide 161
Slide 161 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 161
Slide 162
Slide 162 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Scripting!
162
Slide 163
Slide 163 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Now what?
163
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting
Slide 164
Slide 164 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
164
// bring up the login screen
navigate https://grunt.wtf/user
// log in
setValue name=user testuser
setValue name=password testpassword
submitFormname=user-login
Slide 165
Slide 165 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Now what?
165
Slide 166
Slide 166 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-shell --save-dev
166
http://example.com/
Installing the grunt shell package to get to everything else
Slide 167
Slide 167 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 167
function log(err, stdout, stderr, cb) {
console.log(stdout);
cb();
}
grunt.initConfig({
shell: {
dirListing: {
command: 'ls',
options: {
callback: log
}
}
}
});
Slide 168
Slide 168 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-mocha --save-
dev
168
http://example.com/
Running client side tests
Slide 169
Slide 169 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-mocha-test --
save-dev
169
http://example.com/
Running server side tests
Slide 170
Slide 170 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Integrate into CI builds
170
Slide 171
Slide 171 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 171
Slide 172
Slide 172 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Tracking over time
172
Slide 173
Slide 173 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Tracking over time
173
http://www.wptmonitor.org/home
Slide 174
Slide 174 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install grunt-wpt --save-dev
174
https://github.com/sideroad/grunt-wpt
https://github.com/sideroad/grunt-wpt-page
Slide 175
Slide 175 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
175
wpt: {
options: {
url: 'http://fromthemiddle.io/',
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']);
Slide 176
Slide 176 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 176
Slide 177
Slide 177 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 177
https://github.com/trulia/webpagetest-charts-ui
https://github.com/trulia/webpagetest-charts-api
Slide 178
Slide 178 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 178
Oh boy!
Slide 179
Slide 179 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 179
webpagetest-mapper
Slide 180
Slide 180 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 180
webpagetest-api
Slide 181
Slide 181 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
npm install webpagetest-api -g
npm install webpagetest-mapper -g
181
Slide 182
Slide 182 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 182
$ cat tests.json
[
{
"name": "From the Middle",
"url": "http://fromthemiddle.io/",
"type": "home"
},
{
"name": "Kitt Hodsden",
"url": "https://kitt.hodsden.org/",
"type": "away"
}
]
Slide 183
Slide 183 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 183
Slide 184
Slide 184 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 184
Slide 185
Slide 185 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 185
https://github.com/trulia/webpagetest-charts-ui
https://github.com/trulia/webpagetest-charts-api
Slide 186
Slide 186 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 186
Determine key metrics
Establish a baseline
Make a change
Measure effects
Slide 187
Slide 187 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 187
Determine key metrics
Establish a baseline
Make a change
Measure effects
Slide 188
Slide 188 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 188
Determine key metrics
Establish a baseline
Make a change
Measure effects
Announce effects
Slide 189
Slide 189 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 189
Slide 190
Slide 190 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 190
sitespeed.io
Slide 191
Slide 191 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 191
http://run.sitespeed.io/
Slide 192
Slide 192 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 192
Slide 193
Slide 193 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 193
Slide 194
Slide 194 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 194
Slide 195
Slide 195 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 195
Slide 196
Slide 196 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 196
Slide 197
Slide 197 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 197
Slide 198
Slide 198 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 198
Automation!
Slide 199
Slide 199 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 199
https://speakerdeck.com/soulislove/monitoring-
web-performance-using-open-source-tools-san-
francisco-and-silicon-valley-web-performance-group
Peter Hedenskog / @soulislove
Slide 200
Slide 200 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 200
https://speakerdeck.com/soulislove/monitoring-
web-performance-using-open-source-tools-san-
francisco-and-silicon-valley-web-performance-group
snk.ms/sswpt
Slide 201
Slide 201 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 201
https://docs.docker.com/installation/
Slide 202
Slide 202 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 202
Start docker (osx)
Slide 203
Slide 203 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 203
docker pull sitespeedio/graphite
docker pull grafana/grafana
docker pull sitespeedio/sitespeed.io
Slide 204
Slide 204 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 204
start graphite
Slide 205
Slide 205 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 205
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
Slide 206
Slide 206 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 206
start grafana
Slide 207
Slide 207 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 207
$ 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 \
--restart="always" \
grafana/grafana
Slide 208
Slide 208 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 208
Slide 209
Slide 209 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 209
$ 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 \
--restart="always" \
grafana/grafana
Slide 210
Slide 210 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 210
seed a single metric run
Slide 211
Slide 211 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 211
# 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)
Slide 212
Slide 212 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 212
$ 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
Slide 213
Slide 213 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 213
$ 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
Slide 214
Slide 214 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 214
$ 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
Slide 215
Slide 215 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 215
Slide 216
Slide 216 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 216
Slide 217
Slide 217 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 217
Slide 218
Slide 218 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 218
Slide 219
Slide 219 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 219
Slide 220
Slide 220 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 220
Slide 221
Slide 221 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 221
Slide 222
Slide 222 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 222
Slide 223
Slide 223 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 223
Slide 224
Slide 224 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 224
Slide 225
Slide 225 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 225
Slide 226
Slide 226 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 226
Slide 227
Slide 227 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 227
Slide 228
Slide 228 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 228
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
Slide 229
Slide 229 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Phew!
229
Slide 230
Slide 230 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
http://tiny.run:3000/
myuser / MY_SUPER_STRONG_PASSWORD
hi / hihihi
230
Slide 231
Slide 231 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
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
Slide 232
Slide 232 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 232
Slide 233
Slide 233 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Questions?
233
Slide 234
Slide 234 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Thanks!
Kitt Hodsden
http://ki.tt/
@kitt
Slide 235
Slide 235 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 235
Wait a second…
Slide 236
Slide 236 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 236
Slide 237
Slide 237 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 237
Slide 238
Slide 238 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 238
Set up your own WebPageTest server.
Slide 239
Slide 239 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 239
https://aws.amazon.com/
Login In to Amazon AWS
Slide 240
Slide 240 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 240
Click on EC2
Slide 241
Slide 241 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 241
Click on Launch Instance
Slide 242
Slide 242 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 242
Click on Community AMIs
Slide 243
Slide 243 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 243
Slide 244
Slide 244 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 244
Slide 245
Slide 245 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 245
Slide 246
Slide 246 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 246
Slide 247
Slide 247 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 247
Slide 248
Slide 248 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 248
Slide 249
Slide 249 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 249
Slide 250
Slide 250 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 250
Slide 251
Slide 251 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 251
Slide 252
Slide 252 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 252
Slide 253
Slide 253 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 253
Slide 254
Slide 254 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 254
Slide 255
Slide 255 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 255
Slide 256
Slide 256 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 256
Slide 257
Slide 257 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 257
Slide 258
Slide 258 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 258
Slide 259
Slide 259 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 259
Slide 260
Slide 260 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 260
Slide 261
Slide 261 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 261
Slide 262
Slide 262 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 262
Slide 263
Slide 263 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 263
Slide 264
Slide 264 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 264
$ ssh -i downloaded.pem ubuntu@ec2
Slide 265
Slide 265 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 265
$ ssh -i downloaded.pem ubuntu@ec2
Slide 266
Slide 266 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 266
$ vi ~/.ssh/authorized_keys
dd # delete the first line
[esc] # trigger the vi command sequence
:wq # save the file and quit
Slide 267
Slide 267 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 267
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
#
Slide 268
Slide 268 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 268
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
Slide 269
Slide 269 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 269
$ 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
Slide 270
Slide 270 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 270
$ sudo service nginx restart
Slide 271
Slide 271 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 271
Set up testing instances
Slide 272
Slide 272 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 272
EC2 server key in settings.ini
(more complicated to set up, better automation management)
Slide 273
Slide 273 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 273
OR
Slide 274
Slide 274 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 274
Manual Setup
Slide 275
Slide 275 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 275
Click on Launch Instance
Slide 276
Slide 276 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 276
Slide 277
Slide 277 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 277
wpt_server=ec2.us-west-2.amazonaws.com wpt_key=YOURKEY wpt_location=us-west-2
Slide 278
Slide 278 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 278
Wait a few minutes…
Slide 279
Slide 279 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 279
… maybe a few more.
Slide 280
Slide 280 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 280
Slide 281
Slide 281 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 281
Slide 282
Slide 282 text
Kitt Hodsden • @kitt • http://ki.tt/wd15 282
Slide 283
Slide 283 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Questions?
283
Slide 284
Slide 284 text
Kitt Hodsden • @kitt • http://ki.tt/wd15
Thanks!
Kitt Hodsden
http://ki.tt/
@kitt
slides here