---
title: Web Vitals
description: >-
  The Web Vitals API allows you to access performance metrics for your app
  directly through App Bridge.
api_name: app-bridge-library
source_url:
  html: 'https://shopify.dev/docs/api/app-bridge-library/apis/web-vitals'
  md: 'https://shopify.dev/docs/api/app-bridge-library/apis/web-vitals.md'
---

# Web Vitals

The Web Vitals API allows you to access performance metrics for your app directly through App Bridge.

## Web Vitals

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>

### WebVitalsCallback

* metrics

  ```ts
  WebVitalsMetric
  ```

void | Promise\<void>

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

```ts
export type WebVitalsCallback = (
  metrics: WebVitalsMetric,
) => void | Promise<void>;
```

### WebVitalsMetric

WebVitals API

* id

  ```ts
  string
  ```

* name

  ```ts
  string
  ```

* value

  ```ts
  number
  ```

```ts
export interface WebVitalsMetric {
  id: string;
  name: string;
  value: number;
}
```

### Examples

* #### Callback onReport

  ##### Default

  ```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

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/app-bridge-library/apis/docs/apps/build/performance/admin-installation-oauth)

[ReferenceApp Performance Guidelines](https://shopify.dev/docs/api/app-bridge-library/apis/docs/apps/build/performance/admin-installation-oauth)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/app-bridge-library/apis/config#config-propertydetail-debug)

[APIWeb Vitals Debug](https://shopify.dev/docs/api/app-bridge-library/apis/config#config-propertydetail-debug)