A collection of metrics tools for measuring performance.
npm install --save-dev browser-metrics
This module helps getting insight about how your app performs in production.
browsingMetrics
This function is intended to measure the following metrics:
timeToFirstByte
).timeToFirstPaint
).timeToInteractive
).componentDidMount
hook of React, it can be used to get the time needed to get an interactive interface.All the durations are in milliseconds and relative to the beginning of the navigation.
It takes advantage of the performance.timing
model.
Notices that research only show meaningful effect, at the product level, for the time to interaction metric. Until research shows otherwise, you should consider the other metrics as simple technical indicators. source
import browsingMetrics from 'browser-metrics/lib/browsingMetrics';
import React from 'react';
class App extends React.Component {
componentDidMount() {
browsingMetrics({
trackTiming: (category, name, duration) => {
// Now, we can send the metrics to a third party to keep track of them.
},
sampleRate: 20,
log: false,
});
}
render() {
return <div>{'This is the root node of my app.'}</div>
}
}
export default App;
browsingMetrics(object)
Arguments
options
(object)
trackTiming
(Function): This callback property is called for each collected metrics with three arguments
category
(string): Is load
.name
(string): name of the metric being collected.duration
(number): duration measured for this metric.[sampleRate=100]
(number): It can be used to sample the data send to a third party. It's expressed in percentage. The data aren't sampled.[log=false]
(boolean): When turned to true
the collected data are displayed in the console.Metric | IE | Edge | Firefox | Chrome | Safari |
---|---|---|---|---|---|
timeToFirstByte |
>= 10 | ✓ | >= 38 | >= 25 | x |
timeToFirstPaint |
>= 10 | ✓ | x | >= 12 | x |
timeToInteractive |
>= 10 | ✓ | >= 38 | >= 25 | x |
Metric
This class is intended to help to measure the time spent in transactions. It's a simple helper around the User Timing API and the high resolution Performance.now() method.
For browsers that support the mark API, the transaction also appears in the DevTools. E.g. with Chrome:
import Metric from 'browser-metrics/lib/Metric';
const metric = new Metric('ACCOUNT_DETAIL_FETCH');
metric.start();
// Do the CPU consuming work.
metric.end();
console.log(metric.duration); // 14.4 ms
Metric
(Class)
duration
(number)
Returns the duration of the timing metric or -1 if there a measurement has not been made.
start
(Function)
Call to begin a measurement.
end
(Function)
Call to end a measurement.
Feature | IE | Edge | Firefox | Chrome | Safari |
---|---|---|---|---|---|
performance.now |
>= 10 | ✓ | >= 15 | >= 20 | >= 8 |
performance.mark |
>= 10 | ✓ | >= 41 | >= 43 | x |
reduxMetricsMiddelware
This is a redux middleware. Redux has a nice design property, actions are performed synchronously in a transaction. That allow us to measure the time spent in each action.
When used with react-redux and the current react-dom reconciliation algorithm the time also take into account the render
calls down the virtual DOM tree.
import metricsMiddleware from 'browser-metrics/lib/reduxMetricsMiddleware';
import { createStore, applyMiddleware } from 'redux';
const rootReducer = (store) => store;
const store = createStore(
rootReducer,
applyMiddleware(metricsMiddleware({
trackTiming: (category, name, duration) => {
// Now, we can send the metrics to a third party to keep track of them.
},
minDuration: 50,
}))
);
metricsMiddleware(object)
Arguments
options
(object)
trackTiming
(Function): This callback property is called for each collected metrics with three arguments
category
(string): Is redux
.name
(string): name of the metric being collected.duration
(number): duration measured for this metric.[minDuration=50]
(number): It can be used to ignore non significant actions. An action must have a duration higher to minDuration
to be reported.Metrics can be reported to Google Analytics using the User Timing section. E.g. with the analytics.js library.
// https://developers.google.com/analytics/devguides/collection/analyticsjs/user-timings
window.ga('send', {
hitType: 'timing',
timingCategory: category,
timingVar: name,
timingValue: duration,
});
Then, you can see the values in the UI.
Notices the you shouldn't be using the mean as a performance indicator. Using the mediam (50th percentile) would be a much better indicator.
MIT