$30 off During Our Annual Pro Sale. View Details »

devObjective Automate Your Site's Front End Performance

devObjective Automate Your Site's Front End Performance

Automating your site's front-end performance metric gathering using Grunt, grunt-based tools and Webpagetest. No devops experience needed.

Kitt Hodsden

May 14, 2015
Tweet

More Decks by Kitt Hodsden

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. Kitt Hodsden • @kitt • http://ki.tt/do2015
    https://www.flickr.com/photos/wonderlane/6450860457

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  38. Kitt Hodsden • @kitt • http://ki.tt/do2015
    But… but…
    38

    View Slide

  39. Kitt Hodsden • @kitt • http://ki.tt/do2015
    My network!
    39

    View Slide

  40. Kitt Hodsden • @kitt • http://ki.tt/do2015
    My browsers!
    40

    View Slide

  41. Kitt Hodsden • @kitt • http://ki.tt/do2015
    Automation!
    41

    View Slide

  42. Kitt Hodsden • @kitt • http://ki.tt/do2015 42

    View Slide

  43. Kitt Hodsden • @kitt • http://ki.tt/do2015 43
    http://nodejs.org/

    View Slide

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

    View Slide

  45. Kitt Hodsden • @kitt • http://ki.tt/do2015 45

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  71. Kitt Hodsden • @kitt • http://ki.tt/do2015 71

    View Slide

  72. Kitt Hodsden • @kitt • http://ki.tt/do2015 72

    View Slide

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

    View Slide

  74. Kitt Hodsden • @kitt • http://ki.tt/do2015 74
    http://www.devobjective.com/

    View Slide

  75. Kitt Hodsden • @kitt • http://ki.tt/do2015 75
    http://www.devobjective.com/

    View Slide

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

    View Slide

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

    View Slide

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

    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

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

    View Slide

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

    View Slide

  81. Kitt Hodsden • @kitt • http://ki.tt/do2015
    Remove duplicate CSS?
    81

    View Slide

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

    View Slide

  83. Kitt Hodsden • @kitt • http://ki.tt/do2015
    Remove unused CSS?
    83

    View Slide

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

    View Slide

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

    View Slide

  86. Kitt Hodsden • @kitt • http://ki.tt/do2015 86
    https://github.com/cssstats/cssstats

    View Slide

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

    View Slide

  88. Kitt Hodsden • @kitt • http://ki.tt/do2015 88

    View Slide

  89. Kitt Hodsden • @kitt • http://ki.tt/do2015 89

    View Slide

  90. Kitt Hodsden • @kitt • http://ki.tt/do2015 90

    View Slide

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

    View Slide

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

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

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

  95. Kitt Hodsden • @kitt • http://ki.tt/do2015
    https://github.com/cssstats/cssstats
    95

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

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

    View Slide

  109. Kitt Hodsden • @kitt • http://ki.tt/do2015
    Wait… again…
    109

    View Slide

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

    View Slide

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

    View Slide

  112. Kitt Hodsden • @kitt • http://ki.tt/do2015
    How about not?
    112

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  116. Kitt Hodsden • @kitt • http://ki.tt/do2015 116

    View Slide

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

  118. Kitt Hodsden • @kitt • http://ki.tt/do2015 118
    Need more?

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

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

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

  125. Kitt Hodsden • @kitt • http://ki.tt/do2015 125

    View Slide

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

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

    View Slide

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

    View Slide

  128. Kitt Hodsden • @kitt • http://ki.tt/do2015 128

    View Slide

  129. Kitt Hodsden • @kitt • http://ki.tt/do2015
    Now what?
    129

    View Slide

  130. Kitt Hodsden • @kitt • http://ki.tt/do2015
    Integrate into CI builds
    130

    View Slide

  131. Kitt Hodsden • @kitt • http://ki.tt/do2015 131

    View Slide

  132. Kitt Hodsden • @kitt • http://ki.tt/do2015
    Tracking over time
    132

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  140. Kitt Hodsden • @kitt • http://ki.tt/do2015 140
    Oh boy!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

  148. Kitt Hodsden • @kitt • http://ki.tt/do2015 148
    Recall what we’re doing…
    Make a change
    Measure effects

    View Slide

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

    View Slide

  150. Kitt Hodsden • @kitt • http://ki.tt/do2015
    Questions?
    150

    View Slide

  151. Kitt Hodsden • @kitt • http://ki.tt/do2015 151
    Wait a second…

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  156. Kitt Hodsden • @kitt • http://ki.tt/do2015 156
    Click on EC2

    View Slide

  157. Kitt Hodsden • @kitt • http://ki.tt/do2015 157
    Click on Launch Instance

    View Slide

  158. Kitt Hodsden • @kitt • http://ki.tt/do2015 158
    Click on Community AMIs

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  165. Kitt Hodsden • @kitt • http://ki.tt/do2015 165

    View Slide

  166. Kitt Hodsden • @kitt • http://ki.tt/do2015 166

    View Slide

  167. Kitt Hodsden • @kitt • http://ki.tt/do2015 167

    View Slide

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

    View Slide

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

    View Slide

  170. Kitt Hodsden • @kitt • http://ki.tt/do2015 170

    View Slide

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

    View Slide

  172. Kitt Hodsden • @kitt • http://ki.tt/do2015 172

    View Slide

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

    View Slide

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

    View Slide

  175. Kitt Hodsden • @kitt • http://ki.tt/do2015 175

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

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

    View Slide

  187. Kitt Hodsden • @kitt • http://ki.tt/do2015 187
    Set up testing instances

    View Slide

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

    View Slide

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

    View Slide

  190. Kitt Hodsden • @kitt • http://ki.tt/do2015 190
    Manual Setup

    View Slide

  191. Kitt Hodsden • @kitt • http://ki.tt/do2015 191
    Click on Launch Instance

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  198. Kitt Hodsden • @kitt • http://ki.tt/do2015 198

    View Slide

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

    View Slide