aerate

Measure frontend performance against a budget with an optional UI

Usage

1. Get a WebPageTest.org API key
2. yarn add aerate or npm i aerate
3. Require Aerate in your project:

const aerate = require('aerate');

1. Call the function with the options (options below):

aerate({
  key: 'YOUR_API_KEY',
  tests: [
    {
      name: 'Four Kitchens',
      url: 'http://fourkitchens.com/', // Or use relative urls for local tests
      type: 'homepage'
    }
  ]
});

1. For a shorter command, add a script to your package.json

"scripts": {
  "aerate": "node aerate.js" (or whatever file you're using locally)
}

1. npm run aerate or yarn aerate
2. (Optional) Create/copy your own budget.json file using the following format:

{
  "TTFB": { // WPT Statistic name
    "name": "First Byte", // Readable Name presented on UI
    "description": "Time to First Byte is measured as the time from the start of the initial navigation until the first byte of the base page is received by the browser (after following redirects).",
    "value": "300" // Budgeted Value
  }
}

See /docs/stats.md for the list of available budget statistics

Available Options:

1. key: REQUIRED API Key
2. tests: REQUIRED tests to run
3. connection: OPTIONAL defaults to 'Mobile LTE'
4. count: OPTIONAL how many tests to run (WebPageTest.org supports up to 9)
5. ui: OPTIONAL open Aerate UI in browser vs. console (defaults to false)
6. localPort: OPTIONAL for local testing, enter your environment port

How do I set up the dev environment?

1. clone repo, cd into it and run yarn to install dependencies
2. Run gulp (opens up the UI with fake data populated from mapper/fake-results.json)

PostCSS usage: If you would like any new PostCSS plugins installed, the steps are as follows:

1. npm install --save-dev PLUGIN_NAME
2. Add your plugin to gulpfile.js at the top like the others and reference that addition in the postCSS call