Puppeteer

Basic cards

Basic cards are 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

Puppeteer is a Node.js library that provides a high-level API to control Chrome/Chromium, allowing us to measure real browser performance metrics in a controlled environment.

  • Good (< 2.5s)
  • Needs improvement (2.5s to 4s)
  • Poor (> 4s)
Values are measured directly in Chrome and may vary between runs. The thresholds follow the same guidelines as Lighthouse and CrUX for consistency.

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.

Time To First Byte0.62s
good
First Contentful Paint3.79s
poor
Largest Contentful Paint3.79s
to improve
Interaction to Next Paint–
Cumulative Layout Shift0.02
good

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]
Interaction to Next Paint–
[home]
Cumulative Layout Shift0.02
good
[home]
Largest Contentful Paint3.79s
to improve
[article]
Interaction to Next Paint–
[article]
Cumulative Layout Shift0.47
poor
[article]

NumberValue

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

Largest Contentful Paint2.53s
to improve
[run 0]
Interaction to Next Paint–
[run 0]
Cumulative Layout Shift0.00
good
[run 0]
Largest Contentful Paint4.05s
poor
[run 1]
Interaction to Next Paint–
[run 1]
Cumulative Layout Shift0.02
good
[run 1]
Largest Contentful Paint3.79s
to improve
[run 2]
Interaction to Next Paint–
[run 2]
Cumulative Layout Shift0.02
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 Paint2.53s
to improve
[run 0 – home]
Interaction to Next Paint–
[run 0 – home]
Cumulative Layout Shift0.00
good
[run 0 – home]
Largest Contentful Paint4.05s
poor
[run 1 – home]
Interaction to Next Paint–
[run 1 – home]
Cumulative Layout Shift0.02
good
[run 1 – home]
Largest Contentful Paint3.79s
to improve
[run 2 – home]
Interaction to Next Paint–
[run 2 – home]
Cumulative Layout Shift0.02
good
[run 2 – home]
Largest Contentful Paint1.78s
good
[run 0 – article]
Interaction to Next Paint–
[run 0 – article]
Cumulative Layout Shift0.47
poor
[run 0 – article]
Largest Contentful Paint3.79s
to improve
[run 1 – article]
Interaction to Next Paint–
[run 1 – article]
Cumulative Layout Shift0.47
poor
[run 1 – article]
Largest Contentful Paint3.98s
to improve
[run 2 – article]
Interaction to Next Paint–
[run 2 – article]
Cumulative Layout Shift0.47
poor
[run 2 – article]

NumberValue

Time to First Byte (TTFB)

0.62s
good

NumberValue

First Contentful Paint (FCP)

3.79s
poor

NumberValue

Largest Contentful Paint (LCP)

3.79s
to improve

NumberValue

Interaction to Next Paint (INP)

–

NumberValue

Cumulative Layout Shift (CLS)

0.02
good