🚀 Aerate: Frontend performance made easy.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
docs
mapper
scripts
src
.eslintrc.yml
.gitignore
CODE_OF_CONDUCT.md
LICENSE.txt
README.md
budget.json
gulpfile.js
index.js
package-lock.json
package.json
prettier.config.js
wpt.js
yarn-error.log
yarn.lock

README.md

Four Kitchens

Aerate Logo

Measure frontend performance against a budget with an optional UI

Aerate Results Aerate 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