sitespeed.io/docs/documentation/sitespeed.io/configure-html/index.md

layout	title	description	keywords	nav	category	image	twitterdescription
default	Configure the HTML output	Configure and change the default HTML.	configuration, html, documentation, web performance, sitespeed.io	documentation	sitespeed.io	https://www.sitespeed.io/img/sitespeed-2.0-twitter.png	Configure the HTML output

Documentation / Configure the HTML output

Configure the HTML output

{:.no_toc}

• Let's place the TOC here {:toc}

You can configure some parts of the HTML report that is generated by sitespeed.io.

Configure page metrics

When your test, the pages page is generated where you can compare all the URLs that has been tested. By default we cherry picked a couple metrics that is how in the table but you can also change them. This is useful if there are a specific metric that is your main focus.

{: .img-thumbnail}

You can configure which metrics to show in the columns with the --html.pageSummaryMetrics cli parameter. Pass it multiple times to add multiple columns or use the configuration file json and create an array with metrics that you want use.

docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:{% include version/sitespeed.io.txt %} --html.pageSummaryMetrics timings.pageLoadTime  --html.pageSummaryMetrics requests.total https://www.sitespeed.io 

Or use a configuration json:

"html": {
    "pageSummaryMetrics": [
      "transferSize.total",
      "requests.total",
      "thirdParty.requests",
      "transferSize.javascript",
      "transferSize.css",
      "transferSize.image",
      "score.performance"
    ]
}

Which metric can you use? It is the same setup as when you create a budget file. At the moment you can choose between these metrics.

Let us know if there are any metrics that you are missing!

Configure page summary boxes

The start page with summary boxes are also configurable. You can choose which metrics to show.

{: .img-thumbnail}

It follows the same pattern as page columns and uses the same friendly names.

docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:{% include version/sitespeed.io.txt %} --html.summaryBoxes timings.pageLoadTime  --html.summaryBoxes requests.total https://www.sitespeed.io 

Or use a configuration json:

"html": {
    "summaryBoxes": [
      "transferSize.total",
      "requests.total",
      "thirdParty.requests",
      "transferSize.javascript",
      "transferSize.css",
      "transferSize.image",
      "score.performance"
    ]
}

Configure the thresholds for red/yellow/green summary boxes

You can override the default configurations that defines the colors of the summary boxes. The default code is set here and is a good starting point for what you can set.

Define your JSON file with the limits and feed it to sitespeed.io with --html.summaryBoxesThresholds.

Say that you are testing on a slow 3g connection and the default settings for first paint is unrealistic (1000 ms for green and over 2000 gives you red). Create a JSON file name it summaryLimits.json:

{
    "timings": {
        "firstPaint": { 
            "green": 2000, 
            "yellow": 4000 
        }
    }
}

And then run:

docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:{% include version/sitespeed.io.txt %} --html.summaryBoxesThresholds summaryLimits.json https://www.sitespeed.io 

Configurable metrics

Here are the different metrics that you can show in the summary boxes or in the page HTML. Any metric missing? Make a PR or create a issue!

{% include_relative friendlynames.md %}

Show your script in the HTML output

If you are running tests using scripting it can sometimes be hard to know what you are actually testing when you look at the HTML result. Then add --html.showScript to include a link on the result page.

{: .img-thumbnail}

Link to open your HAR files in compare

If you push your result HTML pages to S3 or another public server, you can use https://compare.sitespeed.io or your own deployed version of compare to compare your HAR files.

You add the link to the HTML result by --html.compareURL https://compare.sitespeed.io/ and you will then have a button in your result where you can compare you HAR file.

Make sure that your server has correct CORS settings so that compare.sitespeed.io (or your own server) can get the HAR file.

{: .img-thumbnail}