devObjective Automate Your Site's Front End Performance

Automating your site's front-end performance metric gathering using Grunt, grunt-based tools and Webpagetest. No devops experience needed.

Transcript

1. Kitt Hodsden • @kitt • http://ki.tt/do2015 Automate Your Site's Front-End Performance Kitt Hodsden / @kitt slides here
2. Kitt Hodsden • @kitt • http://ki.tt/do2015 2 You.
3. Kitt Hodsden • @kitt • http://ki.tt/do2015 3 Me.
4. Kitt Hodsden • @kitt • http://ki.tt/do2015 4
5. Kitt Hodsden • @kitt • http://ki.tt/do2015 5 Performance is everyone’s problem.
6. Kitt Hodsden • @kitt • http://ki.tt/do2015 6 “What does FAST even mean?”
7. Kitt Hodsden • @kitt • http://ki.tt/do2015 7 Determine key metrics
8. Kitt Hodsden • @kitt • http://ki.tt/do2015 8 Determine key metrics Establish a baseline
9. Kitt Hodsden • @kitt • http://ki.tt/do2015 9 Determine key metrics Establish a baseline Make a change
10. Kitt Hodsden • @kitt • http://ki.tt/do2015 10 Determine key metrics Establish a baseline Make a change Measure effects
11. Kitt Hodsden • @kitt • http://ki.tt/do2015 11 Determine key metrics Establish a baseline Make a change Measure effects
12. Kitt Hodsden • @kitt • http://ki.tt/do2015 12 Determine key metrics
13. Kitt Hodsden • @kitt • http://ki.tt/do2015 13 40% will abandon a website that takes more than 3 seconds to load.
14. Kitt Hodsden • @kitt • http://ki.tt/do2015 14 https://blog.kissmetrics.com/loading-time/ Not quite
15. Kitt Hodsden • @kitt • http://ki.tt/do2015 15 https://blog.kissmetrics.com/loading-time/ Not quite
16. Kitt Hodsden • @kitt • http://ki.tt/do2015 16 Performance Budget
17. Kitt Hodsden • @kitt • http://ki.tt/do2015 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/
18. Kitt Hodsden • @kitt • http://ki.tt/do2015 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/
19. Kitt Hodsden • @kitt • http://ki.tt/do2015 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/
20. Kitt Hodsden • @kitt • http://ki.tt/do2015 20 https://speakerdeck.com/lara/designing-for-performance?slide=69
21. Kitt Hodsden • @kitt • http://ki.tt/do2015 21 Determine key metrics
22. Kitt Hodsden • @kitt • http://ki.tt/do2015 22 Establish a baseline
23. Kitt Hodsden • @kitt • http://ki.tt/do2015 23 How fast is our site?
24. Kitt Hodsden • @kitt • http://ki.tt/do2015 https://www.flickr.com/photos/wonderlane/6450860457
25. Kitt Hodsden • @kitt • http://ki.tt/do2015 25 No.
26. Kitt Hodsden • @kitt • http://ki.tt/do2015 26 The simplest way?
27. Kitt Hodsden • @kitt • http://ki.tt/do2015 27 Your browser
28. Kitt Hodsden • @kitt • http://ki.tt/do2015 28 Firefox
29. Kitt Hodsden • @kitt • http://ki.tt/do2015 29 Safari
30. Kitt Hodsden • @kitt • http://ki.tt/do2015 30 IE
31. Kitt Hodsden • @kitt • http://ki.tt/do2015 31 Chrome
32. Kitt Hodsden • @kitt • http://ki.tt/do2015 32 Chrome
33. Kitt Hodsden • @kitt • http://ki.tt/do2015 33 https://developer.chrome.com/devtools/docs/network#resource-network-timing
34. Kitt Hodsden • @kitt • http://ki.tt/do2015 34
35. Kitt Hodsden • @kitt • http://ki.tt/do2015 35
36. Kitt Hodsden • @kitt • http://ki.tt/do2015 https://lafikl.github.io/perfBar/ 36
37. Kitt Hodsden • @kitt • http://ki.tt/do2015 37 https://lafikl.github.io/perfBar/
38. Kitt Hodsden • @kitt • http://ki.tt/do2015 But… but… 38
39. Kitt Hodsden • @kitt • http://ki.tt/do2015 My network! 39
40. Kitt Hodsden • @kitt • http://ki.tt/do2015 My browsers! 40
41. Kitt Hodsden • @kitt • http://ki.tt/do2015 Automation! 41
42. Kitt Hodsden • @kitt • http://ki.tt/do2015 42
43. Kitt Hodsden • @kitt • http://ki.tt/do2015 43 http://nodejs.org/
44. Kitt Hodsden • @kitt • http://ki.tt/do2015 npm 44 Node Package Manager for installing node packages
45. Kitt Hodsden • @kitt • http://ki.tt/do2015 45
46. Kitt Hodsden • @kitt • http://ki.tt/do2015 npm install -g grunt-cli 46
47. Kitt Hodsden • @kitt • http://ki.tt/do2015 47 package.json Gruntfile.js The two files grunt uses
48. Kitt Hodsden • @kitt • http://ki.tt/do2015 Just download them.
    https://github.com/search?q=Gruntfile.js
    https://github.com/kitt/grunt-perf-template 48
