How to use a RUM tool on Shopify development

Want to test a Shopify theme before buying and check what your core web vitals will look like?

Now it’s possible, and you just need to install the Shopify theme, Puppeteer, and a RUM(real user monitoring) tool.

Use it to generate lab data if you’re about to launch a store. Compared to Lighthouse:

1) Install a theme and add the RUM tool tracking script as a custom liquid section.

2) Run the following Puppeteer recipe. Replace youpassword with your store password to authenticate and to run the test on your dev store.

Replace the ending of each URL to test with the part of the preview URL if you’re testing a new theme:

https://yourstore.myshopify.com/?_ab=0&_bt=eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJaHAzY0dGc2NHaGhMbTE1YzJodmNHbG1lUzVqYjIwR09nWkZWQT09IiwiZXhwIjoiMjAyNi0wNC0yN1QxNDoyNjo1My4yMTBaIiwicHVyIjoicGVybWFuZW50X3Bhc3N3b3JkX2J5cGFzcyJ9fQ%3D%3D--e555e311039c6c81fd6a598f3c010deb8bed529e&_fd=0&_sc=1&key=78ce4ff587330fcba30f2b097cb488c5f998a2109121acf6dd6af5e84009fa81&preview_theme_id=154210762852

Copy the full code after the .com/ and add pb=0& to the URL:

https://yourstore.myshopify.com/?_ab=0&pb=&_bt=eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJaHAzY0dGc2NHaGhMbTE1YzJodmNHbG1lUzVqYjIwR09nWkZWQT09IiwiZXhwIjoiMjAyNi0wNC0yN1QxNDoyNjo1My4yMTBaIiwicHVyIjoicGVybWFuZW50X3Bhc3N3b3JkX2J5cGFzcyJ9fQ%3D%3D--e555e311039c6c81fd6a598f3c010deb8bed529e&_fd=0&_sc=1&key=78ce4ff587330fcba30f2b097cb488c5f998a2109121acf6dd6af5e84009fa81&preview_theme_id=154210762852

Paste it into the recipe:

await page.goto("https://yourstore.myshopify.com/collections/all/?_ab=0&pb=0&_bt=eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJaHAzY0dGc2NHaGhMbTE1YzJodmNHbG1lUzVqYjIwR09nWkZWQT09IiwiZXhwIjoiMjAyNi0wNC0yNlQxOToyOTo0Ni45NjJaIiwicHVyIjoicGVybWFuZW50X3Bhc3N3b3JkX2J5cGFzcyJ9fQ%3D%3D--30a5ee07a5de251531ddba6a6f382a8e55ccd82b&_fd=0&_sc=1&key=78ce4ff587330fcba30f2b097cb488c5f998a2109121acf6dd6af5e84009fa81&preview_theme_id=154210762852");

Add the commented-out remove_animation.css to improve CLS tracking.

3) Check the metrics on the RUM tool. Use Cloudflare web analytics, which is free:

Note that Web Analytics only displays INP above 200ms.