Skip to content
Measure browser timing and do something with it
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.github
.karma
src
.babelrc.js
.editorconfig
.eslintignore
.eslintrc
.gitattributes
.gitignore
.npmignore
.npmrc
.nvmrc
CODE_OF_CONDUCT.md
LICENSE
README.md
index.html
package.json
webpack.config.js

README.md

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.

Empty metrics (whose value is 0) will be omitted from the results.

API

pageTiming

Get a formatted object of page performance metrics.

import { pageTiming } from 'page-timing';
const results = pageTiming();

fetch('/send-metrics', {
  method: 'POST',
  body: JSON.stringify(results),
});

The method accepts named arguments, all of which are optional

const results = pageTiming({metrics: [], reducer: () => {}, accumulator = []});
Key Role Type Default value
metrics The metrics you'd like to collect Array See full list below
reducer The reducer used to collect them Function (a, [k, v]) => [...a, [k, v]]
accumulator Initial data structure to reduce on Any []

Metrics list

Navigation Timing
  • connectEnd
  • connectStart
  • domComplete
  • domContentLoadedEventEnd
  • domContentLoadedEventStart
  • domInteractive
  • domLoading
  • domainLookupEnd
  • domainLookupStart
  • fetchStart
  • loadEventEnd
  • loadEventStart
  • navigationStart
  • redirectEnd
  • redirectStart
  • requestStart
  • responseEnd
  • responseStart
  • secureConnectionStart
  • unloadEventEnd
  • unloadEventStart
Paint Timing
  • first-paint
  • first-contentful-paint

Usage

Basic use

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

window.addEventListener('load', () => {
  send(pageTiming({metrics}));
});

Output

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

StatsD messages format

import {snakeCase} from 'lodash';

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

sendMetricsToStatsD(...results);

Output

[
  "browser_performance.homepage_loggedout.dom_interactive:208|ms",
  "browser_performance.homepage_loggedout.first_contentful_paint:316|ms",
  "browser_performance.homepage_loggedout.load_event_end:431|ms"
]

Enriched objects

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

sendPreformanceEvent(event);

Output

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

measure

Wrap a function and measure it's execution time in milliseconds into a performance measure entry.

import { measure } from 'page-timing';

await pageTiming.measure(wait, 'my-function');

// Example: Convert entries to a named array
performance.getEntriesByType('measure').reduce(
  (accumulator, {name, duration}) => Object.assign(accumulator, {[name]: duration}),
  {}
);
// {my-function: 53.35999990347773}

// Example: Retrieve a specific entry
const { duration } = performance.getEntriesByType('measure')
  .find(({name}) => name === 'my-function');
// 53.35999990347773

Dist

Browser entry (dist) exposes methods as pageTiming.pageTiming and pageTiming.measure:

const results = window.pageTiming.pageTiming(); // [...]

window.pageTiming.measure(myFunction, 'my-function');

Calculations used to analyse the performance 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

You can’t perform that action at this time.