Custom Metrics

WebPagetest can execute arbitrary javascript at the end of a test to collect custom metrics.  These can be defined statically in the server configuration or be specified at runtime on a per-test basis.

The javascript should be written as if it were executing inside of a function call and return the custom metric at the end.  Here is an example that finds the meta viewport for the page and extracts it:

var viewport = undefined;
var metaTags=document.getElementsByTagName("meta");
for (var i = 0; i < metaTags.length; i++) {
    if (metaTags[i].getAttribute("name") == "viewport") {
        viewport = metaTags[i].getAttribute("content");
        break;
    }
}
return viewport;

Supported Browsers:

  • Internet Explorer
  • Chrome
  • Firefox

Things to watch out for:

  • The scripts must be blocking and return the data of interest directly.  Async operations (timers, RequestAnimationFrame, Ajax requests, etc) are not supported.
  • Custom metrics live in the same namespace as the built-in metrics and can override built-in metrics if they have the same name.
  • Metric names should be simple alpha-numeric and probably without spaces.

Specifying custom metrics at test time:

The text input box for the metrics takes the metrics definitions in the form of an ini file for simplicity:

[metric-name]
<code>

[metric-2-name]
<metric 2 code>

Here is an example that collects 3 different metrics (2 numerical and one string):

[iframe-count]
return document.getElementsByTagName("iframe").length;

[script-tag-count]
return document.getElementsByTagName("script").length;

[meta-viewport]
var viewport = undefined;
var metaTags=document.getElementsByTagName("meta");
for (var i = 0; i < metaTags.length; i++) {
    if (metaTags[i].getAttribute("name") == "viewport") {
        viewport = metaTags[i].getAttribute("content");
        break;
    }
}
return viewport;

If you are using the API, the form field for the custom metrics is "custom" - just make sure to properly encode the content (url encode if using GET or form encode if POSTing).

Specifying custom metrics statically (private instances):

Each metric lives as a separate file under settings/custom_metrics with a .js extension.  The file name will be the recorded name of the metric and the result of executing the code will be the value.

For example, a file settings/custom_metrics/meta-viewport.js would define a custom variable meta-viewport and the contents would look like:

var viewport = undefined;
var metaTags=document.getElementsByTagName("meta");
for (var i = 0; i < metaTags.length; i++) {
    if (metaTags[i].getAttribute("name") == "viewport") {
        viewport = metaTags[i].getAttribute("content");
        break;
    }
}
return viewport;
Comments