---
title: Web Vitals API
description: >-
  The Web Vitals API allows you to access performance metrics for your app
  directly through App Bridge. Use this API to monitor Core Web Vitals and send
  metrics to your own monitoring service.
source_url:
  html: >-
    https://shopify.dev/docs/api/app-home/apis/device-and-platform-integration/web-vitals-api
  md: >-
    https://shopify.dev/docs/api/app-home/apis/device-and-platform-integration/web-vitals-api.md
api_name: app-home
---

# Web Vitals API

The Web Vitals API allows you to access performance metrics for your app directly through App Bridge. Use this API to monitor [Core Web Vitals](https://web.dev/vitals/) and send metrics to your own monitoring service.

### Use cases

* **Performance monitoring:** Register a callback to receive Web Vitals performance data for your app.
* **Quality metrics:** Monitor app performance metrics to identify and fix performance issues.
* **Analytics integration:** Report Web Vitals data to your analytics service for tracking over time.
* **Diagnostics:** Use alongside the debug configuration option to surface performance data during development.

### Methods

The Web Vitals API provides an `onReport` method that registers a callback function to receive Web Vitals data. It allows you to monitor and analyze your app's performance in the Shopify admin.

* **onReport**

  **(callback: WebVitalsCallback) => Promise\<void>**

  Registers a callback to receive Web Vitals performance data. Pass `null` to unregister a previously registered callback.

### WebVitalsCallback

A callback function that receives a Web Vitals report containing performance metrics.

* payload

  ```ts
  WebVitalsReport
  ```

returns

```ts
void | Promise<void>
```

### WebVitalsReport

A report containing an array of Web Vitals performance metrics.

* metrics

  The array of Web Vitals metric measurements included in this report.

  ```ts
  WebVitalsMetric[]
  ```

### WebVitalsMetric

A single Web Vitals performance metric measurement.

* country

  The country code where the metric was collected, if available.

  ```ts
  string
  ```

* id

  A unique identifier for this metric measurement instance.

  ```ts
  string
  ```

* name

  The name of the metric, such as \`LCP\`, \`FCP\`, \`CLS\`, \`INP\`, \`TTFB\`, or \`FID\`.

  ```ts
  string
  ```

* value

  The measured value of the metric. Units depend on the metric name (milliseconds for timing metrics, unitless for CLS).

  ```ts
  number
  ```

Examples

### Examples

* ####

  ##### Description

  Track Core Web Vitals for your app. This example registers a callback that sends performance metrics to your monitoring service.

  ##### js

  ```js
  // Define the callback function
  const callback = async (metrics) => {
      const monitorUrl = 'https://yourserver.com/web-vitals-metrics';
      const data = JSON.stringify(metrics);

      navigator.sendBeacon(monitorUrl, data);
  };

  // Register the callback
  shopify.webVitals.onReport(callback);
  ```

***

## Related

[Reference - App Performance Guidelines](https://shopify.dev/docs/apps/build/performance/admin-installation-oauth)

[API - Web Vitals Debug](https://shopify.dev/docs/api/app-home/apis/config#config-propertydetail-debug)

***