Introducing Aerate: Frontend performance made easy

One of the cornerstones of our development process at Four Kitchens is performance. We believe speed is foundational to creating a great user experience. For this reason, we offer both a suite of performance audits for existing projects, and we bake performance testing into every new project we build. In fact, we take performance so seriously that we created Aerate, a tool to automate performance testing on a project.

Background

While there are some great paid tools out there for gleaning rich performance data from your application, we struggled to find a tool that accomplished the key goals.

1. Simple metrics: We wanted to distill the mass of performance data down to the simplest metrics for project success: e.g., First Byte, Start Render, First Meaningful Paint…
2. Budget: Budgets should be set for each metric, even if just based on general web usage statistics
3. Charts: Command line results for developers and HTML charts for clients and stakeholders
4. Free & Open Source

Technology & Usage

Aerate is an npm package that can be installed in any environment that supports that technology. It uses the rich dataset from WebPageTest.org and builds on the great work of webpagetest and webpagetest-mapper. Once you’ve installed and required the package in your project, you can add tests by using the following:

aerate({
  key: 'YOUR_WEBPAGETEST.ORG_API_KEY',
  tests: [
    {
      name: 'Google',
      url: 'http://google.com/',
      type: 'homepage'
    }
  ]
});

And then run them in your project with npm run aerate or yarn aerate. This will retu\r\n \the following in the console:

The statistics you see in the screenshot are the defaults, but you can limit the metrics or edit the budget values by writing your own budget.json file in the root of your project.

Local Testing & Multiple Tests

You can also test projects locally:

aerate({
  key: 'YOUR_WEBPAGETEST.ORG_API_KEY',
  tests: [
    {
      name: 'Your local project',
      url: '/', // use relative url for local testing
      type: 'homepage'
    }
  ],
  localPort: 8888 // port is required for local testing
});

And run multiple tests at once:

aerate({
  key: 'YOUR_WEBPAGETEST.ORG_API_KEY',
  tests: [
    {
      name: 'Google.com',
      url: 'http://google.com',
      type: 'homepage',
    },
    {
      name: 'Yahoo.com',
      url: 'https://www.yahoo.com/',
      type: 'homepage',
    },
    {
      name: 'Bing.com',
      url: 'https://www.bing.com/',
      type: 'homepage',
    },
  ],
});

Results in the Browser

One of the main purposes for creating Aerate is to share results with clients and stakeholders in a browser. To enable this, simply set the ui option to true:

aerate({
  key: 'YOUR_WEBPAGETEST.ORG_API_KEY',
  tests: [
    {
      name: 'Google',
      url: 'http://google.com/',
      type: 'homepage'
    }
  ],
  ui: true
});

This will open a results page in the browser that can then be published with your project:

Not only does this provide a nice interface to consume this information, but names and descriptions of each metric are available in the aforementioned budget.json file. If performance metrics are new for a client or stakeholder, you can tweak to clearly display only the information needed.

Final Notes

That’s Aerate! You can now set budgets on all projects and clearly communicate the results to the development team, clients, and stakeholders. Also, if you wrap this feedback loop into the build process on a project, you can get feedback in real time (e.g., as you submit PRs) on what additions might be resulting in performance losses. Check out and use Aerate on a project and let us know what you think!