Shopify Web Vitals Debugging Not Working in Firefox

Shopify Apps

Topic summary

A developer is trying to debug LCP (Largest Contentful Paint) metrics for a Shopify embedded app using the shopify.webVitals.onReport(callback) method and a debug meta tag. While this works in Chrome, it fails completely in Firefox—the meta tag has no effect and the callback doesn’t fire.

Root cause: Firefox lacks full support for the underlying Web Vitals APIs (LCP, FID, INP) that Shopify’s debug tooling relies on. The debug meta tag is designed specifically for Chrome DevTools.

Recommended workarounds:

  • Primarily test and optimize in Chrome for now
  • Integrate Google’s web-vitals library for broader browser compatibility
  • Send collected metrics to your own backend or third-party analytics services (Google Analytics, Segment, SpeedCurve, Datadog RUM)
  • Store data in cookies/localStorage and forward during user interactions if needed

Key limitation: Shopify does not provide a direct API or endpoint to ingest Core Web Vitals data into their native performance monitoring tools. External tracking and analysis is necessary for cross-browser performance monitoring.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I’m currently working on optimizing LCP for a Shopify embedded app and have enabled web-vitals debugging using the following meta tag:

This works perfectly in Chrome, and I’m able to capture metrics using shopify.webVitals.onReport(callback).

However, in Firefox, the debug tool doesn’t seem to work:

  • The meta tag has no effect.

  • The shopify.webVitals.onReport(callback) event is not firing at all.

Has anyone else faced this issue, or is there any known workaround or fix for Firefox?

Any insights would be greatly appreciated.

Thanks in advance!

2

Hello @jaymitBeladiya

You’re right — currently, the shopify.webVitals.onReport(callback) debug tool primarily works in Chrome-based browsers, as it relies on the Web Vitals API implementation that’s fully supported there. Firefox, unfortunately, has partial or no support for some of the necessary APIs like LargestContentfulPaint (LCP), FirstInputDelay (FID), and Interaction to Next Paint (INP), which may cause the callback not to fire.

Why it doesn’t work in Firefox:- The meta tag is designed specifically for Chrome’s DevTools.

  • Firefox lacks full support for the underlying Web Vitals APIs that Shopify hooks into.

  • As a result, shopify.webVitals.onReport() won’t trigger in Firefox.

Workaround / Suggestions:1. Test and optimize primarily in Chrome for now, as that’s the officially supported environment for Shopify’s web-vitals debug tooling.

  1. If you want to collect LCP and other metrics across browsers, consider integrating Google’s web-vitals library, which has broader compatibility.

  2. Use your own performance monitoring setup with fallbacks where browser support is limited.

While it’s not ideal that the debug tooling doesn’t work cross-browser, you’re not alone — this is a known limitation.

Let me know if you have any questions or further clarifications.

1 Like
3

Hello @MandasaTech ,

Thanks for your response!

I want to collect LCP and other Core Web Vitals across all browsers. I’ve integrated Google’s web-vitals library successfully, but I’m not sure how to send this data to Shopify so it aligns with Shopify’s reporting or monitoring tools.

Is there a recommended way to forward the metrics collected via the web-vitals library to Shopify’s systems, or a specific API endpoint or event Shopify expects?

Any guidance on this would be greatly appreciated!

Thanks again!

4

Hello @jaymitBeladiya

Shopify doesn’t currently offer a direct API or built-in mechanism specifically for ingesting Core Web Vitals (like LCP, CLS, FID, etc.) into their performance monitoring tools. Their platform collects performance data independently, primarily from storefront rendering and customer interaction data captured on their end.

However, if you’re using the Google web-vitals library, you can still collect this data client-side and forward it to an external endpoint (like your own analytics backend or a third-party service such as Google Analytics, Segment, or a custom Shopify app) for further analysis.

Here’s what you can do:

  1. Send data to your own backend or analytics service:

    • Capture metrics using web-vitals.

    • Send the metrics to an endpoint you control (e.g., via fetch()).

    • You can store and analyze the data outside of Shopify.

  2. Integrate with Shopify indirectly:

    • If you have a Shopify custom app or script tag injected via your theme or a Shopify app, you can store the vitals temporarily in cookies or localStorage and forward them during user interactions (like checkout or cart events) to associate them with orders or sessions.

    • Optionally, use Shopify.analytics.publish() (limited use cases) or metafields on customer/session objects if relevant, though these are not intended for performance data.

  3. Use third-party monitoring tools:

    • Consider services like SpeedCurve, Calibre, or Datadog RUM, which can work alongside Shopify stores and provide Core Web Vitals tracking out-of-the-box.

Unfortunately, there’s no official Shopify endpoint to forward web-vitals data for integration with their native reports. But tracking this data externally is a great move, especially if you want granular control over performance monitoring across all browsers.

I think this may help!

1 Like