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 |