---
title: "Web Vitals Module"
url: https://develop.sentry.dev/sdk/telemetry/traces/modules/web-vitals/
---

# Web Vitals Module

The SDK should auto-instrument:

* [Page Loads](https://develop.sentry.dev/sdk/telemetry/traces/modules/web-vitals.md#pageloads-transaction-conventions) as Transactions
* [Interactions](https://develop.sentry.dev/sdk/telemetry/traces/modules/web-vitals.md#interactions-span-conventions) that trigger an [INP](https://web.dev/articles/inp) as standalone Spans

## [Pageloads Transaction Conventions](https://develop.sentry.dev/sdk/telemetry/traces/modules/web-vitals.md#pageloads-transaction-conventions)

### [Properties](https://develop.sentry.dev/sdk/telemetry/traces/modules/web-vitals.md#properties)

| Property                | Description                                                                                                                                    |
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `transaction`           | A low cardinality string of the pageload route. Can be a route template if applicable to the frontend platform. e.g., `"/settings/{project}/"` |
| `contexts.trace.op`     | Always `pageload`                                                                                                                              |
| `contexts.browser.name` | The client browser on which the page was loaded. Supported values include `Chrome`, `Firefox`, `Safari`, `Opera`, and `Edge`.                  |

### [Measurements](https://develop.sentry.dev/sdk/telemetry/traces/modules/web-vitals.md#measurements)

Web Vital metrics should be captured as measurements on the pageload transaction.

```json
{
  "measurements": {
    "lcp": { "value": 2049, "unit": "millisecond" },
    "fcp": { "value": 2049, "unit": "millisecond" },
    "cls": { "value": 0.21, "unit": "" },
    "ttfb": { "value": 13, "unit": "millisecond" }
  }
}
```

| Measurement         | Description                                                                                   |
| ------------------- | --------------------------------------------------------------------------------------------- |
| `measurements.lcp`  | The [Largest Contentful Paint](https://web.dev/articles/lcp) metric detected on the pageload. |
| `measurements.fcp`  | The [First Contentful Paint](https://web.dev/articles/fcp) metric detected on the pageload.   |
| `measurements.cls`  | The [Cumulative Layout Shift](https://web.dev/articles/cls) metric detected on the pageload.  |
| `measurements.ttfb` | The [Time To First Byte](https://web.dev/articles/ttfb) metric detected on the pageload.      |

## [Interactions Span Conventions](https://develop.sentry.dev/sdk/telemetry/traces/modules/web-vitals.md#interactions-span-conventions)

### [Attributes](https://develop.sentry.dev/sdk/telemetry/traces/modules/web-vitals.md#attributes)

| Attribute     | Description                                                                                                                                                               |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `transaction` | A low cardinality string of the page route that the INP event occurred on. Can be a route template if applicable to the frontend platform. e.g., `"/settings/{project}/"` |
| `description` | If applicable, the selector string that identifies the element which the interaction occurred on. e.g. `"Sidebar > span.user > a"`                                        |
| `op`          | `ui.interaction.click`, `ui.interaction.press`, `ui.interaction.hover`, or `ui.interaction.drag`                                                                          |

### [Measurements](https://develop.sentry.dev/sdk/telemetry/traces/modules/web-vitals.md#measurements-1)

The Interaction to Next Paint metric should be captured as a measurement on the interaction span.

```json
{
  "measurements": {
    "inp": { "value": 500, "unit": "millisecond" }
  }
}
```

| Measurement        | Description                                                                                       |
| ------------------ | ------------------------------------------------------------------------------------------------- |
| `measurements.inp` | The [Interaction to Next Paint](https://web.dev/articles/inp) metric detected on the interaction. |