Recipes

Customizing the UI

Last updated by
Harlan Wilton
in doc: clean up.

Introduction

Unlighthouse's client interface can be customized to display the metrics most relevant to your needs. Modify columns, add custom data, and tailor the UI to your workflow.

Customizing Columns

Replace or add columns to display specific Lighthouse metrics:

Example: Replace FCP with Server Response Time

import { defineUnlighthouseConfig } from 'unlighthouse/config'

export default defineUnlighthouseConfig({
  hooks: {
    'resolved-config': function (config) {
      config.client.columns.performance[2] = {
        cols: 1,
        label: 'Response Time',
        tooltip: 'Time for the server to respond',
        sortKey: 'numericValue',
        key: 'report.audits.server-response-time',
      }
    },
  },
})
See the Column API Reference for all available column options.
Did this page help you?