Package Exports

page-timing

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (page-timing) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

page-timing

Measure browser page performance timing and reduce it to a results object using the navigation timing API

This program collects each metrics' total time from timeOrigin (falls back to navigationStart), so metric calculations can be performed by the analyser, wherever the data is reported to.

Usage

Basic use

import { pageTiming } from 'page-timing';
const metrics = ['domInteractive', 'loadEventEnd'];

pageTiming({metrics});

console.log(...results);

Output

[
  [
    "domInteractive",
    208.010986328125
  ],
  [
    "loadEventEnd",
    431.010986328125
  ]
]

Key value pairs

const reducer = (accumulator, [key, value]) => [...accumulator, {[`browser_performance.${page_name}.${key}`]: parseInt(value)}];
const results = pageTiming({
    reducer,
    metrics,
});

sendToGraphite(...results);

Output

[
  {
    "browser_performance.homepage_loggedout.domInteractive": 208
  },
  {
    "browser_performance.homepage_loggedout.loadEventEnd": 431
  }
]

Enriched objects

const reducer = (accumulator, [key, value]) => Object.assign(
    accumulator,
    {[key]: value.toFixed(2)}
);
const event = {
    group: "performance",
    type: "browser_performance",
    timings: {},
    page: "homepage_loggedout"
};
const results = pageTiming({
    reducer,
    accumulator: event.timings,
    metrics,
});

sendToBigquery(...results);

Output

{
  "group": "performance",
  "type": "browser_performance",
  "metrics": {
    "domInteractive": "208.01",
    "loadEventEnd": "431.01"
  },
  "page": "homepage_loggedout"
}

Calculations used to analyse the results

Meaning	Calculation
Total time from start to load	`loadEventEnd - navigationStart`
Time spent constructing the DOM tree	`domComplete - domInteractive`
Time consumed preparing the new page	`timing.fetchStart - navigationStart`
Time spent during redirection	`redirectEnd - redirectStart`
AppCache	`domainLookupStart - fetchStart`
Time spent unloading documents	`unloadEventEnd - unloadEventStart`
DNS query time	`domainLookupEnd - domainLookupStart`
TCP connection time	`connectEnd - connectStart`
Time spent during the request	`responseEnd - requestStart`
Request to completion of the DOM loading	`domInteractive - responseEnd`
Load event time	`loadEventEnd - loadEventStart`
download Time	`responseEnd - responseStart`
DOM Content loaded event time	`domContentLoadedEventEnd - domContentLoadedEventStart`