Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/devbridge/Performance

Client side performance tool
https://github.com/devbridge/Performance

Last synced: 5 days ago
JSON representation

Client side performance tool

Awesome Lists containing this project

README 

        
perf-tool

===

What is this:


Demo:


[**http://performance.devbproto.com/**](http://performance.devbproto.com/)


[**Landing page**](http://devbridge.github.io/Performance/)



---

**In short about:**


This is an `npm` package to display statistics about your web pages, information such as CSS resources count, Google PageSpeed Insights score, information on how to fix performance issues, HTML errors and more in one custom web page.



**Tech details:**


This package mainly uses three plugins [**w3cjs**](https://www.npmjs.com/package/w3cjs) (HTML test errors, warnings etc), [**Google PageSpeed Insights**](https://developers.google.com/speed/pagespeed/insights) (a lot information, for example: how to fix main load/performance issues, load times...) and [**dev-perf**](https://github.com/gmetais/grunt-devperf) (number of 404 errors, number of images without dimensions etc), The information collected is then displayed in an AngularJS based webpage.



---

Usage:

---



**Setting up:**



First install this package locally to your project:

```

npm install devbridge-perf-tool --save-dev

```



And add it to your gulpfile.js:



```javascript

require('gulp').task('perf-tool', function () {

	var options = {

    	siteURL:'http://www.google.com',

        sitePages: ['/', '/voice']

	};

	return require('devbridge-perf-tool').performance(options);

});

```

After running this task, launch browser and go to your hosted website with installed perf-tool by the folowing url: **```YourHost/perf-tool```** (example: ```localhost/perf-tool```, you can change directory ```perf-tool``` by changing property ```options.resultsFolder```)


**Available options:**


List of available options to configure and change behavior of perf-tool.




**options.siteURL** 


**Type:** ```string```


**Default value:** ```""``` (Empty string)


**Description:** Used for site base URL. You can change it depending by environment (dev, staging, live this is recommended) or leave empty and use full urls in **options.sitePages** (next option), URLs must start with protocol (example: ```http://```).




**options.sitePages** 


**Type:** ```string [ ]```


**Default value:** ```[ ]``` (Empty array)


**Description:** Used to generate site map with **options.siteURL** (example: ```options.siteURL + options.sitePages[i]``` ). You can use full urls (example: ```options.sitePages = ['http://www.google.com/voice']```) by leaving options.siteURL empty or set options.siteURL and pages (example: ```options.siteURL='http://www.google.com'; options.sitePages = ['/','/voice'];``` ).




**options.runDevPerf** 


**Type:** ```bool```


**Default value:** ```true```


**Description:** You can disable [dev-perf](https://github.com/gmetais/grunt-devperf) if its information is not needed for you.




**options.runHtmlTest** 


**Type:** ```bool```


**Default value:** ```true```


**Description:** You can disable [w3cjs](https://www.npmjs.com/package/w3cjs) if its information is not needed for you.




**options.runGoogleSpeedTest** 


**Type:** ```bool```


**Default value:** ```true```


**Description:** You can disable [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) if its information is not needed for you but it is **not recommended**.




**options.googleAPIKey** 


**Type:** ```string```


**Default value:** ```""``` (Empty string)


**Description:** To test this app you can choose not to set it, but later on for live envirioments please set it.




**options.resultsFolder** 


**Type:** ```string```


**Default value:** ```"./perf-tool"```


**Description:** Folder where collected results formated by this task are put (if folder does not exist it will be created, but path where it is created is not checked).




**options.smallerDevperfOutput** 


**Type:** ```bool```


**Default value:** ```true```


**Description:** Whether or not make devperf output smaller (while runing task and [dev-perf](https://github.com/gmetais/grunt-devperf) writes to console).




**options.logFilterKeys** 


**Type:** ```bool```


**Default value:** ```false```


**Description:** Whether or not webpage will log **filter keys** (explanaition on next option) to console.




**options.minimumPassScore** 


**Type:** ```int```


**Default value:** ```80```


**Description:** Minimum pass score ([Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) score), failed pass minimum score results will be marked red.




**options.translations** 


**Type:** ```dictionary```


**Description:** this is a dictionary with key **```filter key```** and value either ```string``` or ```bool false```. It is used for displaying human readable names for collected information or disaibling it by setting it's value to false, if no name is found in current (user defined dictionary) it is searched in default distionary ```./node_modules/devbridge-perf-tool/settings.txt``` if value not found it is autogenerated by magical function.


**Example:**


```

options.translations = {

	"desktop.formattedResults.locale":"Locale",

    "devperf.ajaxRequests":"Ajax Requests",

    "html.context.old":false

};

```



[![Analytics](https://ga-beacon.appspot.com/UA-73039601-3/Performance/readme)](https://github.com/igrigorik/ga-beacon)