Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fluent 2015 Automate Front-end Performance

Fluent 2015 Automate Front-end Performance

3f2f0c0fbc7be587727cdfff33c8be43?s=128

Kitt Hodsden

April 21, 2015
Tweet

Transcript

  1. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 Automate Your Site's Front-End

    Performance Kitt Hodsden / @kitt slides here
  2. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 2 You.

  3. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 3 Me.

  4. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 4

  5. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 5 Performance is everyone’s

    problem.
  6. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 6 “What does FAST

    even mean?”
  7. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 7 Determine key metrics

  8. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 8 Determine key metrics

    Establish a baseline
  9. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 9 Determine key metrics

    Establish a baseline Make a change
  10. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 10 Determine key metrics

    Establish a baseline Make a change Measure effects
  11. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 11 Determine key metrics

    Establish a baseline Make a change Measure effects
  12. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 12 Determine key metrics

  13. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 13 40% will abandon

    a website that takes more than 3 seconds to load.
  14. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 14 https://blog.kissmetrics.com/loading-time/ Not quite

  15. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 15 https://blog.kissmetrics.com/loading-time/ Not quite

  16. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 16 Performance Budget

  17. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 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/fluent2015 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/fluent2015 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/fluent2015 20 https://speakerdeck.com/lara/designing-for-performance?slide=69

  21. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 21 Determine key metrics

  22. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 22 Establish a baseline

  23. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 23 How fast is

    our site?
  24. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 24 https://www.flickr.com/photos/28277470@N05/8613726003

  25. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 25 No.

  26. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 26 The simplest way?

  27. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 27 Your browser

  28. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 28 Firefox

  29. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 29 Safari

  30. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 30 IE

  31. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 31 Chrome

  32. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 32 Chrome

  33. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 33 https://developer.chrome.com/devtools/docs/network#resource-network-timing

  34. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 34

  35. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 35

  36. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 But… but… 36

  37. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 My network! 37

  38. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 My browsers! 38

  39. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 Automation! 39

  40. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 40

  41. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 41 http://nodejs.org/

  42. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 npm 42 Node Package

    Manager for installing node packages
  43. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 43

  44. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 npm install -g grunt-cli

    44
  45. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 45 package.json Gruntfile.js The

    two files grunt uses
  46. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 Just download them. https://github.com/search?q=Gruntfile.js

    https://github.com/kitt/grunt-perf-template 46
  47. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 47 { "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
  48. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 48 { "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
  49. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 49 $ npm install

    With a package.json file, you can install the needed packages easily.
  50. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 50 $ npm install

    No -g here! With a package.json file, you can install the needed packages easily.
  51. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 51 $ ls Gemfile

    README.txt fonts node_modules tpl Gemfile.lock config.rb img package.json widgets Gruntfile.js css js scss
  52. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 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 52 Total sidebar on checking dependencies into the repo or not
  53. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 53 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']); };
  54. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 54 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
  55. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 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']); }; A basic Gruntfile.js file
  56. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 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/fluent2015 57 $ npm install

    matchdep --save-dev
  58. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 58 ... // 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']);
  59. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 59

  60. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 npm install grunt-devperf --save-dev

    60
  61. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 61 https://github.com/macbre/phantomas

  62. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 62 devperf: { options:

    { urls: [ 'http://localhost:8000' ] } } … grunt.registerTask('pe', ['devperf']);
  63. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 63

  64. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 64 … devperf: {

    options: { urls: [ 'http://fromthemiddle.io/' ], numberOfRuns: 5, openResults: true, resultsFolder: './devperf', phantomasOptions: { 'film-strip': true } } } … grunt.registerTask('pe', ['devperf']);
  65. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 65

  66. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 66

  67. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 67

  68. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 68

  69. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 69

  70. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 70

  71. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 71 http://fluentconf.com/javascript-html-2015/public/schedule/grid/public

  72. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 Remove HTML Comments? 72

    https://github.com/gruntjs/grunt-contrib-htmlmin
  73. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 npm install grunt-contrib-htmlmin —save-dev

    73 https://github.com/gruntjs/grunt-contrib-htmlmin
  74. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 74 … 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']);
  75. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 Concatenate and Minify CSS

    files? 75
  76. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 npm install grunt-contrib-cssmin --save-dev

    76 Minimize CSS files
  77. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 Remove duplicate CSS? 77

  78. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 npm install grunt-csscss --save-dev

    78 Report duplicate CSS in files
  79. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 Remove unused CSS? 79

  80. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 npm install grunt-uncss --save-dev

    80 Remove unused CSS
  81. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 npm install grunt-cssstats --save-dev

    81 https://github.com/cssstats/grunt-cssstats Look at the site’s CSS statistics
  82. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 82 https://github.com/cssstats/cssstats

  83. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 83

  84. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 84

  85. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 85

  86. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 86

  87. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 87

  88. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 88 grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats

    cssstats: { dev: { options: {}, files: { 'stats/css-stats.json': ['css/example.css'] }, } } … grunt.registerTask('stats', ['cssstats']);
  89. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 89 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'] } } }
  90. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 90 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'] } } }
  91. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 https://github.com/cssstats/cssstats 91

  92. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 Aggregate and Minify JavaScript?

    92
  93. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 npm install grunt-contrib-uglify --save-dev

    93 Minimize javascript files
  94. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 Too many small images?

    94 Making things easier with sprites!
  95. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 npm install grunt-montage --save-dev

    95 Making things easier with sprites!
  96. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 96 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
  97. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 npm install grunt-contrib-imagemin --save-dev

    97 Make pages load faster by reducing image sizes
  98. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 98 imagemin: { prod:

    { files: [{ expand: true, cwd: 'imgs-src/', src: ['**/*.{png,jpg,gif}'], dest: 'imgs/' }] } }
  99. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 npm install grunt-svgmin --save-dev

    99 Reduce SVG sizes, too
  100. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 100 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
  101. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 101

  102. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 npm install grunt-responsive-images --save-dev

    102 Responsive images by resizing https://github.com/andismith/grunt-responsive-images
  103. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 103 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
  104. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 npm install grunt-grunticon --save-dev

    104 SVG with PNG fallbacks https://github.com/filamentgroup/grunticon
  105. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 Wait… again… 105

  106. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 Dependent on my network?

    106
  107. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 Yep. 107

  108. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 How about not? 108

  109. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 109

  110. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 110

  111. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 111 http://www.webpagetest.org/getkey.php Request an

    API key.
  112. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 112

  113. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 113 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
  114. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 114 Need more?

  115. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 115 https://sites.google.com/a/webpagetest.org/docs/private-instances Set up

    your own WebPageTest server.
  116. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 npm install grunt-perfbudget --save-dev

    116 https://github.com/tkadlec/grunt-perfbudget
  117. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 117 perfbudget: { default:

    { options: { url: ‘http://example.io/', key: 'PUT_YOUR_API_KEY_HERE' } } } … grunt.registerTask('budg', ['perfbudget']);
  118. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 118 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 } } }
  119. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 119 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 } } }
  120. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 120 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 } } }
  121. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 121

  122. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 122 perfbudget: { default:

    { options: { url: 'http://fromthemiddle.io/', … connectivity: '3G', timeout: 240, budget: { render: '3000', SpeedIndex: '7500', visualComplete: '6000' } } } }
  123. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 123

  124. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 124

  125. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 Now what? 125

  126. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 Integrate into CI builds

    126
  127. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 127

  128. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 Tracking over time 128

  129. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 Tracking over time 129

    http://www.wptmonitor.org/home
  130. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 npm install grunt-wpt --save-dev

    130 https://github.com/sideroad/grunt-wpt https://github.com/sideroad/grunt-wpt-page
  131. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 131 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']);
  132. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 132

  133. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 133 https://github.com/trulia/webpagetest-charts-ui https://github.com/trulia/webpagetest-charts-api

  134. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 npm install grunt-shell --save-dev

    134 Installing the grunt shell package to get to everything else
  135. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 135 function log(err, stdout,

    stderr, cb) { console.log(stdout); cb(); } grunt.initConfig({ shell: { dirListing: { command: 'ls', options: { callback: log } } } });
  136. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 136 Make a change

    Measure effects
  137. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 Worth looking at: https://github.com/andyshora/grunt-yslow

    https://github.com/jrcryer/grunt-pagespeed https://github.com/addyosmani/psi/ http://www.sitespeed.io/ 137
  138. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 Questions? 138

  139. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 139 Wait a second…

  140. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 140

  141. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 141 https://sites.google.com/a/webpagetest.org/docs/private-instances Set up

    your own WebPageTest server.
  142. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 142

  143. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 143

  144. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 144

  145. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 145

  146. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 146

  147. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 147

  148. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 148

  149. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 149

  150. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 150

  151. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 151

  152. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 152

  153. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 153

  154. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 154

  155. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 155

  156. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 156

  157. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 157

  158. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 158

  159. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 159

  160. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 160

  161. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 161

  162. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 162

  163. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 163

  164. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 164

  165. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 165 $ ssh -i

    downloaded.pem ubuntu@ec2
  166. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 166 $ vi ~/.ssh/authorized_keys

  167. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 167 sudo vi /var/www/webpage/test/www/settings/settings.ini

    # update host with ec2 hostname # add ec2_key value (optional) # add ec2_secret value (optional) # uncomment EC2.us-west-2.securityGroup line # uncomment EC2.us-west-2.subnetId line #
  168. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 168 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
  169. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 169 $ cd /var/www/webpage/test/www/settings/

    $ sudo cp locations.ini.EC2-sample locations.ini
  170. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 170 $ sudo service

    nginx restart
  171. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 171 Set up testing

    instances
  172. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 172 EC2 server key

    in settings.ini
  173. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 173 OR

  174. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 174

  175. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 175 wpt_server=ec2.us-west-2.amazonaws.com wpt_key=YOURKEY wpt_location=us-west-2

  176. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 176 Wait.

  177. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 177

  178. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 178

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

    @kitt 179