Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/gmetais/grunt-devperf

Helps front-end developers to reach a good quality and good performances, based on phantomas and grunt-phantomas.
https://github.com/gmetais/grunt-devperf

Last synced: 16 days ago
JSON representation

Helps front-end developers to reach a good quality and good performances, based on phantomas and grunt-phantomas.

Awesome Lists containing this project

README

        

# grunt-devperf

## Important!
**This project is not maintained anymore.** Please have a look at [Yellow Lab Tools](https://github.com/gmetais/YellowLabTools) and [grunt-yellowlabtools](https://github.com/gmetais/grunt-yellowlabtools) for replacements.

Helps front-end developers to reach a good quality and good performances, based on [phantomas](https://github.com/macbre/phantomas) and [grunt-phantomas](https://github.com/stefanjudis/grunt-phantomas).

Day after day, while working on your project, keep an eye on performance metrics and get warnings for things you should optimize.

[![Dependency Status](https://gemnasium.com/gmetais/grunt-devperf.svg)](https://gemnasium.com/gmetais/grunt-devperf)

## Install method 1: i don't care about Grunt

**Use this minimalist installation if you just want to launch some quick tests.**

You need NodeJS v0.8 or higher. If you don't have it, go to http://nodejs.org and grab the latest version.

1) Create a directory for your grunt-devperf installation, anywhere you want. Let's call it `devperf`:
```shell
mkdir devperf
cd devperf
```

2) Install Grunt globally:
```shell
npm install grunt-cli -g
```

3) Install grunt-devperf locally:
```shell
npm install grunt-devperf
```

4) Copy the example `Gruntfile.js` to the root of your `devperf` directory:
```shell
cp node_modules/grunt-devperf/demo/smallest-config/Gruntfile.js ./
```

5) Then edit this copy of `Gruntfile.js` to insert your own list of URLs.

**It's done!** You can launch your first test with this command:
```shell
grunt
```

## Install method 2: i already love Grunt

This plugin requires Grunt `~0.4.4`.

Install the plugin:
```shell
npm install grunt-devperf --save-dev
```

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

```js
grunt.loadNpmTasks('grunt-devperf');
```

I recommand using it as a part of your Continuous Integration system, but you can also simply use it locally while developping.

## Setup the "devperf" task

### Overview
In your project's Gruntfile, add a section named `devperf` to the data object passed into `grunt.initConfig()`.

```js
grunt.initConfig({
devperf: {
options: {
urls: [
'http://www.google.com'
]
}
}
});
```

### Options

#### options.urls
Type: `Array of Strings`
Default value: `['http://www.google.fr']`

The list of URLs you want to test. Don't forget the protocol (http:// or https://), even on localhost.

#### options.numberOfRuns
Type: `Integer`
Default value: `5`

The number of times you want phantomas to call each page.
A higher number of runs could give a better accuracy, but note that they are run in parallel and that your machine's bandwith may suffer.

#### options.timeout
Type: `Integer`
Default value: `120`

The time after which phantomas should cancel a run.

#### options.openResults
Type: `Boolean`
Default value: `false`

Automatically opens the browser on the results page when the devperf task is finished.

#### options.resultsFolder
Type: `String`
Default value: `./devperf`

This is the folder where the results will be generated, including grunt-phantomas reports.
It can be relative to your project: `./my-folder` (you might want to add this folder to your `.gitignore` file).
Or it can be anywhere else in your file system: `/var/www/devperf`

### Usage Examples

In this example, several Urls are tested

```js
grunt.initConfig({
devperf: {
options: {
urls: [
'http://www.google.com',
'http://www.yahoo.com',
'http://www.github.com',
'http://www.facebook.com'
],
numberOfRuns: 5,
timeout: 120,
openResults: true,
resultsFolder: './devperf'
}
}
});
```
Then, open the `index.html` file with your browser to see the results. It is located in the results folder (`./devperf/`by default).

