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?