PerfBar

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

Learn More Install Star on Github

Features

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