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

	<!DOCTYPE html>
	<html>
	<head>
	<title>PerfBar</title>
	<meta charset='utf-8'>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css">
	</head>
	<body>

	<h1>Hello Wrold!</h1>

	<!-- NOTE: Place the script at the bottom of the page for better performance https://developer.yahoo.com/blogs/ydnfiveblog/high-performance-sites-rule-6-move-scripts-bottom-7200.html -->

	<!-- This is all you need to start using PerfBar! -->
	<script type="text/javascript" src="http://perfbar.khalidlafi.com.global.prod.fastly.net/perfbar-0.0.2.min.js"></script>
	<script type="text/javascript">
	perfBar.init({
	// list of the built-in metrics http://wpotools.github.io/perfBar/#list
	budget: {
	// the key is the metric id
	'loadTime': {
	max: 200
	},
	'redirectCount': {
	max: 1
	},
	'globalJS': {
	min: 2,
	max: 5
	}
	}
	});
	</script>

	</body>
	</html>

view raw basic.html hosted with ❤ by GitHub

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.

	<!DOCTYPE html>
	<html>
	<head>
	<title>PerfBar</title>
	<meta charset='utf-8'>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css">
	</head>
	<body>

	<h1>Hello Wrold!</h1>

	<!-- NOTE: Place the script at the bottom of the page for better performance https://developer.yahoo.com/blogs/ydnfiveblog/high-performance-sites-rule-6-move-scripts-bottom-7200.html -->

	<script type="text/javascript" src="http://perfbar.khalidlafi.com.global.prod.fastly.net/perfbar-0.0.2.min.js"></script>
	<script type="text/javascript">
	perfBar.init();

	var err = perfBar.addMetric({
	id: 'Test',
	label: 'Test new metric', // human readable name
	value: 18,
	budget: {
	max: 20,
	min: 1
	}
	});

	if ( !err ) console.log('Woho , no errors all is ok!');
	</script>

	</body>
	</html>

view raw custom.html hosted with ❤ by GitHub

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

	<!DOCTYPE html>
	<html>
	<head>
	<title>PerfBar</title>
	<meta charset='utf-8'>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css">
	</head>
	<body>


	<h1>Hello Wrold!</h1>

	<!-- NOTE: Place the script at the bottom of the page for better performance https://developer.yahoo.com/blogs/ydnfiveblog/high-performance-sites-rule-6-move-scripts-bottom-7200.html -->
	<script type="text/javascript" src="http://perfbar.khalidlafi.com.global.prod.fastly.net/perfbar-0.0.2.min.js"></script>
	<script type="text/javascript">
	perfBar.init();

	var err = perfBar.addMetric({
	id: 'testId',
	label: 'Test new metric', // human readable name
	value: 18,
	budget: {
	max: 20,
	min: 1
	}
	});

	if ( !err ) console.log('Woho , no errors all is ok!');

	// Updating metric - this works for all the metrics even the built-in ones.
	perfBar.updateMetric('testId', {
	value: 5
	})
	</script>

	</body>
	</html>

view raw update.html hosted with ❤ by GitHub

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

Disable/Enable metric

	<!DOCTYPE html>
	<html>
	<head>
	<title>PerfBar</title>
	<meta charset='utf-8'>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css">
	</head>
	<body>


	<h1>Hello Wrold!</h1>

	<!-- NOTE: Place the script at the bottom of the page for better performance https://developer.yahoo.com/blogs/ydnfiveblog/high-performance-sites-rule-6-move-scripts-bottom-7200.html -->
	<script type="text/javascript" src="http://perfbar.khalidlafi.com.global.prod.fastly.net/perfbar-0.0.2.min.js"></script>
	<script type="text/javascript">
	perfBar.init();

	perfBar.disable('loadTime') // it will remove the metric from the bar
	perfBar.enable('loadTime') // it will re-add the metric to the bar, with the same old value, budget, label, unit.
	</script>

	</body>
	</html>

view raw dis-en.html hosted with ❤ by GitHub

Lazy Loading

	<!DOCTYPE html>
	<html>
	<head>
	<title>PerfBar</title>
	<meta charset='utf-8'>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css">
	</head>
	<body>


	<h1>Hello Wrold!</h1>

	<!-- NOTE: Place the script at the bottom of the page for better performance https://developer.yahoo.com/blogs/ydnfiveblog/high-performance-sites-rule-6-move-scripts-bottom-7200.html -->
	<script type="text/javascript" src="http://perfbar.khalidlafi.com.global.prod.fastly.net/perfbar-0.0.2.min.js"></script>
	<script type="text/javascript">
	// this option is good if you're lazy loading the PerfBar script.
	// Because without it the Navigation timing metrics won't work since they are attached to the onload event
	perfBar.init({lazy: true});

	</script>

	</body>
	</html>

view raw lazy.html hosted with ❤ by GitHub

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

PerfBar

Features

Basic usage

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

Custom metrics

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

Update metric

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

Latency

First Paint

Number of requests

Front End

Back End

Response Duration

Request Duration

Redirects count

Load Event duration

DOM Content loaded

Processing Duration

DOM elements

CSS

JavaScript

Images

Data URI images

Inline CSS

Inline JavaScript

3rd Party CSS

3rd Party JavaScript

Demo

Install

NPM

Download

Test new metric