PerfBar

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!

Update metric

.updateMetric(id, updateObject)

id: is the metric id
updateObject: is an object that contains the new values for the metric. You can update the budget, label, value, unit

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

By Khalid Lafi / @LafiKL