E4E Automating Your Site's Front-end Performance

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 2 Me.

Slide 3

Slide 3 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 3 You.

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 5 Performance is everybody’s problem.

Slide 6

Slide 6 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 6 “What does FAST even mean?”

Slide 7

Slide 7 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 7 Determine key metrics

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 12 Determine key metrics

Slide 13

Slide 13 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 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/e4e2015 14 https://blog.kissmetrics.com/loading-time/ Not quite

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 23 How fast is our site?

Slide 24

Slide 24 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 33 https://developer.chrome.com/devtools/docs/network

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 https://lafikl.github.io/perfBar/ 36

Slide 37

Slide 37 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 37

Slide 38

Slide 38 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 38 https://lafikl.github.io/perfBar/

Slide 39

Slide 39 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 But… but… 39

Slide 40

Slide 40 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 My network! 40

Slide 41

Slide 41 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 My browsers! 41

Slide 42

Slide 42 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 42 https://speakerdeck.com/lara/designing-for-performance?slide=69

Slide 43

Slide 43 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Automation! 43

Slide 44

Slide 44 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 44

Slide 45

Slide 45 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 45 http://nodejs.org/

Slide 46

Slide 46 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm 46 Node Package Manager for installing node packages

Slide 47

Slide 47 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 47

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 49 package.json Gruntfile.js The two files grunt uses

Slide 50

Slide 50 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm init 50

Slide 51

Slide 51 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 51 $ 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 52

Slide 52 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 52 $ 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 53

