---
layout: default
title: Configure the HTML output
description: Configure and change the default HTML.
keywords: configuration, html, documentation, web performance, sitespeed.io
nav: documentation
category: sitespeed.io
image: https://www.sitespeed.io/img/sitespeed-2.0-twitter.png
twitterdescription: Configure the HTML output
---
[Documentation]({{site.baseurl}}/documentation/sitespeed.io/) / 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.


![Page columns]({{site.baseurl}}/img/pagecolumns.png)
{: .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.

~~~bash
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:

~~~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](#configurable-metrics).



[Let us know](https://github.com/sitespeedio/sitespeed.io/issues/new) 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.

![Summary boxes]({{site.baseurl}}/img/summary-boxes.png)
{: .img-thumbnail}


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

~~~bash
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:

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

# 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](https://github.com/sitespeedio/sitespeed.io/blob/master/lib/support/friendlynames.js) or [create a issue](https://github.com/sitespeedio/sitespeed.io/issues/new)!


~~~
{% 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.


![Link to scripting]({{site.baseurl}}/img/the-script-link.png)
{: .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](https://compare.sitespeed.io) or your own deployed version of [compare](https://github.com/sitespeedio/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](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) so that compare.sitespeed.io (or your own server) can get the HAR file.


![Link to scripting]({{site.baseurl}}/img/compare-button.png)
{: .img-thumbnail}
