Louis

Louis is a gulp task that is used to analyze the performance of a website against a performance budget.



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
#### 2. Example
#### 3. Output
#### 4. Options
#### 5. Performance Budget Options
#### 6. Change log

Getting Started

$3

``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']);
`

$3

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
}
})
`

$3

Output with specified performance budget

!Screenshot1

Output without specified performance budget

!Screenshot1

$3

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

$3

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
}
``

$3

#### [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.