Documentation / Configure the HTML output

Configure the HTML output

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

The start page scorecard

The start page of the report is a scorecard that answers two questions first: how many of your pages pass, and which ones don't. The verdict card shows the number of pages passing every check, and each key metric (Largest Contentful Paint, Cumulative Layout Shift, Total Blocking Time, page weight, the Coach performance score and — when visual metrics are collected — Speed Index) gets a threshold track with the good/needs improvement/poor zones where every tested page is drawn as a dot at its median value. The Coach score is higher-is-better, so its track is mirrored with the good zone to the right. Hover a dot to see which page it is; click it to open that page's report. The site-wide median and the worst page sit next to each track, and Page by page lists every page worst first. Below that you find cards for how the median page rendered, what it is made of (bytes and requests per content type), the Coach scores and CPU metrics (long tasks, and where the CPU time went when tested with --cpu) — plus, when those plugins ran, accessibility violations (axe) and estimated CO₂ emissions. If some URLs could not be tested at all, the verdict card says so and links to the Errors tab.

Runs without browsertime data (for example CrUx-only runs) fall back to showing the classic summary boxes.

Configure page metrics

When you test, the pages page is generated where you can compare all the URLs that have been tested. Each page gets a Web Vitals verdict (good / needs improvement / poor, judged by the worst of its measured Web Vitals against the Google thresholds) and the table is ordered worst page first, so the pages that need attention surface at the top. Click a column header to re-sort, and on runs with many pages a filter box lets you narrow the table by URL. The default columns are timing-first: Largest Contentful Paint, Cumulative Layout Shift, Total Blocking Time, Speed Index (when visual metrics are collected), total transfer size, total requests and the Coach performance score — but you can change them. This is useful if there is a specific metric that is your main focus.

Page columns

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 JSON configuration file and create an array with the metrics you want to use.

docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:42.0.1 --html.pageSummaryMetrics timings.pageLoadTime  --html.pageSummaryMetrics requests.total https://www.sitespeed.io

Or use a configuration json:

"html": {
    "pageSummaryMetrics": [
      "googleWebVitals.largestContentfulPaint",
      "googleWebVitals.cumulativeLayoutShift",
      "googleWebVitals.totalBlockingTime",
      "timings.SpeedIndex",
      "transferSize.total",
      "requests.total",
      "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!

Configurable metrics

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

googleWebVitals.timeToFirstByte
googleWebVitals.firstContentfulPaint
googleWebVitals.largestContentfulPaint
googleWebVitals.interactionToNextPaint
googleWebVitals.totalBlockingTime
googleWebVitals.cumulativeLayoutShift
timings.firstPaint
timings.firstContentfulPaint
timings.largestContentfulPaint
timings.loadEventEnd
timings.fullyLoaded
timings.serverResponseTime
timings.backEndTime
timings.pageLoadTime
timings.FirstVisualChange
timings.LastVisualChange
timings.SpeedIndex
timings.ContentfulSpeedIndex
timings.PerceptualSpeedIndex
timings.VisualReadiness
timings.VisualComplete95
timings.VisualComplete99
timings.VisualComplete
cpu.totalBlockingTime
cpu.maxPotentialFid
cpu.longTasks
cpu.longTasksTotalDuration
browser.cpuBenchmark
pageinfo.cumulativeLayoutShift
pageinfo.domElements
pageinfo.documentHeight
requests.total
requests.html
requests.javascript
requests.css
requests.image
requests.font
requests.httpErrors
transferSize.total
transferSize.html
transferSize.javascript
transferSize.css
transferSize.image
transferSize.font
transferSize.favicon
transferSize.json
transferSize.other
transferSize.plain
transferSize.svg
contentSize.total
contentSize.html
contentSize.javascript
contentSize.css
contentSize.image
contentSize.font
contentSize.favicon
contentSize.json
contentSize.other
contentSize.plain
contentSize.svg
thirdParty.transferSize
thirdParty.requests
firstParty.requests
firstParty.transferSize
firstParty.contentSize
score.score
score.bestpractice
score.privacy
score.performance
lighthouse.performance
lighthouse.accessibility
lighthouse.best-practices
lighthouse.seo
lighthouse.pwa
gpsi.performance
gpsi.accessibility
gpsi.best-practices
gpsi.seo
gpsi.pwa
sustainable.totalCO2
sustainable.co2PerPageView
sustainable.co2FirstParty
sustainable.co2ThirdParty
axe.critical
axe.serious
axe.minor
axe.moderate

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

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 with --html.compareURL https://compare.sitespeed.io/ and you will then have a button in your result where you can compare your 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.

Link to scripting