Helps front-end developers to maintain a good quality, based on phantomas and grunt-phantomas.
Day after day, while working on your project, keep an eye on performance metrics and get warnings for things you should optimize.
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.
- Create a directory for your grunt-devperf installation, anywhere you want. Let's call it
devperf
:
mkdir devperf
cd devperf
- Install grunt-devperf:
npm install grunt-devperf
- Install Grunt globally:
npm install grunt-cli -g
- Copy the example
Gruntfile.js
to the root of yourdevperf
directory:
cp node_modules/grunt-devperf/demo/smallest-config/Gruntfile.js .
- 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:
grunt
This plugin requires Grunt ~0.4.4
.
Install the plugin:
npm install grunt-devperf --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
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.
In your project's Gruntfile, add a section named devperf
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
devperf: {
options: {
urls: [
'http://www.google.com'
]
}
}
});
Type: Array of Strings
Default value: ['http://www.google.fr']
The list of URLs you want to test.
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.
Type: Integer
Default value: 120
The time after which phantomas should cancel a run.
Type: Boolean
Default value: false
Automatically opens the browser on the results page when the devperf task is finished.
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
In this example, several Urls are tested
grunt.initConfig({
devperf: {
options: {
urls: [
'http://www.france2.fr',
'http://www.france3.fr',
'http://www.france4.fr',
'http://www.france5.fr'
'http://www.franceo.fr'
],
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).
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.
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, 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 |
imagesWithoutDimensions | 5 | Number of images without dimensions |
commentsSize | 1000 | Reduce size of comments in HTML |
whiteSpacesSize | 5000 | 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?) |
In the Gruntfile, you can change any of them by adding a warnings
option this way:
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. If you think one of these variables deserves a warning in grunt-devperf, don't hesitate to open an issue!
This project is in early stage (beta). You can help by reporting any issue, giving your feedback or coding new functionnalities.
- Find a way to show gziped file size
- Write tests
Gaël Métais. I'm a webperf freelance based in Paris. If you understand french, you can visit my website.