Results snapshot:
![grunt-devperf example results](https://raw.github.com/gmetais/grunt-devperf/master/demo/img/results.png)

About the results:
- Yes it looks like a console but it's a web page!
- Some metrics might have decimals, because they are averages of multiple runs.
- The link to the grunt-phantomas report will give you tons of details, very helpful for debugging.
- The files size are not reliable (sometimes gzipped, sometimes not). Check issue #6.

### Warnings list

#### Default list of warnings

When a metric is greater than the limit, the message is displayed.

Metric | Limit | Message
--------------------------|:-------:|--------------------------------------------------------------------
requests | 200 | Too many requests, i guess your site is slow, isn't it?
cssCount | 6 | Too many CSS files, use concatenation
jsCount | 12 | Too many JS files, use concatenation
imageCount | 30 | Too many images, use lazyloading
smallImages | 20 | Too many small images (<2kB), build sprites
imageSize | 512000 | Total image size (bytes) is too high, try image optimisation
webfontCount | 4 | Too many custom fonts, tell the designer you don't want that
notFound | 0 | Number of 404 errors
multipleRequests | 1 | Some static assets are requested multiple times
imagesWithoutDimensions | 5 | Number of images without dimensions
commentsSize | 1000 | Reduce size of comments in HTML
whiteSpacesSize | 8000 | Reduce the number of whitespaces in HTML
DOMelementsCount | 2000 | Reduce the number of DOM elements
documentWriteCalls | 0 | Remove all document.write() calls
jsErrors | 0 | Number of Javascript errors
consoleMessages | 0 | Remove console.log or console.*whatever*
DOMqueries | 200 | Reduce number of DOM queries
DOMqueriesDuplicated | 30 | Many duplicated DOM queries, try to save results into variables
DOMinserts | 100 | Reduce number of DOM insertions
jQuerySizzleCalls | 300 | Reduce number of Sizzle calls (= jQuery DOM queries)
headersSentSize | 20000 | Reduce size of headers sent (cookies?)

#### Modifying the warnings

In the Gruntfile, you can change any of them by adding a `warnings` option this way:

```js
grunt.initConfig({
devperf: {
options: {
urls: [
'http://www.google.com'
],
warnings: [
{
// Changing the limit for this variable
variable : "jsErrors",
limit : 42,
},
{
// Changing the message
variable : "jQuerySizzleCalls",
message : "I like this message best"
},
{
// Changing the limit and the message
variable : "DOMelementsCount",
limit : 200,
message: "DOM elements number is my big issue so i reduced the limit"
},
{
// Disabling a warning (-1 is infinite)
variable : "consoleMessages",
limit : -1
},
{
// Adding one of the numerous Phantomas variables not handled by grunt-devperf
variable : "jsonCount",
limit : 5,
message : "I really care about having a small number of JSON requests"
}
]
}
}
});
```

You can find the complete list of Phantomas variables and their descriptions [here](https://github.com/macbre/phantomas#metrics).
If you think one of these variables deserves a warning in grunt-devperf, don't hesitate to open an issue!

### Advanced Phantomas options

#### options.phantomasOptions
Type: `Object`
Default value: `{}`

Use this if you need to send parameters to `phantomas`. You can find the list of parameters [here](https://github.com/macbre/phantomas#parameters). You can enable some features such as proxy, authentification or domain blocking.

Example:
```js
grunt.initConfig({
devperf: {
options: {
urls: [
'http://www.google.com'
],
phantomasOptions: {
'proxy': 'localhost:8080',
'no-externals': true
}
}
}
});
```

## Contributing
This project is in early stage (beta). You can help by reporting any issue, giving your feedback or coding new functionnalities.

## TODO
- Write tests
- Create profiles for phones and tablets (force viewport and UA, decrease some of the limits)

## Author
Gaël Métais. I'm a webperf freelance based in Paris. I can also help your company about Web Performances, visit [my website](https://www.gaelmetais.com).