Debug web vitals not working

Shopify Apps

Topic summary

Core issue: Shopify’s web vitals debugging via shopify.webVitals.onReport is not reliably emitting metrics (e.g., LCP) or sending beacons to a monitoring URL.

What was tried:

  • Standard setup with , app-bridge.js, and onReport callback using navigator.sendBeacon; no console logs or network requests observed.
  • Alternative tools: the web-vitals package and the PerformanceObserver API; reported as not working seamlessly within Shopify.

Observed behaviors/workarounds:

  • Intermittent logging when navigating via Shopify App Bridge’s left-side navigation; sometimes prints results.
  • Adding a head-level configuration (snippet not visible/missing in the post) logs LCP and other metrics to the console, but does not enable sending to an external URL.
  • Logs may appear only after a user click event; interaction seems to trigger reporting.

Key terms:

  • LCP (Largest Contentful Paint): time until main content is visible.
  • Web Vitals: Google’s performance metrics (e.g., LCP, FID, CLS).
  • PerformanceObserver: browser API to observe performance entries.

Status: No consistent fix or official resolution. Current guidance relies on user interaction-triggered logs and console-only debugging; sending metrics externally remains unresolved.

Summarized with AI on December 13. AI used: gpt-5.
1

Hello,

recently ive attempted to get web vital debugging working to have a better insight into LCP etc.

Im using the following code.

    <meta name="shopify-debug" content="web-vitals" />
    <meta name="shopify-api-key" content=":)" />
    <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
    <script>
      function processWebVitals(metrics) {
        const monitorUrl = "https://cock.com/web-vitals-metrics";
        const data = JSON.stringify(metrics);
        console.warn(metrics);

        navigator.sendBeacon(monitorUrl, data);
      }

      // Register the callback
      shopify.webVitals.onReport(processWebVitals);
    </script>

Nothing gets console logged about LCP or any other metric, and if watch my network activity no requests are made to [https://cock.com/web-vitals-metrics](https://cock.com/web-vitals-metrics`)
Any insight would be appreciated, thanks.

1 Like
2

Hello @Wuzzy ,

Facing same issue. Have you found any solution for it?

1 Like
3

Sadly not, ive found out that it sooometimes works, when u use the app bridges navigation on the left, it sometimes prints out the result. Ive given up on this solution, im using other tools for metrics now that dont work amazing but get the job done.

4

Hey there,

I was facing the exact same issue with the code provided by Shopify. Unfortunately, it seems that the shopify.webVitals.onReport method isn’t functioning as expected, and no metrics are being logged or sent to the specified URL. I also tried using the web-vitals package and the PerformanceObserver API to capture metrics like LCP, but neither approach worked seamlessly within the Shopify environment.

The only thing that worked for me was adding

in the of the page. This does log the LCP and other metrics to the console, which is helpful for debugging. However, the downside is that this method doesn’t allow us to send the metrics to an external URL for further analysis or monitoring.

Cheers!

5

Hello @LeoZoorix ,

It’s now working for me. You have to perform any click event then it will print logs in console.

1 Like