rendering-timer

Rtimer

Provides tool for audit rendering performance.
It doesn't require any modification for target Web site.

Features

• Measure the time required for screen transitions.
• Enable audit CSR performance.
• No need to modify target website.
• Image-based determination of rendering completion.
• Easily compare multiple website.
• Puppeteer-based testing scenario.

ToC

• Getting started
• How to use it?
• Scenario files
• CLI Usage

Getting started

Execute following command.

npm install rendering-timer -D

Create example scenario file.

npx rtimer init

Run Rtimer. Then, you can see report on your console.

npx rtimer audit

How to use it?

1. Create scenario files.
2. Create rtimer.config.json if you need.
3. Run audit command to correct performance timeline files.
4. Run analyze command to analyze performance from performance timeline files.

Scenario files

rendering-timer need scenario files to audit performance.

const { Scenario } = require('rendering-timer');

module.exports = new Scenario({
  name: 'exampleScenario',
  outDir: 'example/moreInfo',
  startUrl: 'https://example.com/',
  /*
  prepare: async (page) => {
    await page.type('#userIdInput', 'userId');
    await page.type('#passwordInput', 'password');
    await page.$('#loginButton').click();
  }
  */
  triger: async (page) => {
    const link = await page.$('a');
    if(!link) return console.error('link was not found')
    await link.click();
  } 
})

• name is option to specify scenario. It is used to audit single scenario with --name option of CLI command.
• outDir is option to specify path to output performance timeline json. In this example's case, output file will be stored in [PJroot]/timeline/example/moreInfo.
• startUrl is start point of audit.
• prepare is callback function (optional). This function will be called before triger callback. Usualy, it is useful for authentication.
• triger is callback function. rendering-timer lunch puppeteer with startUrl then, call prepare callback and triger callback. After exit triger callback, rendering-timer start to collect performance timeline.

triger and prepare recieve page object of puppeteer. So, you can use puppeteer APIs.
See puppeteer docs.

CLI Usage

npx rtimer <command> [options]

audit command

Start performance audit with puppeteer, and create performance timiline files for each scenarios. You need to create scenario files to run this command.

• --times is option for specify number of trials. Analyze result contains avarage of them.
• --name is option to audit with single scenario file.

analyze command

Start analyze performance timeline files. You need to run audit command to create performance timeline files before running this command.

• --output is option for specify output file type. ("csv" | "json")

run command

Run audit command then, run analyze command.
Options for audit and analyze can be specified.

init command

Create example scenario file.

help command

Show help text.