Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/AvraamMavridis/gulp-louis
Gulp task to analyze website performance.
https://github.com/AvraamMavridis/gulp-louis
Last synced: about 2 months ago
JSON representation
Gulp task to analyze website performance.
- Host: GitHub
- URL: https://github.com/AvraamMavridis/gulp-louis
- Owner: AvraamMavridis
- Created: 2015-02-15T07:45:39.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-05-23T12:05:28.000Z (over 4 years ago)
- Last Synced: 2024-07-17T16:47:43.361Z (2 months ago)
- Language: JavaScript
- Size: 617 KB
- Stars: 36
- Watchers: 3
- Forks: 9
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Louis
**Louis** is a gulp task that is used to analyze the performance of a website against a performance budget.
[](http://badge.fury.io/js/gulp-louis)
[](https://greenkeeper.io/)
[](https://nodei.co/npm/gulp-louis/)
## Introduction
There are many definitions of the **performance budget** on the web, my favourite is from Zachary Brady.
***A performance budget provides values against which design, development, content, or any aspect of a site that may affect performance, can be made.***
The aim of the plugin is to analyze the performance of the website against a performance bugdet. There are various metrics against which we can set a performance budget e.g. number of requests, imageSize etc.
## Getting started
#### Installation
#### 1. [Usage](#usage)
#### 2. [Example](#example)
#### 3. [Output](#output)
#### 4. [Options](#options)
#### 5. [Performance Budget Options](#performance-budget-options)
#### 6. [Change log](#change-log)
## Getting Started
### Usage
```bash
$ npm install --save-dev gulp-louis
```
```js
import louis = require('gulp-louis');
gulp.task('louis', function(done) {
louis({
timeout: 60,
viewport: '1280x1024',
engine: 'webkit',
userAgent: 'Chrome/37.0.2062.120',
noExternals: false,
performanceBudget: {
requests: 2,
medianLatency: 10,
slowestResponse: 1000
}
}, done);
});
gulp.task('default', ['louis']);
```
### Example
*Example 1 (with specified url)*
```js
louis({
url: 'http://localhost:8000/',
timeout: 200,
performanceBudget: {
requests: 10,
domComplete: 3000
}
})
```
*Example 2 (without url)*
This will launch a server and look for an **index.html** in the same folder as the gulpfile.js, then it will analyze the performance of this website.
```js
louis({
timeout: 10,
performanceBudget: {
requests: 10,
headersSize: 200
}
})
```
### Output
*Output with specified performance budget*
*Output without specified performance budget*
### Options
**All options are optional**
* `url` url of the website to be analyzed, if it is not specified **Louis** will launch a server and load the **index.html** if this exist on the same directory as the **gulpfile.js**
* `timeout` timeout for the run (defaults to 15 seconds)
* `viewport` dimensions ('1280x1024' is the default)
* `engine` webkit or gecko (webkit is default)
* `userAgent` default is Chrome/37.0.2062.120
* `noExternals` true or false, default is false, block requests to 3rd party domains
* `outputFileName` name of file to write the results, default is "results.json"
* `performanceBudget` object with metrics, see below
* `proxy` specifies the (optional) proxy server to use
### Performance Budget Options
The performance budget option can contain some or all of these values:
```requests, gzipRequests, postRequests, httpsRequests, notFound, bodySize, contentLength, httpTrafficCompleted, timeToFirstByte, timeToLastByte, ajaxRequests, htmlCount, htmlSize, cssCount, cssSize, jsCount, jsSize, jsonCount, jsonSize, imageCount, imageSize, videoCount, videoSize, webfontCount, webfontSize, base64Count, base64Size, otherCount, otherSize, cacheHits, cacheMisses, cachePasses, cachingNotSpecified, cachingTooShort, cachingDisabled, oldCachingHeaders, consoleMessages, cookiesSent, cookiesRecv, domainsWithCookies, documentCookiesLength, documentCookiesCount, documentHeight, commentsSize, whiteSpacesSize, DOMelementsCount, DOMelementMaxDepth, nodesWithInlineCSS, imagesScaledDown, imagesWithoutDimensions, DOMidDuplicated, hiddenContentSize, DOMmutationsInsertsv, DOMmutationsRemoves, DOMmutationsAttributes, DOMqueries, DOMqueriesWithoutResults, DOMqueriesById, DOMqueriesByClassName, DOMqueriesByTagName, DOMqueriesByQuerySelectorAll , DOMinserts, DOMqueriesDuplicated, DOMqueriesAvoidable, domains, maxRequestsPerDomain, medianRequestsPerDomain, eventsBound, eventsDispatched, globalVariables, globalVariablesFalsy, headersCount, headersSentCount, headersRecvCount, headersSize, headersSentSize, headersRecvSize, headersBiggerThanContent, jQueryVersion, jQueryVersionsLoaded, jQueryOnDOMReadyFunctions, jQueryWindowOnLoadFunctions, jQuerySizzleCalls, jQueryEventTriggers, jQueryDOMReads, jQueryDOMWrites, jQueryDOMWriteReadSwitches, documentWriteCalls, evalCalls, jsErrors, closedConnections, localStorageEntries, redirects, redirectsTime, repaints, firstPaint, requestsToDomContentLoaded, requestsToDomComplete, assetsNotGzipped, assetsWithQueryString, assetsWithCookies, smallImages, smallCssFiles, smallJsFiles, multipleRequests, timeToFirstCss, timeToFirstJs, timeToFirstImage, domInteractive, domContentLoaded, domContentLoadedEnd, domComplete, timeBackend, timeFrontend, statusCodesTrail, windowAlerts, windowConfirms, windowPrompts, bodyHTMLSize, iframesCount, smallestResponse, biggestResponse, fastestResponse, slowestResponse, smallestLatency, biggestLatency, medianResponse, medianLatency```
Example:
```js
performanceBudget = {
cssSize: 200
jsSize: 2000
consoleMessages: 0
imageSize: 5000
domContentLoaded: 2000
smallestLatency: 1000
}
```
### Change log
#### [2.3.2] - 2018-03-16
- Fix / appended to outputFile causing throw in unix systems
#### [2.3.1] - 2018-02-28
- Update dependencies
#### [2.3.0] - 2016-10-07
- Added proxy-option
#### [2.2.1] - 2016-09-29
- Update dependencies
#### [2.2.0] - 2016-09-29
- Add outputFilename-option
#### [2.1.1] - 2016-09-16
- Update dependencies
#### [2.1.0] - 2016-09-15
- Change the results.json to a file with the same of tested domain.
#### [2.0.0] - 2016-08-29
- Run phantomas from local path
- Update depedencies
#### [1.1.0] - 2016-08-19
- Fix phantomas path
#### [1.0.14] - 2015-11-23
Bug Fixes
- Fix path to phantomas command …
- Add missing gulp-connect dependency
- Change "main" script to "louis.js"
#### [1.0.10] - 2015-02-21
#### [1.0.9] - 2015-02-21
#### [1.0.8] - 2015-02-20
#### [1.0.7] - 2015-02-17
#### [1.0.0] - 2015-02-16
## License
Released under the MIT license.