Web Vitals

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

Anchor to web vitalsWeb 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.

Anchor to onReport onReport (callback: ) => Promise<void>

WebVitalsCallback

metrics
```
WebVitalsMetric
```

void | Promise<void>

void | Promise<void>

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

WebVitalsMetric

WebVitals API

id
```
string
```
name
```
string
```
value
```
number
```

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

Examples

// 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);

Examples

Callback onReport

Default

// 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);

Anchor to relatedRelated

ReferenceApp Performance Guidelines

APIWeb Vitals Debug

Was this page helpful?