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

Fluent 2015 Automate Front-end Performance

Fluent 2015 Automate Front-end Performance

Kitt Hodsden

April 21, 2015
Tweet

More Decks by Kitt Hodsden

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 24
    https://www.flickr.com/photos/[email protected]/8613726003

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  47. Kitt Hodsden • @kitt • http://ki.tt/fluent2015
    47
    {
    "engines": {
    "node": ">= 0.12.0"
    },
    "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-jshint": "~0.7.2",
    "grunt-contrib-watch": "~0.5.3",
    }
    }
    This is what a package.json file looks like

    View Slide

  48. Kitt Hodsden • @kitt • http://ki.tt/fluent2015
    48
    {
    "engines": {
    "node": ">= 0.12.0"
    },
    "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-jshint": "~0.7.2",
    "grunt-contrib-watch": "~0.5.3",
    }
    }
    This is what a package.json file looks like

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  58. Kitt Hodsden • @kitt • http://ki.tt/fluent2015
    58
    ...
    // load all the grunt modules instead of one each line
    require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
    grunt.registerTask('checkjs', ['jshint']);
    grunt.registerTask('watchjs', ['jshint', 'watch']);
    grunt.registerTask('gruntjs', ['jshint:gruntfile', 'watch']);

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

    View Slide

  75. Kitt Hodsden • @kitt • http://ki.tt/fluent2015
    Concatenate and
    Minify CSS files?
    75

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  79. Kitt Hodsden • @kitt • http://ki.tt/fluent2015
    Remove unused CSS?
    79

    View Slide

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

    View Slide

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

    View Slide

  82. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 82
    https://github.com/cssstats/cssstats

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

  91. Kitt Hodsden • @kitt • http://ki.tt/fluent2015
    https://github.com/cssstats/cssstats
    91

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  105. Kitt Hodsden • @kitt • http://ki.tt/fluent2015
    Wait… again…
    105

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  113. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 113
    http://www.webpagetest.org/getkey.php
    Limits of public use
    The API key is provisioned for up
    to 200 page loads per day …
    sufficient for most low-volume use
    cases and for building a proof-of-
    concept for larger testing

    View Slide

  114. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 114
    Need more?

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  136. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 136
    Make a change
    Measure effects

    View Slide

  137. Kitt Hodsden • @kitt • http://ki.tt/fluent2015
    Worth looking at:
    https://github.com/andyshora/grunt-yslow
    https://github.com/jrcryer/grunt-pagespeed
    https://github.com/addyosmani/psi/
    http://www.sitespeed.io/
    137

    View Slide

  138. Kitt Hodsden • @kitt • http://ki.tt/fluent2015
    Questions?
    138

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  167. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 167
    sudo vi /var/www/webpage/test/www/settings/settings.ini
    # update host with ec2 hostname
    # add ec2_key value (optional)
    # add ec2_secret value (optional)
    # uncomment EC2.us-west-2.securityGroup line
    # uncomment EC2.us-west-2.subnetId line
    #

    View Slide

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

    View Slide

  169. Kitt Hodsden • @kitt • http://ki.tt/fluent2015 169
    $ cd /var/www/webpage/test/www/settings/
    $ sudo cp locations.ini.EC2-sample locations.ini

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide