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

Automation for Site Performance - Web Directions 2015

Automation for Site Performance - Web Directions 2015

Automating for site performance, presented at Web Directions South 2015 in Sydney, NSW, Australia on October 29th.

Kitt Hodsden

October 29, 2015
Tweet

More Decks by Kitt Hodsden

Other Decks in Technology

Transcript

  1. Kitt Hodsden • @kitt • http://ki.tt/wd15 1
    Automation for
    Site Performance
    Kitt Hodsden / @kitt
    slides here

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  16. Kitt Hodsden • @kitt • http://ki.tt/wd15 16
    Performance Budgets

    View Slide

  17. Kitt Hodsden • @kitt • http://ki.tt/wd15 17
    http://timkadlec.com/2013/01/setting-a-performance-budget/
    http://timkadlec.com/2014/11/performance-budget-metrics/
    http://danielmall.com/articles/how-to-make-a-performance-budget/

    View Slide

  18. Kitt Hodsden • @kitt • http://ki.tt/wd15 18
    http://timkadlec.com/2013/01/setting-a-performance-budget/
    http://timkadlec.com/2014/11/performance-budget-metrics/
    http://danielmall.com/articles/how-to-make-a-performance-budget/

    View Slide

  19. Kitt Hodsden • @kitt • http://ki.tt/wd15 19
    http://timkadlec.com/2013/01/setting-a-performance-budget/
    http://timkadlec.com/2014/11/performance-budget-metrics/
    http://danielmall.com/articles/how-to-make-a-performance-budget/

    View Slide

  20. Kitt Hodsden • @kitt • http://ki.tt/wd15 20

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  36. Kitt Hodsden • @kitt • http://ki.tt/wd15
    http://wpotools.github.io/perfBar/
    36

    View Slide

  37. Kitt Hodsden • @kitt • http://ki.tt/wd15
    https://raw.githubusercontent.com/WPOTools/perfBar/master/build/perfbar.js
    37

    View Slide

  38. Kitt Hodsden • @kitt • http://ki.tt/wd15

    perfBar.init({});
    38

    View Slide

  39. Kitt Hodsden • @kitt • http://ki.tt/wd15 39

    View Slide

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

    View Slide

  41. Kitt Hodsden • @kitt • http://ki.tt/wd15
    But… but…
    41

    View Slide

  42. Kitt Hodsden • @kitt • http://ki.tt/wd15
    My network!
    42

    View Slide

  43. Kitt Hodsden • @kitt • http://ki.tt/wd15
    My browsers!
    43

    View Slide

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

    View Slide

  45. Kitt Hodsden • @kitt • http://ki.tt/wd15
    Automation!
    45

    View Slide

  46. Kitt Hodsden • @kitt • http://ki.tt/wd15 46

    View Slide

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

    View Slide

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

    View Slide

  49. Kitt Hodsden • @kitt • http://ki.tt/wd15 49

    View Slide

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

    View Slide

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

    View Slide

  52. Kitt Hodsden • @kitt • http://ki.tt/wd15
    npm init
    52

    View Slide

  53. Kitt Hodsden • @kitt • http://ki.tt/wd15
    53
    $ npm init
    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sane defaults.
    See `npm help json` for definitive documentation on these fields
    and exactly what they do.
    Use `npm install --save` afterwards to install a package and
    save it as a dependency in the package.json file.
    Press ^C at any time to quit.
    name: (dev) performance
    version: (1.0.0)
    description: Automating front-end performance metrics and improvements
    entry point: (index.js)
    test command:
    git repository:
    keywords:
    author:
    license: (ISC)
    About to write to .../e4e/dev/package.json:
    ...

    View Slide

  54. Kitt Hodsden • @kitt • http://ki.tt/wd15
    54
    $ npm init
    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sane defaults.
    See `npm help json` for definitive documentation on these fields
    and exactly what they do.
    Use `npm install --save` afterwards to install a package and
    save it as a dependency in the package.json file.
    Press ^C at any time to quit.
    name: (dev) performance
    version: (1.0.0)
    description: Automating front-end performance metrics and improvements
    entry point: (index.js)
    test command:
    git repository:
    keywords:
    author:
    license: (ISC)
    About to write to .../e4e/dev/package.json:
    ...

    View Slide

  55. Kitt Hodsden • @kitt • http://ki.tt/wd15
    55
    {
    "name": "performance",
    "version": "1.0.0",
    "description": "Automating front-end performance”,
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
    }
    This is what a package.json file looks like

    View Slide

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

    View Slide

  57. Kitt Hodsden • @kitt • http://ki.tt/wd15
    57
    {
    "engines": {
    "node": ">= 4.1.0"
    },
    "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.11.3",
    "grunt-contrib-watch": "~0.6.1",
    }
    }
    This is what a package.json file looks like

    View Slide

  58. Kitt Hodsden • @kitt • http://ki.tt/wd15
    58
    {
    "engines": {
    "node": ">= 4.1.0"
    },
    "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.11.3",
    "grunt-contrib-watch": "~0.6.1",
    }
    }
    This is what a package.json file looks like

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  62. Kitt Hodsden • @kitt • http://ki.tt/wd15
    Check dependencies into the repo?
    http://addyosmani.com/blog/checking-in-front-end-dependencies/
    http://redotheweb.com/2013/09/12/should-you-commit-dependencies.html
    62
    Total sidebar on checking dependencies into the repo or not

    View Slide

  63. Kitt Hodsden • @kitt • http://ki.tt/wd15 63
    module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
    options: {
    banner: '/*! <%= pkg.name %> <%="yyyy-mm-dd") %> */\n'
    },
    build: {
    src: 'src/<%= pkg.name %>.js',
    dest: 'build/<%= pkg.name %>.min.js'
    }
    }
    });
    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // Default task(s).
    grunt.registerTask('default', ['uglify']);
    };

    View Slide

  64. Kitt Hodsden • @kitt • http://ki.tt/wd15
    64
    module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
    options: {
    banner: '/*! <%= pkg.name %> <%="yyyy-mm-dd") %> */\n'
    },
    build: {
    src: 'src/<%= pkg.name %>.js',
    dest: 'build/<%= pkg.name %>.min.js'
    }
    }
    });
    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // Default task(s).
    grunt.registerTask('default', ['uglify']);
    };
    A basic Gruntfile.js file

    View Slide

  65. Kitt Hodsden • @kitt • http://ki.tt/wd15
    65
    module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
    options: {
    banner: '/*! <%= pkg.name %> <%="yyyy-mm-dd") %> */\n'
    },
    build: {
    src: 'src/<%= pkg.name %>.js',
    dest: 'build/<%= pkg.name %>.min.js'
    }
    }
    });
    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // Default task(s).
    grunt.registerTask('default', ['uglify']);
    };
    A basic Gruntfile.js file

    View Slide

  66. Kitt Hodsden • @kitt • http://ki.tt/wd15
    66
    module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
    options: {
    banner: '/*! <%= pkg.name %> <%="yyyy-mm-dd") %> */\n'
    },
    build: {
    src: 'src/<%= pkg.name %>.js',
    dest: 'build/<%= pkg.name %>.min.js'
    }
    }
    });
    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // Default task(s).
    grunt.registerTask('default', ['uglify']);
    };
    A basic Gruntfile.js file

    View Slide

  67. Kitt Hodsden • @kitt • http://ki.tt/wd15
    67
    grunt.loadNpmTasks('grunt-aws-s3');
    grunt.loadNpmTasks('grunt-cafe-mocha');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-copy');

    View Slide

  68. Kitt Hodsden • @kitt • http://ki.tt/wd15
    68
    grunt.loadNpmTasks('grunt-aws-s3');
    grunt.loadNpmTasks('grunt-cafe-mocha');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-csslint');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-jade');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-imagemin');

    View Slide

  69. Kitt Hodsden • @kitt • http://ki.tt/wd15
    69
    grunt.loadNpmTasks('grunt-aws-s3');
    grunt.loadNpmTasks('grunt-cafe-mocha');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-csslint');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-jade');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-env');
    grunt.loadNpmTasks('grunt-favicons');
    grunt.loadNpmTasks('grunt-html-validation');
    grunt.loadNpmTasks('grunt-mkdir');

    View Slide

  70. Kitt Hodsden • @kitt • http://ki.tt/wd15
    70
    $ npm install load-grunt-tasks --save-dev

    View Slide

  71. Kitt Hodsden • @kitt • http://ki.tt/wd15
    71
    $ npm install load-grunt-tasks --save-dev

    View Slide

  72. Kitt Hodsden • @kitt • http://ki.tt/wd15 72
    module.exports = function(grunt) {
    // load grunt tasks matching ['grunt-*', '@*/grunt-*'] patterns
    require('load-grunt-tasks')(grunt);
    grunt.initConfig({
    ...

    View Slide

  73. Kitt Hodsden • @kitt • http://ki.tt/wd15 73
    module.exports = function(grunt) {
    // load grunt tasks matching ['grunt-*', '@*/grunt-*'] patterns
    require('load-grunt-tasks')(grunt);
    grunt.initConfig({});
    grunt.registerTask('default', []);
    }

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    devperf: {
    options: {
    urls: [
    'http://grunt.wtf/'
    ],
    numberOfRuns: 5,
    openResults: true,
    resultsFolder: './devperf',
    phantomasOptions: {
    'film-strip': true
    }
    }
    }

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

    View Slide

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

    View Slide

  81. Kitt Hodsden • @kitt • http://ki.tt/wd15 81

    View Slide

  82. Kitt Hodsden • @kitt • http://ki.tt/wd15 82

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  87. Kitt Hodsden • @kitt • http://ki.tt/wd15 87
    http://www.devobjective.com/

    View Slide

  88. Kitt Hodsden • @kitt • http://ki.tt/wd15 88
    http://www.devobjective.com/

    View Slide

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

    View Slide

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

    View Slide

  91. Kitt Hodsden • @kitt • http://ki.tt/wd15
    91

    htmlmin: {
    dist: {
    options: {
    removeComments: true,
    collapseWhitespace: true
    },
    files: {
    'dist/index.html': 'src/index.html',
    'dist/contact.html': 'src/contact.html'
    }
    },
    dev: {
    files: {
    'dist/index.html': 'src/index.html',
    'dist/contact.html': 'src/contact.html'
    }
    }
    }

    grunt.registerTask(‘comments-be-gone‘, ['htmlmin']);

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  96. Kitt Hodsden • @kitt • http://ki.tt/wd15
    Remove duplicate CSS?
    96

    View Slide

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

    View Slide

  98. Kitt Hodsden • @kitt • http://ki.tt/wd15
    Remove unused CSS?
    98

    View Slide

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

    View Slide

  100. Kitt Hodsden • @kitt • http://ki.tt/wd15
    npm install grunt-phantomcss —save-dev
    100
    Make sure you haven’t removed things you need

    View Slide

  101. Kitt Hodsden • @kitt • http://ki.tt/wd15
    npm install grunt-phantomcss —save-dev
    101
    Make sure you haven’t removed things you need

    View Slide

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

    View Slide

  103. Kitt Hodsden • @kitt • http://ki.tt/wd15
    npm install @micahgodbolt/grunt-phantomcss --save-dev
    https://github.com/micahgodbolt/grunt-phantomcss
    https://github.com/Huddle/PhantomCSS
    103
    We can install from github

    View Slide

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

    View Slide

  105. Kitt Hodsden • @kitt • http://ki.tt/wd15 105
    grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats
    phantomcss: {
    desktop: {
    options: {
    screenshots: 'test/visual/desktop/',
    results: 'results/visual/desktop',
    viewportSize: [1024, 768]
    },
    src: [
    'test/visual/**.js'
    ]
    },
    mobile: {
    options: {
    screenshots: 'test/visual/mobile/',
    results: 'results/visual/mobile',
    viewportSize: [320, 480]
    },
    src: [
    'test/visual/**.js'
    ]
    }
    }

    View Slide

  106. Kitt Hodsden • @kitt • http://ki.tt/wd15 106
    grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats
    phantomcss: {
    desktop: {
    options: {
    screenshots: 'test/visual/desktop/',
    results: 'results/visual/desktop',
    viewportSize: [1024, 768]
    },
    src: [
    'test/visual/**.js'
    ]
    },
    mobile: {
    options: {
    screenshots: 'test/visual/mobile/',
    results: 'results/visual/mobile',
    viewportSize: [320, 480]
    },
    src: [
    'test/visual/**.js'
    ]
    }
    }

    View Slide

  107. Kitt Hodsden • @kitt • http://ki.tt/wd15 107
    grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats
    casper.thenOpen('http://grunt.wtf/web-directions')
    .then(function() {
    phantomcss.screenshot('#region-branding', 'region-branding');
    })
    .then(function now_check_the_screenshots() {
    phantomCSS.compareAll();
    });

    View Slide

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

    View Slide

  109. Kitt Hodsden • @kitt • http://ki.tt/wd15 109
    https://github.com/cssstats/cssstats

    View Slide

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

    View Slide

  111. Kitt Hodsden • @kitt • http://ki.tt/wd15 111

    View Slide

  112. Kitt Hodsden • @kitt • http://ki.tt/wd15 112

    View Slide

  113. Kitt Hodsden • @kitt • http://ki.tt/wd15 113

    View Slide

  114. Kitt Hodsden • @kitt • http://ki.tt/wd15 114

    View Slide

  115. Kitt Hodsden • @kitt • http://ki.tt/wd15 115
    grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats
    cssstats: {
    dev: {
    options: {},
    files: {
    'stats/css-stats.json': ['css/example.css']
    },
    }
    }

    grunt.registerTask('stats', ['cssstats']);

    View Slide

  116. Kitt Hodsden • @kitt • http://ki.tt/wd15 116
    grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats
    cssstats: {
    dev: {
    options: { safe: false }, // Barf on invalid CSS
    files: {
    'stats/cssstats-dev.json': ['app/styles/main.css']
    }
    },
    prod: {
    files: {
    'stats/cssstats.json': ['dist/styles.css']
    }
    }
    }

    View Slide

  117. Kitt Hodsden • @kitt • http://ki.tt/wd15 117
    grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats
    cssstats: {
    dev: {
    options: { safe: false }, // Barf on invalid CSS
    files: {
    'stats/cssstats-dev.json': ['app/styles/main.css']
    }
    },
    prod: {
    files: {
    'stats/cssstats.json': ['dist/styles.css']
    }
    }
    }

    View Slide

  118. Kitt Hodsden • @kitt • http://ki.tt/wd15
    https://github.com/cssstats/cssstats
    118

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  123. Kitt Hodsden • @kitt • http://ki.tt/wd15
    Too many small images?
    123

    View Slide

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

    View Slide

  125. Kitt Hodsden • @kitt • http://ki.tt/wd15
    125
    grunt.initConfig({
    montage: {
    iconaroo: {
    files: {
    "images/sprites": [
    "images/icons/*.png"
    ]
    },
    options: {
    size: 32,
    outputImage: "sprite-icons.png",
    outputStylesheet: "sprite-icons.css"
    }
    }
    }
    });
    Sample grunt-montage configuration

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  129. Kitt Hodsden • @kitt • http://ki.tt/wd15
    129
    grunt.initConfig({
    svgmin: { // Task
    options: { // Configuration that will be passed directly to SVGO
    plugins: [
    { removeViewBox: false },
    { removeUselessStrokeAndFill: false }
    ]
    },
    dist: { // Target
    files: [{ // Dictionary of files
    expand: true, // Enable dynamic expansion.
    cwd: 'img/src', // Src matches are relative to this path.
    src: ['**/*.svg'], // Actual pattern(s) to match.
    dest: 'img/', // Destination path prefix.
    ext: '.min.svg' // Dest filepaths will have this extension.
    // ie: optimise img/src/branding/logo.svg and store it in img/branding/logo.min.svg
    }]
    }
    });
    grunt.loadNpmTasks('grunt-svgmin');
    grunt.registerTask('default', ['svgmin']);
    Sample grunt-svgmin configuration

    View Slide

  130. Kitt Hodsden • @kitt • http://ki.tt/wd15 130

    View Slide

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

    View Slide

  132. Kitt Hodsden • @kitt • http://ki.tt/wd15
    132
    grunt.initConfig({
    responsive_images: {
    myTask: {
    options: {
    sizes: [{
    width: 320,
    height: 240
    },{
    name: 'medium',
    width: 640
    },{
    name: "large",
    width: 1024,
    suffix: "_x2",
    quality: 60
    }]
    },
    files: [{
    expand: true,
    src: ['original/**.{jpg,gif,png}'],
    cwd: 'images/',
    custom_dest: 'images/{%= width %}/'
    }]
    }
    },
    });
    Sample grunt-responsive-images configuration

    View Slide

  133. Kitt Hodsden • @kitt • http://ki.tt/wd15
    133
    srcset="/images/small/cat.jpg 320w,
    /images/large/cat.jpg 1024w">
    Using img srcset

    View Slide

  134. Kitt Hodsden • @kitt • http://ki.tt/wd15
    134
    srcset="/images/small/cat.jpg 320w,
    /images/medium/cat.jpg 640w,
    /images/large/cat.jpg 1024w">
    Using img srcset

    View Slide

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

    View Slide

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

    View Slide

  137. Kitt Hodsden • @kitt • http://ki.tt/wd15
    webfonts!
    137

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  142. Kitt Hodsden • @kitt • http://ki.tt/wd15
    142
    grunt.initConfig({
    ziti: {
    subset_only: {
    options: {
    font: {
    chars: '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
    },
    convert: false
    },
    files: {
    ‘assets/fonts/my.ttf': [ ‘src/fonts/original.ttf' ]
    }
    }
    }
    });
    grunt.loadNpmTasks('grunt-ziti');
    grunt.registerTask('fontsubset', ['ziti']);
    Sample grunt-ziti configuration

    View Slide

  143. Kitt Hodsden • @kitt • http://ki.tt/wd15
    Wait… again…
    143

    View Slide

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

    View Slide

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

    View Slide

  146. Kitt Hodsden • @kitt • http://ki.tt/wd15
    How about not?
    146

    View Slide

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

    View Slide

  148. Kitt Hodsden • @kitt • http://ki.tt/wd15 148
    Request an API key.

    View Slide

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

    View Slide

  150. Kitt Hodsden • @kitt • http://ki.tt/wd15 150
    The API key is provisioned for up
    to 200 page loads per day …
    sufficient for most low-volume use
    cases and for building a proof-of-
    concept for larger testing

    View Slide

  151. Kitt Hodsden • @kitt • http://ki.tt/wd15 151
    Need more?

    View Slide

  152. Kitt Hodsden • @kitt • http://ki.tt/wd15 152
    Set up your own WebPageTest server.

    View Slide

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

    View Slide

  154. Kitt Hodsden • @kitt • http://ki.tt/wd15
    154
    perfbudget: {
    default: {
    options: {
    url: ‘http://example.io/',
    key: 'PUT_YOUR_API_KEY_HERE'
    }
    }
    }

    grunt.registerTask('budg', ['perfbudget']);

    View Slide

  155. Kitt Hodsden • @kitt • http://ki.tt/wd15
    155
    perfbudget: {
    default: {
    options: {
    url: 'http://fromthemiddle.io/',
    key: 'thisismykey',
    wptInstance: 'ec2.us-west-2.amazonaws.com',
    location: 'us-west-2_wptdriver',
    pollResults: 10,
    connectivity: '3G',
    runs: 1,
    timeout: 240
    }
    }
    }

    View Slide

  156. Kitt Hodsden • @kitt • http://ki.tt/wd15
    156
    perfbudget: {
    default: {
    options: {
    url: 'http://fromthemiddle.io/',
    key: 'thisismykey',
    wptInstance: 'ec2.us-west-2.amazonaws.com',
    location: 'us-west-2_wptdriver',
    pollResults: 10,
    connectivity: '3G',
    runs: 1,
    timeout: 240
    }
    }
    }

    View Slide

  157. Kitt Hodsden • @kitt • http://ki.tt/wd15
    157
    perfbudget: {
    default: {
    options: {
    url: 'http://fromthemiddle.io/',
    key: 'thisismykey',
    wptInstance: 'ec2.us-west-2.amazonaws.com',
    location: 'us-west-2_wptdriver',
    pollResults: 10,
    connectivity: '3G',
    runs: 1,
    timeout: 240
    }
    }
    }

    View Slide

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

    View Slide

  159. Kitt Hodsden • @kitt • http://ki.tt/wd15
    159
    perfbudget: {
    default: {
    options: {
    url: 'http://fromthemiddle.io/',

    connectivity: '3G',
    timeout: 240,
    budget: {
    render: '3000',
    SpeedIndex: '7500',
    visualComplete: '6000'
    }
    }
    }
    }

    View Slide

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

    View Slide

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

    View Slide

  162. Kitt Hodsden • @kitt • http://ki.tt/wd15
    Scripting!
    162

    View Slide

  163. Kitt Hodsden • @kitt • http://ki.tt/wd15
    Now what?
    163
    https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting

    View Slide

  164. Kitt Hodsden • @kitt • http://ki.tt/wd15
    164
    // bring up the login screen
    navigate https://grunt.wtf/user
    // log in
    setValue name=user testuser
    setValue name=password testpassword
    submitFormname=user-login

    View Slide

  165. Kitt Hodsden • @kitt • http://ki.tt/wd15
    Now what?
    165

    View Slide

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

    View Slide

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

    View Slide

  168. Kitt Hodsden • @kitt • http://ki.tt/wd15
    npm install grunt-mocha --save-
    dev
    168
    http://example.com/
    Running client side tests

    View Slide

  169. Kitt Hodsden • @kitt • http://ki.tt/wd15
    npm install grunt-mocha-test --
    save-dev
    169
    http://example.com/
    Running server side tests

    View Slide

  170. Kitt Hodsden • @kitt • http://ki.tt/wd15
    Integrate into CI builds
    170

    View Slide

  171. Kitt Hodsden • @kitt • http://ki.tt/wd15 171

    View Slide

  172. Kitt Hodsden • @kitt • http://ki.tt/wd15
    Tracking over time
    172

    View Slide

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

    View Slide

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

    View Slide

  175. Kitt Hodsden • @kitt • http://ki.tt/wd15
    175
    wpt: {
    options: {
    url: 'http://fromthemiddle.io/',
    server: 'ec2.us-west-2.amazonaws.com',
    dest: 'wpt/'
    },
    ftm: {
    options: {
    server: 'http://ec2.us-west-2.amazonaws.com',
    url: ['http://fromthemiddle.io/']
    },
    dest: 'wpt/',
    }
    }

    grunt.registerTask('wptrun', ['wpt']);

    View Slide

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

    View Slide

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

    View Slide

  178. Kitt Hodsden • @kitt • http://ki.tt/wd15 178
    Oh boy!

    View Slide

  179. Kitt Hodsden • @kitt • http://ki.tt/wd15 179
    webpagetest-mapper

    View Slide

  180. Kitt Hodsden • @kitt • http://ki.tt/wd15 180
    webpagetest-api

    View Slide

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

    View Slide

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

    View Slide

  183. Kitt Hodsden • @kitt • http://ki.tt/wd15 183

    View Slide

  184. Kitt Hodsden • @kitt • http://ki.tt/wd15 184

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  189. Kitt Hodsden • @kitt • http://ki.tt/wd15 189

    View Slide

  190. Kitt Hodsden • @kitt • http://ki.tt/wd15 190
    sitespeed.io

    View Slide

  191. Kitt Hodsden • @kitt • http://ki.tt/wd15 191
    http://run.sitespeed.io/

    View Slide

  192. Kitt Hodsden • @kitt • http://ki.tt/wd15 192

    View Slide

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

    View Slide

  194. Kitt Hodsden • @kitt • http://ki.tt/wd15 194

    View Slide

  195. Kitt Hodsden • @kitt • http://ki.tt/wd15 195

    View Slide

  196. Kitt Hodsden • @kitt • http://ki.tt/wd15 196

    View Slide

  197. Kitt Hodsden • @kitt • http://ki.tt/wd15 197

    View Slide

  198. Kitt Hodsden • @kitt • http://ki.tt/wd15 198
    Automation!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  203. Kitt Hodsden • @kitt • http://ki.tt/wd15 203
    docker pull sitespeedio/graphite
    docker pull grafana/grafana
    docker pull sitespeedio/sitespeed.io

    View Slide

  204. Kitt Hodsden • @kitt • http://ki.tt/wd15 204
    start graphite

    View Slide

  205. Kitt Hodsden • @kitt • http://ki.tt/wd15 205
    https://www.sitespeed.io/documentation/performance-dashboard/
    $ sudo mkdir -p /data/graphite/storage/whisper
    $ sudo htpasswd -c /path/to/.htpasswd YOUR_USERNAME
    $ sudo docker run -d \
    --name graphite \
    -p 8080:80 \
    -p 2003:2003 \
    --restart="always" \
    -v /data/graphite/storage/whisper:/opt/graphite/storage/whisper \
    -v /path/to/.htpasswd:/etc/nginx/.htpasswd \
    sitespeedio/graphite

    View Slide

  206. Kitt Hodsden • @kitt • http://ki.tt/wd15 206
    start grafana

    View Slide

  207. Kitt Hodsden • @kitt • http://ki.tt/wd15 207
    $ sudo mkdir -p /data/grafana
    $ sudo docker run -d -p 3000:3000 \
    -v /data/grafana:/var/lib/grafana \
    -e "GF_SECURITY_ADMIN_USER=myuser" \
    -e "GF_SECURITY_ADMIN_PASSWORD=MY_SUPER_STRONG_PASSWORD" \
    --name grafana \
    --restart="always" \
    grafana/grafana

    View Slide

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

    View Slide

  209. Kitt Hodsden • @kitt • http://ki.tt/wd15 209
    $ sudo mkdir -p /data/grafana
    $ sudo docker run -d -p 3000:3000 \
    -v /data/grafana:/var/lib/grafana \
    -e "GF_SECURITY_ADMIN_USER=myuser" \
    -e "GF_SECURITY_ADMIN_PASSWORD=MY_SUPER_STRONG_PASSWORD" \
    --name grafana \
    --restart="always" \
    grafana/grafana

    View Slide

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

    View Slide

  211. Kitt Hodsden • @kitt • http://ki.tt/wd15 211
    # ifconfig
    docker0 Link encap:Ethernet HWaddr 02:42:62:d5:83:18
    inet addr:172.17.42.1 Bcast:0.0.0.0 Mask:255.255.0.0
    inet6 addr: fe80::42:62ff:fed5:8318/64 Scope:Link
    UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1
    RX packets:419578 errors:0 dropped:0 overruns:0 frame:0
    TX packets:399294 errors:0 dropped:0 overruns:0 carrier:0
    collisions:0 txqueuelen:0
    RX bytes:66734551 (66.7 MB) TX bytes:834474594 (834.4 MB)

    View Slide

  212. Kitt Hodsden • @kitt • http://ki.tt/wd15 212
    $ docker run --privileged --rm -v /sitespeed.io:/sitespeed.io
    sitespeedio/sitespeed.io sitespeed.io -u http://fromthemiddle.io -b
    firefox -n 1 --graphiteHost 172.17.42.1 --graphiteNamespace
    sitespeed.io

    View Slide

  213. Kitt Hodsden • @kitt • http://ki.tt/wd15 213
    $ docker run --privileged --rm -v /sitespeed.io:/sitespeed.io
    sitespeedio/sitespeed.io sitespeed.io -u http://fromthemiddle.io -b
    firefox -n 1 --graphiteHost 172.17.42.1 --graphiteNamespace
    sitespeed.io

    View Slide

  214. Kitt Hodsden • @kitt • http://ki.tt/wd15 214
    $ docker run --privileged --rm -v /sitespeed.io:/sitespeed.io
    sitespeedio/sitespeed.io sitespeed.io -u http://fromthemiddle.io -b
    firefox -n 1 --graphiteHost 172.17.42.1 --graphiteNamespace
    sitespeed.io

    View Slide

  215. Kitt Hodsden • @kitt • http://ki.tt/wd15 215

    View Slide

  216. Kitt Hodsden • @kitt • http://ki.tt/wd15 216

    View Slide

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

    View Slide

  218. Kitt Hodsden • @kitt • http://ki.tt/wd15 218

    View Slide

  219. Kitt Hodsden • @kitt • http://ki.tt/wd15 219

    View Slide

  220. Kitt Hodsden • @kitt • http://ki.tt/wd15 220

    View Slide

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

    View Slide

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

    View Slide

  223. Kitt Hodsden • @kitt • http://ki.tt/wd15 223

    View Slide

  224. Kitt Hodsden • @kitt • http://ki.tt/wd15 224

    View Slide

  225. Kitt Hodsden • @kitt • http://ki.tt/wd15 225

    View Slide

  226. Kitt Hodsden • @kitt • http://ki.tt/wd15 226

    View Slide

  227. Kitt Hodsden • @kitt • http://ki.tt/wd15 227

    View Slide

  228. Kitt Hodsden • @kitt • http://ki.tt/wd15 228
    SHELL=/bin/bash
    PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin
    0,15,30,45 * * * * docker run --privileged --rm -v /sitespeed.io:/
    sitespeed.io sitespeedio/sitespeed.io sitespeed.io -f urls.txt -b
    firefox -n 11 --connection cable -r /tmp/ --graphiteHost
    YOUR_GRAPHITE_HOST --seleniumServer http://127.0.0.1:4444/wd/hub >>
    /tmp/sitespeed-run.txt 2>&1
    # YOUR_GRAPHITE_HOST = likely your IP address if you docker’d
    # -f urls.txt = list of URLs to analyze
    # -n 11 = depth to go, use -n for single page

    View Slide

  229. Kitt Hodsden • @kitt • http://ki.tt/wd15
    Phew!
    229

    View Slide

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

    View Slide

  231. Kitt Hodsden • @kitt • http://ki.tt/wd15
    Worth looking at:
    https://github.com/andyshora/grunt-yslow
    https://github.com/jrcryer/grunt-pagespeed
    https://github.com/addyosmani/psi/
    http://perf-tooling.today/tools
    231

    View Slide

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

    View Slide

  233. Kitt Hodsden • @kitt • http://ki.tt/wd15
    Questions?
    233

    View Slide

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

    View Slide

  235. Kitt Hodsden • @kitt • http://ki.tt/wd15 235
    Wait a second…

    View Slide

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

    View Slide

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

    View Slide

  238. Kitt Hodsden • @kitt • http://ki.tt/wd15 238
    Set up your own WebPageTest server.

    View Slide

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

    View Slide

  240. Kitt Hodsden • @kitt • http://ki.tt/wd15 240
    Click on EC2

    View Slide

  241. Kitt Hodsden • @kitt • http://ki.tt/wd15 241
    Click on Launch Instance

    View Slide

  242. Kitt Hodsden • @kitt • http://ki.tt/wd15 242
    Click on Community AMIs

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  249. Kitt Hodsden • @kitt • http://ki.tt/wd15 249

    View Slide

  250. Kitt Hodsden • @kitt • http://ki.tt/wd15 250

    View Slide

  251. Kitt Hodsden • @kitt • http://ki.tt/wd15 251

    View Slide

  252. Kitt Hodsden • @kitt • http://ki.tt/wd15 252

    View Slide

  253. Kitt Hodsden • @kitt • http://ki.tt/wd15 253

    View Slide

  254. Kitt Hodsden • @kitt • http://ki.tt/wd15 254

    View Slide

  255. Kitt Hodsden • @kitt • http://ki.tt/wd15 255

    View Slide

  256. Kitt Hodsden • @kitt • http://ki.tt/wd15 256

    View Slide

  257. Kitt Hodsden • @kitt • http://ki.tt/wd15 257

    View Slide

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

    View Slide

  259. Kitt Hodsden • @kitt • http://ki.tt/wd15 259

    View Slide

  260. Kitt Hodsden • @kitt • http://ki.tt/wd15 260

    View Slide

  261. Kitt Hodsden • @kitt • http://ki.tt/wd15 261

    View Slide

  262. Kitt Hodsden • @kitt • http://ki.tt/wd15 262

    View Slide

  263. Kitt Hodsden • @kitt • http://ki.tt/wd15 263

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  267. Kitt Hodsden • @kitt • http://ki.tt/wd15 267
    sudo vi /var/www/webpagetest/www/settings/settings.ini
    # update publishTo with ec2 hostname
    # update ec2 = 0
    # update ec2_locations = 0
    # add EC2.us-west-2.securityGroup line from sample
    # add EC2.us-west-2.subnetId line from sample
    #

    View Slide

  268. Kitt Hodsden • @kitt • http://ki.tt/wd15 268
    sudo vi /var/www/webpage/test/www/settings/keys.ini
    [server]
    secret=addarandomstringhere
    key=addakeyhere
    [addakeyhere]
    description=Web UI
    ;[email protected]
    limit=0
    [thisisyourapikey]
    description=API Key
    ;[email protected]
    limit=0

    View Slide

  269. Kitt Hodsden • @kitt • http://ki.tt/wd15 269
    $ cd /var/www/webpage/test/www/settings/
    $ sudo cp locations.ini.EC2-sample locations.ini
    # delete extra locations
    # update key values to your thisisyourkey value

    View Slide

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

    View Slide

  271. Kitt Hodsden • @kitt • http://ki.tt/wd15 271
    Set up testing instances

    View Slide

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

    View Slide

  273. Kitt Hodsden • @kitt • http://ki.tt/wd15 273
    OR

    View Slide

  274. Kitt Hodsden • @kitt • http://ki.tt/wd15 274
    Manual Setup

    View Slide

  275. Kitt Hodsden • @kitt • http://ki.tt/wd15 275
    Click on Launch Instance

    View Slide

  276. Kitt Hodsden • @kitt • http://ki.tt/wd15 276

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  280. Kitt Hodsden • @kitt • http://ki.tt/wd15 280

    View Slide

  281. Kitt Hodsden • @kitt • http://ki.tt/wd15 281

    View Slide

  282. Kitt Hodsden • @kitt • http://ki.tt/wd15 282

    View Slide

  283. Kitt Hodsden • @kitt • http://ki.tt/wd15
    Questions?
    283

    View Slide

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

    View Slide