49. Kitt Hodsden • @kitt • http://ki.tt/do2015 49 { "engines": { "node": ">= 0.12.0" }, "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-jshint": "~0.7.2", "grunt-contrib-watch": "~0.5.3", } } This is what a package.json file looks like
50. Kitt Hodsden • @kitt • http://ki.tt/do2015 50 { "engines": { "node": ">= 0.12.0" }, "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-jshint": "~0.7.2", "grunt-contrib-watch": "~0.5.3", } } This is what a package.json file looks like
51. Kitt Hodsden • @kitt • http://ki.tt/do2015 51 $ npm install With a package.json file, you can install the needed packages easily.
52. Kitt Hodsden • @kitt • http://ki.tt/do2015 52 $ npm install No -g here! With a package.json file, you can install the needed packages easily.
53. Kitt Hodsden • @kitt • http://ki.tt/do2015 53 $ ls Gemfile README.txt fonts node_modules tpl Gemfile.lock config.rb img package.json widgets Gruntfile.js css js scss
54. Kitt Hodsden • @kitt • http://ki.tt/do2015 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 54 Total sidebar on checking dependencies into the repo or not
55. Kitt Hodsden • @kitt • http://ki.tt/do2015 55 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']); };
56. Kitt Hodsden • @kitt • http://ki.tt/do2015 56 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
57. Kitt Hodsden • @kitt • http://ki.tt/do2015 57 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
58. Kitt Hodsden • @kitt • http://ki.tt/do2015 58 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
59. Kitt Hodsden • @kitt • http://ki.tt/do2015 59 $ npm install matchdep --save-dev
60. Kitt Hodsden • @kitt • http://ki.tt/do2015 60 ... // load all the grunt modules instead of one each line require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks); grunt.registerTask('checkjs', ['jshint']); grunt.registerTask('watchjs', ['jshint', 'watch']); grunt.registerTask('gruntjs', ['jshint:gruntfile', 'watch']);
61. Kitt Hodsden • @kitt • http://ki.tt/do2015 61 https://www.flickr.com/photos/dandechiaro/4151566643
62. Kitt Hodsden • @kitt • http://ki.tt/do2015 npm install grunt-devperf --save-dev 62
63. Kitt Hodsden • @kitt • http://ki.tt/do2015 63 https://github.com/macbre/phantomas
64. Kitt Hodsden • @kitt • http://ki.tt/do2015 64 devperf: { options: { urls: [ 'http://localhost:8000' ] } } … grunt.registerTask('pe', ['devperf']);
65. Kitt Hodsden • @kitt • http://ki.tt/do2015 65
66. Kitt Hodsden • @kitt • http://ki.tt/do2015 66 … devperf: { options: { urls: [ 'http://fromthemiddle.io/' ], numberOfRuns: 5, openResults: true, resultsFolder: './devperf', phantomasOptions: { 'film-strip': true } } } … grunt.registerTask('pe', ['devperf']);
67. Kitt Hodsden • @kitt • http://ki.tt/do2015 67
68. Kitt Hodsden • @kitt • http://ki.tt/do2015 68
69. Kitt Hodsden • @kitt • http://ki.tt/do2015 69
70. Kitt Hodsden • @kitt • http://ki.tt/do2015 70
71. Kitt Hodsden • @kitt • http://ki.tt/do2015 71
72. Kitt Hodsden • @kitt • http://ki.tt/do2015 72
73. Kitt Hodsden • @kitt • http://ki.tt/do2015 73 https://www.flickr.com/photos/ndrwfgg/8072089187
74. Kitt Hodsden • @kitt • http://ki.tt/do2015 74 http://www.devobjective.com/
75. Kitt Hodsden • @kitt • http://ki.tt/do2015 75 http://www.devobjective.com/
76. Kitt Hodsden • @kitt • http://ki.tt/do2015 Remove HTML Comments? 76 https://github.com/gruntjs/grunt-contrib-htmlmin
77. Kitt Hodsden • @kitt • http://ki.tt/do2015 npm install grunt-contrib-htmlmin —save-dev 77 https://github.com/gruntjs/grunt-contrib-htmlmin
78. Kitt Hodsden • @kitt • http://ki.tt/do2015 78 … 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']);
79. Kitt Hodsden • @kitt • http://ki.tt/do2015 Concatenate and Minify CSS files? 79
80. Kitt Hodsden • @kitt • http://ki.tt/do2015 npm install grunt-contrib-cssmin --save-dev 80 Minimize CSS files
81. Kitt Hodsden • @kitt • http://ki.tt/do2015 Remove duplicate CSS? 81
82. Kitt Hodsden • @kitt • http://ki.tt/do2015 npm install grunt-csscss --save-dev 82 Report duplicate CSS in files
83. Kitt Hodsden • @kitt • http://ki.tt/do2015 Remove unused CSS? 83
84. Kitt Hodsden • @kitt • http://ki.tt/do2015 npm install grunt-uncss --save-dev 84 Remove unused CSS
85. Kitt Hodsden • @kitt • http://ki.tt/do2015 npm install grunt-cssstats --save-dev 85 https://github.com/cssstats/grunt-cssstats Look at the site’s CSS statistics
86. Kitt Hodsden • @kitt • http://ki.tt/do2015 86 https://github.com/cssstats/cssstats
87. Kitt Hodsden • @kitt • http://ki.tt/do2015 87
88. Kitt Hodsden • @kitt • http://ki.tt/do2015 88
89. Kitt Hodsden • @kitt • http://ki.tt/do2015 89
90. Kitt Hodsden • @kitt • http://ki.tt/do2015 90
91. Kitt Hodsden • @kitt • http://ki.tt/do2015 91
92. Kitt Hodsden • @kitt • http://ki.tt/do2015 92 grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats cssstats: { dev: { options: {}, files: { 'stats/css-stats.json': ['css/example.css'] }, } } … grunt.registerTask('stats', ['cssstats']);
93. Kitt Hodsden • @kitt • http://ki.tt/do2015 93 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'] } } }
94. Kitt Hodsden • @kitt • http://ki.tt/do2015 94 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'] } } }
95. Kitt Hodsden • @kitt • http://ki.tt/do2015 https://github.com/cssstats/cssstats 95
96. Kitt Hodsden • @kitt • http://ki.tt/do2015 Aggregate and Minify JavaScript? 96
97. Kitt Hodsden • @kitt • http://ki.tt/do2015 npm install grunt-contrib-uglify --save-dev 97 Minimize javascript files
98. Kitt Hodsden • @kitt • http://ki.tt/do2015 Too many small images? 98 Making things easier with sprites!
99. Kitt Hodsden • @kitt • http://ki.tt/do2015 npm install grunt-montage --save-dev 99 Making things easier with sprites!
100. Kitt Hodsden • @kitt • http://ki.tt/do2015 100 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
101. Kitt Hodsden • @kitt • http://ki.tt/do2015 npm install grunt-contrib-imagemin --save-dev 101 Make pages load faster by reducing image sizes
102. Kitt Hodsden • @kitt • http://ki.tt/do2015 102 imagemin: { prod: { files: [{ expand: true, cwd: 'imgs-src/', src: ['**/*.{png,jpg,gif}'], dest: 'imgs/' }] } }
103. Kitt Hodsden • @kitt • http://ki.tt/do2015 npm install grunt-svgmin --save-dev 103 Reduce SVG sizes, too
104. Kitt Hodsden • @kitt • http://ki.tt/do2015 104 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
105. Kitt Hodsden • @kitt • http://ki.tt/do2015 105
106. Kitt Hodsden • @kitt • http://ki.tt/do2015 npm install grunt-responsive-images --save-dev 106 Responsive images by resizing https://github.com/andismith/grunt-responsive-images
107. Kitt Hodsden • @kitt • http://ki.tt/do2015 107 grunt.initConfig({ responsive_images: { myTask: { options: { sizes: [{ width: 320, height: 240 },{ name: 'large', width: 640 },{ name: "large", width: 1024, suffix: "_x2", quality: 60 }] }, files: [{ expand: true, src: ['assets/**.{jpg,gif,png}'], cwd: 'test/', dest: 'resize/{%= width %}/' }] } }, }); Sample grunt-responsive-images configuration
108. Kitt Hodsden • @kitt • http://ki.tt/do2015 npm install grunt-grunticon --save-dev 108 SVG with PNG fallbacks https://github.com/filamentgroup/grunticon
109. Kitt Hodsden • @kitt • http://ki.tt/do2015 Wait… again… 109
110. Kitt Hodsden • @kitt • http://ki.tt/do2015 Dependent on my network? 110
111. Kitt Hodsden • @kitt • http://ki.tt/do2015 Yep. 111
112. Kitt Hodsden • @kitt • http://ki.tt/do2015 How about not? 112
113. Kitt Hodsden • @kitt • http://ki.tt/do2015 113
114. Kitt Hodsden • @kitt • http://ki.tt/do2015 114
115. Kitt Hodsden • @kitt • http://ki.tt/do2015 115 http://www.webpagetest.org/getkey.php Request an API key.
116. Kitt Hodsden • @kitt • http://ki.tt/do2015 116
117. Kitt Hodsden • @kitt • http://ki.tt/do2015 117 http://www.webpagetest.org/getkey.php Limits of public use 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
118. Kitt Hodsden • @kitt • http://ki.tt/do2015 118 Need more?
119. Kitt Hodsden • @kitt • http://ki.tt/do2015 119 https://sites.google.com/a/webpagetest.org/docs/private-instances Set up your own WebPageTest server.
120. Kitt Hodsden • @kitt • http://ki.tt/do2015 npm install grunt-perfbudget --save-dev 120 https://github.com/tkadlec/grunt-perfbudget
121. Kitt Hodsden • @kitt • http://ki.tt/do2015 121 perfbudget: { default: { options: { url: ‘http://example.io/', key: 'PUT_YOUR_API_KEY_HERE' } } } … grunt.registerTask('budg', ['perfbudget']);
122. Kitt Hodsden • @kitt • http://ki.tt/do2015 122 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 } } }
123. Kitt Hodsden • @kitt • http://ki.tt/do2015 123 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 } } }
124. Kitt Hodsden • @kitt • http://ki.tt/do2015 124 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 } } }
125. Kitt Hodsden • @kitt • http://ki.tt/do2015 125
126. Kitt Hodsden • @kitt • http://ki.tt/do2015 126 perfbudget: { default: { options: { url: 'http://fromthemiddle.io/', … connectivity: '3G', timeout: 240, budget: { render: '3000', SpeedIndex: '7500', visualComplete: '6000' } } } }
127. Kitt Hodsden • @kitt • http://ki.tt/do2015 127
128. Kitt Hodsden • @kitt • http://ki.tt/do2015 128
129. Kitt Hodsden • @kitt • http://ki.tt/do2015 Now what? 129
130. Kitt Hodsden • @kitt • http://ki.tt/do2015 Integrate into CI builds 130
131. Kitt Hodsden • @kitt • http://ki.tt/do2015 131
132. Kitt Hodsden • @kitt • http://ki.tt/do2015 Tracking over time 132
133. Kitt Hodsden • @kitt • http://ki.tt/do2015 Tracking over time 133 http://www.wptmonitor.org/home
134. Kitt Hodsden • @kitt • http://ki.tt/do2015 npm install grunt-wpt --save-dev 134 https://github.com/sideroad/grunt-wpt https://github.com/sideroad/grunt-wpt-page
135. Kitt Hodsden • @kitt • http://ki.tt/do2015 135 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']);
136. Kitt Hodsden • @kitt • http://ki.tt/do2015 136
137. Kitt Hodsden • @kitt • http://ki.tt/do2015 137 https://github.com/trulia/webpagetest-charts-ui https://github.com/trulia/webpagetest-charts-api
138. Kitt Hodsden • @kitt • http://ki.tt/do2015 npm install grunt-shell --save-dev 138 Installing the grunt shell package to get to everything else
139. Kitt Hodsden • @kitt • http://ki.tt/do2015 139 function log(err, stdout, stderr, cb) { console.log(stdout); cb(); } grunt.initConfig({ shell: { dirListing: { command: 'ls', options: { callback: log } } } });
140. Kitt Hodsden • @kitt • http://ki.tt/do2015 140 Oh boy!
141. Kitt Hodsden • @kitt • http://ki.tt/do2015 141 https://github.com/nature/webpagetest-mapper webpagetest-mapper
142. Kitt Hodsden • @kitt • http://ki.tt/do2015 142 https://github.com/marcelduran/webpagetest-api Dependent on webpagetest-api
143. Kitt Hodsden • @kitt • http://ki.tt/do2015 npm install webpagetest-api -g npm install webpagetest-mapper -g 143
144. Kitt Hodsden • @kitt • http://ki.tt/do2015 144 $ cat tests.json [ { "name": "From the Middle", "url": "http://fromthemiddle.io/", "type": "home" }, { "name": "Kitt Hodsden", "url": "https://kitt.hodsden.org/", "type": "away" } ]
145. Kitt Hodsden • @kitt • http://ki.tt/do2015 145
146. Kitt Hodsden • @kitt • http://ki.tt/do2015 146
147. Kitt Hodsden • @kitt • http://ki.tt/do2015 147 https://github.com/trulia/webpagetest-charts-ui https://github.com/trulia/webpagetest-charts-api
148. Kitt Hodsden • @kitt • http://ki.tt/do2015 148 Recall what we’re doing… Make a change Measure effects
149. Kitt Hodsden • @kitt • http://ki.tt/do2015 Worth looking at: https://github.com/andyshora/grunt-yslow https://github.com/jrcryer/grunt-pagespeed https://github.com/addyosmani/psi/ http://www.sitespeed.io/ http://perf-tooling.today/tools 149
150. Kitt Hodsden • @kitt • http://ki.tt/do2015 Questions? 150
151. Kitt Hodsden • @kitt • http://ki.tt/do2015 151 Wait a second…
152. Kitt Hodsden • @kitt • http://ki.tt/do2015 152
153. Kitt Hodsden • @kitt • http://ki.tt/do2015 153
154. Kitt Hodsden • @kitt • http://ki.tt/do2015 154 https://sites.google.com/a/webpagetest.org/docs/private-instances Set up your own WebPageTest server.
155. Kitt Hodsden • @kitt • http://ki.tt/do2015 155 https://aws.amazon.com/ Login In to Amazon AWS
156. Kitt Hodsden • @kitt • http://ki.tt/do2015 156 Click on EC2
157. Kitt Hodsden • @kitt • http://ki.tt/do2015 157 Click on Launch Instance
158. Kitt Hodsden • @kitt • http://ki.tt/do2015 158 Click on Community AMIs
159. Kitt Hodsden • @kitt • http://ki.tt/do2015 159
160. Kitt Hodsden • @kitt • http://ki.tt/do2015 160
161. Kitt Hodsden • @kitt • http://ki.tt/do2015 161
162. Kitt Hodsden • @kitt • http://ki.tt/do2015 162
163. Kitt Hodsden • @kitt • http://ki.tt/do2015 163
164. Kitt Hodsden • @kitt • http://ki.tt/do2015 164
165. Kitt Hodsden • @kitt • http://ki.tt/do2015 165
166. Kitt Hodsden • @kitt • http://ki.tt/do2015 166
167. Kitt Hodsden • @kitt • http://ki.tt/do2015 167
168. Kitt Hodsden • @kitt • http://ki.tt/do2015 168
169. Kitt Hodsden • @kitt • http://ki.tt/do2015 169
170. Kitt Hodsden • @kitt • http://ki.tt/do2015 170
171. Kitt Hodsden • @kitt • http://ki.tt/do2015 171
172. Kitt Hodsden • @kitt • http://ki.tt/do2015 172
173. Kitt Hodsden • @kitt • http://ki.tt/do2015 173
174. Kitt Hodsden • @kitt • http://ki.tt/do2015 174
175. Kitt Hodsden • @kitt • http://ki.tt/do2015 175
176. Kitt Hodsden • @kitt • http://ki.tt/do2015 176
177. Kitt Hodsden • @kitt • http://ki.tt/do2015 177
178. Kitt Hodsden • @kitt • http://ki.tt/do2015 178
179. Kitt Hodsden • @kitt • http://ki.tt/do2015 179
180. Kitt Hodsden • @kitt • http://ki.tt/do2015 180 $ ssh -i downloaded.pem ubuntu@ec2
181. Kitt Hodsden • @kitt • http://ki.tt/do2015 181 $ ssh -i downloaded.pem ubuntu@ec2
182. Kitt Hodsden • @kitt • http://ki.tt/do2015 182 $ vi ~/.ssh/authorized_keys dd # delete the first line [esc] # trigger the vi command sequence :wq # save the file and quit
183. Kitt Hodsden • @kitt • http://ki.tt/do2015 183 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 #
184. Kitt Hodsden • @kitt • http://ki.tt/do2015 184 sudo vi /var/www/webpage/test/www/settings/keys.ini [server] secret=addarandomstringhere key=addakeyhere [addakeyhere] description=Web UI ;contact=me@me.com limit=0 [thisisyourapikey] description=API Key ;contact=me@me.com limit=0
185. Kitt Hodsden • @kitt • http://ki.tt/do2015 185 $ 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
186. Kitt Hodsden • @kitt • http://ki.tt/do2015 186 $ sudo service nginx restart
187. Kitt Hodsden • @kitt • http://ki.tt/do2015 187 Set up testing instances
188. Kitt Hodsden • @kitt • http://ki.tt/do2015 188 EC2 server key in settings.ini (more complicated to set up, better automation management)
189. Kitt Hodsden • @kitt • http://ki.tt/do2015 189 OR
190. Kitt Hodsden • @kitt • http://ki.tt/do2015 190 Manual Setup
191. Kitt Hodsden • @kitt • http://ki.tt/do2015 191 Click on Launch Instance
192. Kitt Hodsden • @kitt • http://ki.tt/do2015 192 https://sites.google.com/a/webpagetest.org/docs/private-instances
193. Kitt Hodsden • @kitt • http://ki.tt/do2015 193 wpt_server=ec2.us-west-2.amazonaws.com wpt_key=YOURKEY wpt_location=us-west-2
194. Kitt Hodsden • @kitt • http://ki.tt/do2015 194 Wait a few minutes…
195. Kitt Hodsden • @kitt • http://ki.tt/do2015 195 … maybe a few more.
196. Kitt Hodsden • @kitt • http://ki.tt/do2015 196
197. Kitt Hodsden • @kitt • http://ki.tt/do2015 197
198. Kitt Hodsden • @kitt • http://ki.tt/do2015 198
199. Kitt Hodsden • @kitt • http://ki.tt/do2015 Thanks! Kitt Hodsden http://ki.tt/ @kitt slides here