Fresnel

Fresnel is an automated tool for creating and comparing performance reports about web pages.

Getting started

Install Fresnel from npm. Node.js 10 or later is required.

$ npm install -g fresnel

Configure scenarios

Fresnel reads configuration from a .fresnel.yml file. This is also the place to declare your performance scenarios.

A scenario consists of the following options:

• url: The browser will navigate to this url.

• viewport (optional): Viewport for the browser tab.

  This does not include the OS or browser UI. For example, a maximised window on a 1440x900 screen could have a viewport of 1440x790.

  Default: { width: 1100, height: 700 }

  For additional viewport properties, see puppeteer/Page.setViewport.

• reports: List of Fresnel reports to enable for this scenario.

  Available:

  • navtiming
  • paint
  • transfer

• probes: List of Fresnel probes to enable for this scenario.

  Available:

  • screenshot
  • trace

Examples of Fresnel config files:

• Fresnel test fixture
• MediaWiki

Usage

Run fresnel help to find the available commands and how to use them.

To record scenarios with Fresnel, run the fresnel record command.

Then, after changing the project under test, record the scenarios again. This time, with a different label.

Lastly, compare the two recordings using fresnel compare.

$ fresnel record "before"

$ fresnel record "after"

$ fresnel compare "before" "after"