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

E4E Automating Your Site's Front-end Performance

Kitt Hodsden
September 18, 2015

E4E Automating Your Site's Front-end Performance

Presentation at Engineers 4 Engineers on automating front-end performance.

Kitt Hodsden

September 18, 2015
Tweet

More Decks by Kitt Hodsden

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  13. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 13
    40% will abandon a
    website that takes more
    than 3 seconds to load.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. 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/

    View Slide

  18. 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/

    View Slide

  19. 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/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    37

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  51. 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:
    ...

    View Slide

  52. 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:
    ...

    View Slide

  53. 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

    View Slide

  54. 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

    View Slide

  55. 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

    View Slide

  56. 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

    View Slide

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

    View Slide

  58. 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.

    View Slide

  59. 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

    View Slide

  60. 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

    View Slide

  61. 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']);
    };

    View Slide

  62. 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

    View Slide

  63. 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

    View Slide

  64. 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

    View Slide

  65. 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');

    View Slide

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

    View Slide

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

    View Slide

  68. 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']);

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  72. Kitt Hodsden • @kitt • http://ki.tt/e4e2015
    72
    devperf: {
    options: {
    urls: [
    'http://localhost:8000'
    ]
    }
    }

    grunt.registerTask('pe', ['devperf']);

    View Slide

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

    View Slide

  74. 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']);

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  86. 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']);

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  95. 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

    View Slide

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

    View Slide

  97. 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'
    ]
    }
    }

    View Slide

  98. 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'
    ]
    }
    }

    View Slide

  99. 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();
    });

    View Slide

  100. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  107. 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']);

    View Slide

  108. 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']
    }
    }
    }

    View Slide

  109. 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']
    }
    }
    }

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  117. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  121. 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

    View Slide

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

    View Slide

  123. 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

    View Slide

  124. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  131. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  140. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  144. 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']);

    View Slide

  145. 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
    }
    }
    }

    View Slide

  146. 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
    }
    }
    }

    View Slide

  147. 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
    }
    }
    }

    View Slide

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

    View Slide

  149. 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'
    }
    }
    }
    }

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  157. 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

    View Slide

  158. 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']);

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  162. 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
    }
    }
    }
    });

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  167. 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"
    }
    ]

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  184. 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

    View Slide

  185. 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

    View Slide

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

    View Slide

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

    View Slide

  188. 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

    View Slide

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

    View Slide

  190. 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

    View Slide

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

    View Slide

  192. 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

    View Slide

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

    View Slide

  194. 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

    View Slide

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

    View Slide

  196. 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)

    View Slide

  197. 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

    View Slide

  198. 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

    View Slide

  199. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  213. 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

    View Slide

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

    View Slide

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

    View Slide

  216. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  249. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 249
    $ ssh -i downloaded.pem [email protected]

    View Slide

  250. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 250
    $ ssh -i downloaded.pem [email protected]

    View Slide

  251. 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

    View Slide

  252. 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
    #

    View Slide

  253. 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

    View Slide

  254. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide