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

Usage

$ npm install --save-dev gulp-louis

import louis = require('gulp-louis');

gulp.task('louis', function() {
  louis({
    timeout: 60,
    viewport: '1280x1024',
    engine: 'webkit',
    userAgent: 'Chrome/37.0.2062.120',
    noExternals: false,
    performanceBudget: {
      requests: 2,
      medianLatency: 10,
      slowestResponse: 1000
    }
  });
});

gulp.task('default', ['louis']);

Example

Example 1 (with specified url)

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.

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:

performanceBudget = {
  cssSize: 200
  jsSize: 2000
  consoleMessages: 0
  imageSize: 5000
  domContentLoaded: 2000
  smallestLatency: 1000
}

Change log

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

nning/gulp-louis