Slide 53 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 53 { "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 54

Slide 54 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Just download them. https://github.com/search?q=Gruntfile.js https://github.com/kitt/grunt-perf-template 54

Slide 55

Slide 55 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 55 { "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 56

Slide 56 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 56 { "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 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 59 $ ls Gemfile README.txt fonts node_modules tpl Gemfile.lock config.rb img package.json widgets Gruntfile.js css js scss

Slide 60

Slide 60 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 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 60 Total sidebar on checking dependencies into the repo or not

Slide 61

Slide 61 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 61 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 62

Slide 62 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 62 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 63

Slide 63 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 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']); }; A basic Gruntfile.js file

Slide 64

Slide 64 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 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/e4e2015 65 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 66

Slide 66 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 66 $ npm install matchdep --save-dev

Slide 67

Slide 67 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 67 $ npm install matchdep --save-dev

Slide 68

Slide 68 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 68 ... // 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']);

Slide 69

Slide 69 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 69 https://www.flickr.com/photos/dandechiaro/4151566643

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 71 https://github.com/macbre/phantomas

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 73

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 75

Slide 76

Slide 76 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 76

Slide 77

Slide 77 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 77

Slide 78

Slide 78 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 78

Slide 79

Slide 79 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 79

Slide 80

Slide 80 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 80

Slide 81

Slide 81 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 81 https://www.flickr.com/photos/ndrwfgg/8072089187

Slide 82

Slide 82 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 82 http://www.devobjective.com/

Slide 83

Slide 83 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 83 http://www.devobjective.com/

Slide 84

Slide 84 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Remove HTML Comments 84 https://github.com/gruntjs/grunt-contrib-htmlmin

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 86 … 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 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Concatenate and Minify CSS files 89

Slide 90

Slide 90 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-contrib-cssmin --save-dev 90 Minimize CSS files

Slide 91

Slide 91 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Remove duplicate CSS? 91

Slide 92

Slide 92 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-csscss --save-dev 92 Report duplicate CSS in files

Slide 93

Slide 93 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Remove unused CSS? 93

Slide 94

Slide 94 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-uncss --save-dev 94 Remove unused CSS

Slide 95

Slide 95 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-phantomcss —save-dev https://github.com/chrisgladd/grunt-phantomcss https://github.com/Huddle/PhantomCSS 95 Make sure you haven’t removed things you need

Slide 96

Slide 96 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 96 Make sure you haven’t removed things you need

Slide 97

Slide 97 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 97 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 98

Slide 98 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 98 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 99

Slide 99 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 99 grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats casper.start(‘https://kitt.hodsden.org/') .then(function() { phantomcss.screenshot('#region-branding', 'region-branding'); }) .then(function now_check_the_screenshots() { phantomCSS.compareAll(); });

Slide 100

Slide 100 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-cssstats --save-dev 100 https://github.com/cssstats/grunt-cssstats Look at the site’s CSS statistics

Slide 101

Slide 101 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 101 https://github.com/cssstats/cssstats

Slide 102

Slide 102 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 102

Slide 103

Slide 103 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 103

Slide 104

Slide 104 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 104

Slide 105

Slide 105 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 105

Slide 106

Slide 106 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 106

Slide 107

Slide 107 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 107 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 108

Slide 108 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 108 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 109

Slide 109 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 109 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 110

Slide 110 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 https://github.com/cssstats/cssstats 110

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-contrib-uglify --save-dev 112 Minimize javascript ﬁles

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Too many small images? 115 Making things easier with sprites!

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 117 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 118

Slide 118 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-contrib-imagemin --save-dev 118 Make pages load faster by reducing image sizes

Slide 119

Slide 119 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 119 imagemin: { prod: { files: [{ expand: true, cwd: 'imgs-src/', src: ['**/*.{png,jpg,gif}'], dest: 'imgs/' }] } }

Slide 120

Slide 120 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-svgmin --save-dev 120 Reduce SVG sizes, too

Slide 121

Slide 121 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 121 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 122

Slide 122 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 122

Slide 123

Slide 123 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-responsive-images --save-dev 123 Responsive images by resizing https://github.com/andismith/grunt-responsive-images

Slide 124

Slide 124 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 124 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

Slide 125

Slide 125 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-grunticon --save-dev 125 SVG with PNG fallbacks https://github.com/ﬁlamentgroup/grunticon

Slide 126

Slide 126 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 ? 126

Slide 127

Slide 127 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 webfonts! 127

Slide 128

Slide 128 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Him: “Hey, I have two megs of webfonts…” Me: “…” Him: “Is this okay?” 128

Slide 129

Slide 129 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 No. 129

Slide 130

Slide 130 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-ziti —save-dev https://github.com/caiguanhao/grunt-ziti 130 Reduce font file sizes

Slide 131

Slide 131 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 131 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 132

Slide 132 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Wait… again… 132

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Yep. 134

Slide 135

Slide 135 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 How about not? 135

Slide 136

Slide 136 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 136

Slide 137

Slide 137 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 137

Slide 138

Slide 138 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 138 http://www.webpagetest.org/getkey.php Request an API key.

Slide 139

Slide 139 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 139

Slide 140

Slide 140 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 140 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

Slide 141

Slide 141 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 141 Need more?

Slide 142

Slide 142 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 142 https://sites.google.com/a/webpagetest.org/docs/private-instances Set up your own WebPageTest server.

Slide 143

Slide 143 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-perfbudget --save-dev 143 https://github.com/tkadlec/grunt-perfbudget

Slide 144

Slide 144 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 144 perfbudget: { default: { options: { url: ‘http://example.io/', key: 'PUT_YOUR_API_KEY_HERE' } } } … grunt.registerTask('budg', ['perfbudget']);

Slide 145

Slide 145 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 145 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 146

Slide 146 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 146 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 147

Slide 147 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 147 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 148

Slide 148 text

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

Slide 149

Slide 149 text

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

Slide 150

Slide 150 text

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

Slide 151

Slide 151 text

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

Slide 152

Slide 152 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Now what? 152

Slide 153

Slide 153 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Integrate into CI builds 153

Slide 154

Slide 154 text

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

Slide 155

Slide 155 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Tracking over time 155

Slide 156

Slide 156 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Tracking over time 156 http://www.wptmonitor.org/home

Slide 157

Slide 157 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-wpt --save-dev 157 https://github.com/sideroad/grunt-wpt https://github.com/sideroad/grunt-wpt-page

Slide 158

Slide 158 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 158 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 159

Slide 159 text

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

Slide 160

Slide 160 text

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

Slide 161

Slide 161 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-shell --save-dev 161 Installing the grunt shell package to get to everything else

Slide 162

Slide 162 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 162 function log(err, stdout, stderr, cb) { console.log(stdout); cb(); } grunt.initConfig({ shell: { dirListing: { command: 'ls', options: { callback: log } } } });

Slide 163

Slide 163 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 163 Oh boy!

Slide 164

Slide 164 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 164 https://github.com/nature/webpagetest-mapper webpagetest-mapper

Slide 165

Slide 165 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 165 https://github.com/marcelduran/webpagetest-api Dependent on webpagetest-api

Slide 166

Slide 166 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install webpagetest-api -g npm install webpagetest-mapper -g 166

Slide 167

Slide 167 text

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

Slide 168

Slide 168 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 168

Slide 169

Slide 169 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 169

Slide 170

Slide 170 text

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

Slide 171

Slide 171 text

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

Slide 172

Slide 172 text

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

Slide 173

Slide 173 text

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

Slide 174

Slide 174 text

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

Slide 175

Slide 175 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 175 sitespeed.io

Slide 176

Slide 176 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 176 http://run.sitespeed.io/

Slide 177

Slide 177 text

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

Slide 178

Slide 178 text

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

Slide 179

Slide 179 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 179

Slide 180

Slide 180 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 180

Slide 181

Slide 181 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 181

Slide 182

Slide 182 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 182

Slide 183

Slide 183 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 183 Automation!

Slide 184

Slide 184 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 184 https://speakerdeck.com/soulislove/monitoring- web-performance-using-open-source-tools-san- francisco-and-silicon-valley-web-performance-group Peter Hedenskog / @soulislove

Slide 185

Slide 185 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 185 https://speakerdeck.com/soulislove/monitoring- web-performance-using-open-source-tools-san- francisco-and-silicon-valley-web-performance-group snk.ms/sswpt

Slide 186

Slide 186 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 186 https://docs.docker.com/installation/

Slide 187

Slide 187 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 187 Start docker (osx)

Slide 188

Slide 188 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 188 https://www.sitespeed.io/documentation/performance-dashboard/ docker pull sitespeedio/graphite docker pull grafana/grafana docker pull sitespeedio/sitespeed.io

Slide 189

Slide 189 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 189 start graphite

Slide 190

Slide 190 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 190 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 191

Slide 191 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 191 start grafana

Slide 192

Slide 192 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 192 $ 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 193

Slide 193 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 193

Slide 194

Slide 194 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 194 $ 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 195

Slide 195 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 195 seed a single metric run

Slide 196

Slide 196 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 196 # 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 197

Slide 197 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 197 $ 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 198

Slide 198 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 198 $ 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 199

Slide 199 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 199 $ 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 200

Slide 200 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 200

Slide 201

Slide 201 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 201

Slide 202

Slide 202 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 202

Slide 203

Slide 203 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 203

Slide 204

Slide 204 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 204

Slide 205

Slide 205 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 205

Slide 206

Slide 206 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 206

Slide 207

Slide 207 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 207

Slide 208

Slide 208 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 208

Slide 209

Slide 209 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 209

Slide 210

Slide 210 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 210

Slide 211

Slide 211 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 211

Slide 212

Slide 212 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 212

Slide 213

Slide 213 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 213 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 214

Slide 214 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Phew! 214

Slide 215

Slide 215 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 http://tiny.run:3000/ myuser / MY_SUPER_STRONG_PASSWORD hi / hihihi 215

Slide 216

Slide 216 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 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 216

Slide 217

Slide 217 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 217

Slide 218

Slide 218 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Questions? 218

Slide 219

Slide 219 text

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

Slide 220

Slide 220 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 220 Wait a second…

Slide 221

Slide 221 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 221

Slide 222

Slide 222 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 222

Slide 223

Slide 223 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 223 https://sites.google.com/a/webpagetest.org/docs/private-instances Set up your own WebPageTest server.

Slide 224

Slide 224 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 224 https://aws.amazon.com/ Login In to Amazon AWS

Slide 225

Slide 225 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 225 Click on EC2

Slide 226

Slide 226 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 226 Click on Launch Instance

Slide 227

Slide 227 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 227 Click on Community AMIs

Slide 228

Slide 228 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 228

Slide 229

Slide 229 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 229

Slide 230

Slide 230 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 230

Slide 231

Slide 231 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 231

Slide 232

Slide 232 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 232

Slide 233

Slide 233 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 233

Slide 234

Slide 234 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 234

Slide 235

Slide 235 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 235

Slide 236

Slide 236 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 236

Slide 237

Slide 237 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 237

Slide 238

Slide 238 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 238

Slide 239

Slide 239 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 239

Slide 240

Slide 240 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 240

Slide 241

Slide 241 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 241

Slide 242

Slide 242 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 242

Slide 243

Slide 243 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 243

Slide 244

Slide 244 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 244

Slide 245

Slide 245 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 245

Slide 246

Slide 246 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 246

Slide 247

Slide 247 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 247

Slide 248

Slide 248 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 248

Slide 249

Slide 249 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 249 $ ssh -i downloaded.pem ubuntu@ec2

Slide 250

Slide 250 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 250 $ ssh -i downloaded.pem ubuntu@ec2

Slide 251

Slide 251 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 251 $ vi ~/.ssh/authorized_keys dd # delete the first line [esc] # trigger the vi command sequence :wq # save the file and quit

Slide 252

Slide 252 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 252 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 253

Slide 253 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 253 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 254

Slide 254 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 254 $ 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 255

Slide 255 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 255 $ sudo service nginx restart

Slide 256

Slide 256 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 256 Set up testing instances

Slide 257

Slide 257 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 257 EC2 server key in settings.ini (more complicated to set up, better automation management)

Slide 258

Slide 258 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 258 OR

Slide 259

Slide 259 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 259 Manual Setup

Slide 260

Slide 260 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 260 Click on Launch Instance

Slide 261

Slide 261 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 261 https://sites.google.com/a/webpagetest.org/docs/private-instances

Slide 262

Slide 262 text

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

Slide 263

Slide 263 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 263 Wait a few minutes…

Slide 264

Slide 264 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 264 … maybe a few more.

Slide 265

Slide 265 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 265

Slide 266

Slide 266 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 266

Slide 267

Slide 267 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 267

Slide 268

Slide 268 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Questions? 268

Slide 269

Slide 269 text

Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Thanks! Kitt Hodsden http://ki.tt/ @kitt slides here