Lighthouse

Basic cards

The simplest widgets available.

Content Card

Supports no metrics – you can simply use content.before and content.after to render markdown to add any comments or explanations throughout your dashboard.

All other widgets support the same behavior on content.before and content.after as the Content Card.

ContentCard

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

ContentCard

Performance

Lighthouse is a tool that simulates loading your page under specific conditions to help you audit performance, accessibility, and more.

  • Good (< 2.5s)
  • Needs improvement (2.5s to 4s)
  • Poor (> 4s)
Values are estimated and may vary. The performance score is calculated directly from these metrics. See calculator

Number Value

Supports 1 or more records and displays the value (in the unit selected) as well as the relative threshold for good, needs to improve, or poor.

You can read more about thresholds in the Thresholds documentation.

NumberValue

If you use a single metric, you can use markdown content to render its label and explanation

3789ms
to improve

LCP / Largest Contentful Paint

NumberValue

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

LCP / Largest Contentful Paint

3789ms
to improve

NumberValue

You can render different metrics of the same record by using URL `VARIABLE`, and they will render a label above each.

First Contentful Paint3.76s
poor
Largest Contentful Paint3.79s
to improve
Total Blocking Time352ms
to improve
Cumulative Layout Shift0.00
good
Speed Index4.39s
to improve

NumberValue

Or you can repeat the metrics for each of the URLs in a measurement by using URL `EACH_PAGE`.

Largest Contentful Paint3.79s
to improve
[home]
Total Blocking Time352ms
to improve
[home]
Cumulative Layout Shift0.00
good
[home]
Largest Contentful Paint5.19s
poor
[article]
Total Blocking Time234ms
to improve
[article]
Cumulative Layout Shift0.04
good
[article]

NumberValue

Or you can repeat for each of the runs in a measurement by using Run `EACH_RUN`.

Largest Contentful Paint13.44s
poor
[run 0]
Total Blocking Time243ms
to improve
[run 0]
Cumulative Layout Shift0.02
good
[run 0]
Largest Contentful Paint3.79s
to improve
[run 1]
Total Blocking Time664ms
poor
[run 1]
Cumulative Layout Shift0.00
good
[run 1]
Largest Contentful Paint3.76s
to improve
[run 2]
Total Blocking Time352ms
to improve
[run 2]
Cumulative Layout Shift0.00
good
[run 2]

NumberValue

Or you can even repeat for each of the runs on each of the URLs in a measurement by using both `EACH_RUN` and `EACH_PAGE`.

Largest Contentful Paint13.44s
poor
[run 0 – home]
Total Blocking Time243ms
to improve
[run 0 – home]
Cumulative Layout Shift0.02
good
[run 0 – home]
Largest Contentful Paint3.79s
to improve
[run 1 – home]
Total Blocking Time664ms
poor
[run 1 – home]
Cumulative Layout Shift0.00
good
[run 1 – home]
Largest Contentful Paint3.76s
to improve
[run 2 – home]
Total Blocking Time352ms
to improve
[run 2 – home]
Cumulative Layout Shift0.00
good
[run 2 – home]
Largest Contentful Paint5.19s
poor
[run 0 – article]
Total Blocking Time234ms
to improve
[run 0 – article]
Cumulative Layout Shift0.04
good
[run 0 – article]
Largest Contentful Paint8.05s
poor
[run 1 – article]
Total Blocking Time123ms
good
[run 1 – article]
Cumulative Layout Shift0.37
poor
[run 1 – article]
Largest Contentful Paint4.28s
poor
[run 2 – article]
Total Blocking Time262ms
to improve
[run 2 – article]
Cumulative Layout Shift0.04
good
[run 2 – article]

NumberValue

First Contentful Paint (FCP)

3.76s
poor

NumberValue

Largest Contentful Paint (LCP)

3.79s
to improve

NumberValue

Speed Index (SI)

4.39s
to improve

NumberValue

Total Blocking Time (TBT)

352ms
to improve

NumberValue

Cumulative Layout Shift (CLS)

0.00
good

NumberValue

First Contentful Paint3.76s
poor
Largest Contentful Paint3.79s
to improve
Speed Index4.39s
to improve