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 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 onReportonReportonReport(callback: WebVitalsCallback) => Promise<void>(callback: WebVitalsCallback) => Promise<void>
Registers a callback to receive Web Vitals performance data. Pass
nullto unregister a previously registered callback.
WebVitalsCallback
A callback function that receives a Web Vitals report containing performance metrics.
- payload
WebVitalsReport
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
