Google CrUX

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

The Chrome User Experience Report (CrUX) is a dataset that reflects how real world Chrome users experience popular destinations on the web.

  • 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

3423ms
to improve

LCP / Largest Contentful Paint

75% of phone page loads experienced this value or less
between Mar 13, 2025 and Apr 9, 2025.

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

3423ms
to improve

75% of phone page loads experienced this value or less
between Mar 13, 2025 and Apr 9, 2025.

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 Byte2.14s
poor
First Contentful Paint3.45s
poor
Largest Contentful Paint3.42s
to improve
Interaction to Next Paint246ms
to improve
Cumulative Layout Shift0.00
good
Round Trip Time239ms

NumberValue

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

Largest Contentful Paint3.42s
to improve
[web.dev – /]
Interaction to Next Paint246ms
to improve
[web.dev – /]
Cumulative Layout Shift0.00
good
[web.dev – /]
Largest Contentful Paint2.71s
to improve
[web.dev … articles/lcp]
Interaction to Next Paint190ms
good
[web.dev … articles/lcp]
Cumulative Layout Shift0.03
good
[web.dev … articles/lcp]

NumberValue

Time to First Byte (TTFB)

2.14s
poor

NumberValue

First Contentful Paint (FCP)

3.45s
poor

NumberValue

Largest Contentful Paint (LCP)

3.42s
to improve

NumberValue

Interaction to Next Paint (INP)

246ms
to improve

NumberValue

Cumulative Layout Shift (CLS)

0.00
good

NumberValue

Round Trip Time (RTT)

239ms

NumberValue

LCP / Image / Time to First Byte

2197ms
poor

NumberValue

LCP / Image / Resource Load Delay

810ms

NumberValue

LCP / Image / Resource Load Duration

810ms

NumberValue

LCP / Image / Element Render Delay

1836ms

NumberValue

LCP Image Resource Load Delay810ms
LCP Image Element Render Delay1836ms
LCP Image Element Render Delay1836ms

Core Web Vitals Card

Supports 1 or more records and displays the assessment on whether those metrics are all in the good threshold. You’d almost always want to use it with LCP + INP + CLS and it’d match the Core Web Vitals assessment (all are passing or at least one is not).

It does include some logic to match the assessment (if LCP+CLS pass and INP has no data, it’ll still be considered passing).

CoreWebVitalsCard

You must send all three LCP/INP/CLS to get the correct assessment

Core Web Vitals Assessment: Failed

CoreWebVitalsCard

If you're missing any of the three on your definitions (or actual data), it'll show 'No data'

Core Web Vitals Assessment: No data

CoreWebVitalsCard

Core Web Vitals Assessment: Failed