Simple way to collect and look at your website performance metrics quickly, that supports budgeting and adding custom metrics.

Features Simple setup. Just one script, there is no dependencies.

Dozens of built-in metrics.

You have the ability to add specific metrics for your app.

You can disable any metric.

Budgeting support for all the metrics.

Basic usage the above example is a working example, just copy & paste and try it yourself!

Custom metrics Every metric must have a unique id or addMetric will return an error. the above example is a working example, just copy & paste and try it yourself!

Disable/Enable metric

Lazy Loading the above example is a working example, just copy & paste and try it yourself!

Full list of the built-in metrics

Load Time Page Load time. It's calculated by subtracting loadEventStart and navigationStart . The Default max is 5000 ms Id: loadTime Unit: ms Budget – Max: 5000 Source: Navigation Timing API

Latency The time it takes to recieve the first byte from server. Id: latency Unit: ms Budget – Max: 50 Source: Navigation Timing API

First Paint The time it takes the browser to paint the first frame. Id: FirstPaint Unit: ms Budget – Max: 100 Source: Chrome.loadTimes and IE timing NOTE: This metric does not work on Firefox, unfortunately :( The implementation of this metric is taken from timing.js, thanks Addy!

Number of requests It's the total number of HTTP/HTTPS requests made by the page. Id: numReqs Source: Resource timing API

Front End The time the page takes to do the front end work, this start after responseEnd event and it ends when the onload event fires. Id: frontEnd Unit: ms Budget – Max: 80% of the total page load time, following Steve's Golden rule Source: Navigation Timing API

Back End The time it takes to get the full response from the server, this start at navigationStart event and it ends at responseEnd event. Id: backEnd Unit: ms Budget – Max: 20% of the total page load time, following Steve's Golden rule Source: Navigation Timing API

Response Duration The time it takes the browser to recieve the full response, this start at responseStart event and it ends at responseEnd event. Id: respnseDuration Unit: ms Source: Navigation Timing API

Request Duration The time it takes server to respond after sending a request to it, this start at requestStart event and it ends at responseStart event. Id: requestDuration Unit: ms Source: Navigation Timing API

Redirects count How many redirects it took you to get to this page? Id: redirectCount Source: Navigation Timing API

Load Event duration The amout of time it took the load event to finish. Id: loadEventTime Unit: ms Source: Navigation Timing API

DOM Content loaded Time for the DOM content to be loaded. Id: domContentLoaded Unit: ms Source: Navigation Timing API

Processing Duration The amount of time that takes the browser to process the whole page. Id: processing Unit: ms Source: Navigation Timing API

DOM elements The total number of DOM elements. Id: numOfEl Source: DOM

CSS The total number of the CSS files in the page. Id: cssCount Source: DOM

JavaScript The total number of the JavaScript scripts in the page. Id: jsCount Source: DOM

Images The total number of images in the page. Id: imgCount Source: DOM

Data URI images The total number of the data URI images in the page. Id: dataURIImagesCount Source: DOM

Inline CSS The total number of the inlined CSS in the page. Id: inlineCSSCount Source: DOM

Inline JavaScript The total number of the inlined JavaScript in the page. Id: inlineJSCount Source: DOM

3rd Party CSS The total number of the CSS files loaded from a 3rd party host. Id: thirdCSS Source: DOM

3rd Party JavaScript The total number of the JavaScript files loaded from a 3rd party host. Id: thirdJS Source: DOM

Demo The current page has PerfBar in it.

Install NPM $ npm install perfbar Download You can download the latest release from the github repo