1.1.0 • Published 5 years ago
aerate v1.1.0
Measure frontend performance against a budget with an optional UI
Usage
- Get a WebPageTest.org API key
yarn add aerate
ornpm i aerate
- Require Aerate in your project:
const aerate = require('aerate');
- 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'
}
]
});
- For a shorter command, add a script to your package.json
"scripts": {
"aerate": "node aerate.js" (or whatever file you're using locally)
}
npm run aerate
oryarn aerate
- (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:
key
: REQUIRED API Keytests
: REQUIRED tests to runconnection
: OPTIONAL defaults to 'Mobile LTE'count
: OPTIONAL how many tests to run (WebPageTest.org supports up to 9)ui
: OPTIONAL open Aerate UI in browser vs. console (defaults to false)localPort
: OPTIONAL for local testing, enter your environment port
How do I set up the dev environment?
- clone repo, cd into it and run
yarn
to install dependencies - Run
gulp
(opens up the UI with fake data populated frommapper/fake-results.json
)
PostCSS usage: If you would like any new PostCSS plugins installed, the steps are as follows:
npm install --save-dev PLUGIN_NAME
- Add your plugin to gulpfile.js at the top like the others and reference that addition in the postCSS call