Website performance monitoring tool

Requirements

1. A WebPageTest API key. You can get one from free here.

2. A database. Currently, SpeedTracker supports only MongoDB databases. You can set up a free instance with mLab here.

3. A free GitHub account.

4. A free Netlify account.

Setting up

1. Click the Deploy to Netlify button.

2. When taken to the Netlify website, fill in the following details:

   • DEFAULT_URL: the URL of the site you wish to test; if you want to set up multiple profiles (i.e. multiple URLs and/or WebPageTest settings) you must do so using the configuration file.

   • MONGODB_CONN_STR: the MongoDB connection string; if you created an account with mLab, this will be provided for you in their interface.

   • MONGODB_DATABASE: the name of the MongoDB database you wish to use.

   • WPT_API_KEY: your WebPageTest API key.

3. With everything configured, you can now start a test.

4. Visit your dashboard at your root URL (e.g. https://speedtracker.netlify.com). Once the test has finished, the results will be displayed in the various charts. It may take some time for the test to finish – if you don't see any data, check back in a few minutes.

Starting a test

To start a test, send a GET request to https://speedtracker.netlify.com/api/test/default. This will instruct WebPageTest to start a test on your behalf.

This response to this request includes some relevant information, such as the test ID. The userUrl property contains a link to the test status, telling you whether it's still queued, running or if it has been completed.

Depending on how busy the chosen WebPageTest instance is, the test may take several minutes – or even hours – to complete. Once finished, the results will be sent back to SpeedTracker and displayed on the dashboard.

Configuration

There is a configuration file, named speedtracker.config.js, that allows several parameters to be configured by the user.

Profiles

The profiles object can be used to configure multiple profiles. A profile is comprised of a URL for the page to be tested and a set of WebPageTest parameters that configure the test.

Example: A profile that will test https://www.bbc.co.uk/bbcone from a Cable connection, from London, doing 5 runs for each test.

const config = {
  profiles: {
    bbc: {
      name: 'BBC One',
      parameters: {
        connectivity: 'Cable',
        location: 'London_EC2',
        runs: 5,
        url: 'https://www.bbc.co.uk/bbcone'
      }
    }
  }
}

The following options are accepted (from webpagetest-api):

• location: String, location to test from
• connectivity: String, connectivity profile -- requires location to be specified -- (Cable|DSL|3GSlow|3G|3GFast|4G|LTE|Edge|2G|Dial|FIOS|Native|custom) [Cable]
• runs: Number, number of test runs [1]
• firstViewOnly: Boolean, skip the Repeat View test
• video: Boolean, capture video
• private: Boolean, keep the test hidden from the test log
• label: String, label for the test
• stopAtDocumentComplete: Boolean, stop test at document complete. typically, tests run until all activity stops
• disableJavaScript: Boolean, disable JavaScript (IE, Chrome, Firefox)
• clearCerts: Boolean, clear SSL certificate caches
• ignoreSSL: Boolean, ignore SSL certificate errors, e.g. name mismatch, self-signed certificates, etc
• disableCompatibilityView: Boolean, forces all pages to load in standards mode (IE only)
• tcpDump: Boolean, capture network packet trace (tcpdump)
• saveResponseBodies: Boolean, save response bodies for text resources
• keepOriginalUserAgent: Boolean, do not add PTST to the original browser User Agent string
• domElement: String, DOM element to record for sub-measurement
• minimumDuration: Number, minimum test duration in seconds
• tester: String, run the test on a specific PC (name must match exactly or the test will not run)
• emulateMobile: Boolean, (experimental) emulate mobile browser: Chrome mobile user agent, 640x960 screen, 2x scaling and fixed viewport (Chrome only)
• timeline: Boolean, capture Developer Tools Timeline (Chrome only)
• timelineCallStack: Boolean, set between 1-5 to include the JS call stack. must be used in conjunction with timeline (increases overhead) (Chrome only)
• chromeTrace: Boolean, capture chrome trace (about://tracing) (Chrome only)
• netLog: Boolean, capture Network Log (Chrome only)
• dataReduction: Boolean, enable data reduction on Chrome 34+ Android (Chrome only)
• userAgent: String, custom user agent string (Chrome only)
• commandLine: String, use a list of custom command line switches (Chrome only)
• login: String, username for authenticating tests (http authentication)
• password: String, password for authenticating tests (http authentication)
• sensitive: Boolean, discard script and http headers in the result
• disableHTTPHeaders: Boolean, disable saving of the http headers (as well as browser status messages and CPU utilization)
• block: String, space-delimited list of urls to block (substring match)
• spof: String, space-delimited list of domains to simulate failure by re-routing to blackhole.webpagetest.org to silently drop all requests
• customMetrics: String, execute arbitrary JavaScript at the end of a test to collect custom metrics
• authenticationType: Number, type of authentication: 0 = Basic, 1 = SNS [0]
• notifyEmail: String, e-mail address to notify with the test results
• pingback: String, URL to ping when the test is complete (the test ID will be passed as an "id" parameter)
• bandwidthDown: String, download bandwidth in Kbps (used when specifying a custom connectivity profile)
• bandwidthUp: String, upload bandwidth in Kbps (used when specifying a custom connectivity profile)
• latency: String, first-hop Round Trip Time in ms (used when specifying a custom connectivity profile)
• packetLossRate: Number, packet loss rate - percent of packets to drop (used when specifying a custom connectivity profile)
• disableOptimization: Boolean, disable optimization checks (for faster testing)
• disableScreenshot: Boolean, disable screen shot capturing
• fullResolutionScreenshot: Boolean, save a full-resolution version of the fully loaded screen shot as a PNG
• jpegQuality: Number, jpeg compression level (30-100) for the screen shots and video capture
• medianVideo: Boolean, store the video from the median run when capturing video is enabled
• htmlBody: Boolean, save the content of only the base HTML response
• tsView: String, test name to use when submitting results to tsviewdb (for private instances that have integrated with tsviewdb)
• tsViewConfigs: String, configs to use when submitting results to tsviewdb (for private instances that have integrated with tsviewdb)
• affinity: String, string to hash test to a specific test agent. tester will be picked by index among available testers
• priority: Number, change test priority (0-9) [enforced by API key, otherwise 5]
• blockAds: Boolean, block ads defined by http://adblockplus.org
• continuousVideoCapture: Boolean, capture video continuously (unstable/experimental, may cause tests to fail)
• forceSpdy3: Boolean, force SPDY version 3 (Chrome only)
• forceSoftwareRendering: Boolean, force software rendering, disable GPU acceleration (Chrome only)
• pollResults: Number, poll for results after test is scheduled at every seconds [5]
• waitResults: String, wait for test results informed by agent once complete listening on : [hostname:first port available above 8000]
• timeout: String, timeout for polling and waiting results [no timeout]
• lighthouse: Boolean, perform lighthouse test (Chrome only, Linux agent only)