⏱ 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.
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 | [] |
connectEndconnectStartdomCompletedomContentLoadedEventEnddomContentLoadedEventStartdomInteractivedomLoadingdomainLookupEnddomainLookupStartfetchStartloadEventEndloadEventStartnavigationStartredirectEndredirectStartrequestStartresponseEndresponseStartsecureConnectionStartunloadEventEndunloadEventStart
first-paintfirst-contentful-paint
import { pageTiming } from 'page-timing';
const metrics = ['domInteractive', 'loadEventEnd'];
window.addEventListener('load', () => {
send(pageTiming({metrics}));
});Output
[
[
"domInteractive",
208.010986328125
],
[
"loadEventEnd",
431.010986328125
]
]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"
]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"
}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.35999990347773Browser entry (dist) exposes methods as pageTiming.pageTiming and pageTiming.measure:
const results = window.pageTiming.pageTiming(); // [...]
window.pageTiming.measure(myFunction, 'my-function');| 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 |
