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 and send metrics to your own monitoring service.

Anchor to Use casesUse 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.

Anchor to MethodsMethods

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

returns

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.
```
WebVitalsMetric[]
```

WebVitalsMetric

A single Web Vitals performance metric measurement.

country
The country code where the metric was collected, if available.
```
string
```
id
A unique identifier for this metric measurement instance.
```
string
```
name
The name of the metric, such as `LCP`, `FCP`, `CLS`, `INP`, `TTFB`, or `FID`.
```
string
```
value
The measured value of the metric. Units depend on the metric name (milliseconds for timing metrics, unitless for CLS).
```
number
```

Examples

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

Examples

Description

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

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

Anchor to RelatedRelated

ReferenceApp Performance Guidelines

APIWeb Vitals Debug

Was this page helpful?