Lighthouse

Score gauges

Score gauges are widgets that display circular gauges with scores from 0 to 100.

Score Gauge Lighthouse

Supports 1 or more records and shows the popularized graph from Lighthouse.

If you render more than one, it’ll show the label.

ScoreGaugeLighthouse

You can use `VARIABLE` for device/url meaning it will show what ever the user currently selects (phone or desktop, origin or exact page)

51
Performance
89
Accessibility
100
Best Practices
92
SEO

ScoreGaugeLighthouse

Or you can specifically set the device using `DESKTOP` or `PHONE` to compare them

Phone and desktop scores respectively.

51
Performance
68
Performance

ScoreGaugeLighthouse

You can use URL `EACH_PAGE` to compare all the different tests on the same device

Each test has its own score respectively.

51
Performance
66
Performance

Score Gauge Custom

Supports 1 or more metrics and allows you to create your own Lighthouse-style score gauge by defining what metrics to use and what weight to assign each.

The weights must add up to 100 for it to work as expected.

You can read more about thresholds in the Thresholds documentation.

ScoreGaugeCustom

This example recreates the exact Lighthouse Performance score calculation with its official weights

71

ScoreGaugeCustom

Or create your own score defining the metrics and weights

76

ScoreGaugeCustom

Or use a single metric with 100% weight

56

ScoreGaugeCustom

Or use metrics from both phone/desktop together

63