What is this:
Demo:
http://performance.devbproto.com/
Landing page
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 (HTML test errors, warnings etc), Google PageSpeed Insights (a lot information, for example: how to fix main load/performance issues, load times...) and dev-perf (number of 404 errors, number of images without dimensions etc), The information collected is then displayed in an AngularJS based webpage.
Setting up:
First install this package locally to your project:
npm install devbridge-perf-tool --save-dev
And add it to your gulpfile.js:
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 if its information is not needed for you.
options.runHtmlTest
Type: bool
Default value: true
Description: You can disable w3cjs if its information is not needed for you.
options.runGoogleSpeedTest
Type: bool
Default value: true
Description: You can disable Google 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 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 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
};