Find answers to common questions related to improving an app’s admin performance to meet Built for Shopify standards.
Watch the Built for Shopify: How to improve admin performance webinar to learn how to boost your apps’ admin performance to achieve Built for Shopify status. In this session, we cover why and how we measure performance benchmarks, strategies on how to optimize Web Vitals and share a first look at Shopify’s new tools to help you monitor and debug your app’s performance.
FAQ
Q1: What should I consider when selecting a server to host my application?
A: When selecting a server to host your application, there are several key factors to consider to ensure optimal performance and reliability:
- Performance and Speed: Look for servers with high processing power (CPU) and sufficient RAM to handle your application’s load. Consider the server’s disk speed (SSD vs. HDD) as well, since faster storage can improve data retrieval times.
- Scalability: Choose a hosting solution that allows you to easily scale resources up or down as your traffic fluctuates. This is crucial for maintaining performance during peak times.
- Location: The server’s geographical location can impact latency. Selecting a server that is closer to your target audience can reduce loading times and improve overall performance.
- Content Delivery Network (CDN) Integration: If your application serves a global audience, consider whether the hosting provider can easily integrate with a CDN to improve loading times by caching content closer to users.
By considering these factors, you can choose a hosting server that ensures optimal performance.
Q2: What server side strategies can help improve my web vitals scores?
A: Improving your web vitals scores—specifically LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), and INP (Interaction to Next Paint)—can significantly enhance user experience. Here are some server-side strategies to help achieve better scores:
- Optimize Server Response Times:
- Use a fast and reliable hosting solution.
- Minimize server response times by optimizing your backend code and database queries.
- Implement caching strategies (e.g., server-side caching, object caching) to reduce load times.
- Use a Content Delivery Network (CDN): A CDN can distribute your content across multiple servers around the world, reducing latency and improving load times for users regardless of their location.
- Enable Compression: Use Gzip or Brotli compression to reduce the size of your HTML, CSS, and JavaScript files before they are sent to the user’s browser. This decreases the amount of data transferred and speeds up loading times.
- Implement HTTP/2 or HTTP/3: These newer protocols improve loading performance through features like multiplexing, header compression, and server push, which can help reduce loading times.
- Optimize Image Delivery: Serve appropriately sized and compressed images to reduce loading times. Consider using modern formats like WebP or AVIF for better compression. Use responsive images with the srcset attribute to serve different image sizes based on the user’s device.
- Reduce Redirects: Minimize the use of redirects, as they add additional HTTP requests and delay page rendering.
- Implement Caching Strategies: Use browser caching to store static resources locally in the user’s browser, reducing load times on subsequent visits.
- Optimize API Responses: If your application relies on APIs, ensure that the responses are optimized and return only necessary data to reduce payload size and improve performance.
By implementing these server-side strategies, you can significantly improve your web vitals scores, leading to a better user experience and increased satisfaction. We have more details on this here.
Q3: What client side strategies can help improve my web vitals scores?
A: We wrote a whole post on this that you can find here.
Q4: How do I determine which element my LCP score is based on?
A: Utilize the debugging raw web vitals tool and look under the LCP log in the field entries to see which element was considered the largest content on the page. From there you can utilize the high-level advice here to fix them.
Q5: Will web vitals be recorded if I don’t include App Bridge?
A: To ensure that web vitals are recorded, App Bridge must be present across your entire app.
Q6: Single page / client-side rendered (CSR) apps - it’s difficult to get the LCP below the threshold consistently. It seems to vary wildly, even though the very first element we render is the LCP. Are there any improvements planned to the way LCP is tracked on Shopify’s end? It feels like the timer is starting before the iframe has properly started loading our content.
A: Shopify has improved how it tracks LCP (Largest Contentful Paint) specifically for embedded apps, making its LCP calculation more forgiving than using the standard Web Vitals library alone. Shopify’s tracking begins only once iframe content starts loading, as technical limitations prevent starting the timer before the iframe is active. This approach should help reduce variability in LCP measurements for CSR (client-side rendered) apps, though some variation may still occur with client-side rendering.
Q7: The minimum of 100 calls to our app per month for web vitals to be measured - why does this exist? Can it be removed or lowered dramatically? Some of our apps are a one-time set and forget, so not many users open our app again once they’ve configured it. It makes it impossible to reach 100 unless we have a high volume of new installs. We meet every other requirement, but lose BFS status due to this 100 minimum.
A: The 100-call minimum exists to establish a stable, reliable baseline for measuring app performance. This threshold helps ensure consistent and accurate Web Vitals data for Built for Shopify (BFS) status. Currently, there are no plans to make exceptions to this requirement.
Q8: How quickly can I see my web vitals?
A: You can see real-time metrics by implementing Shopify’s monitoring tools. See the documentation for implementation here.
Q9: How can I measure my LCP score?
A: To measure the Largest Contentful Paint (LCP) score, set up monitoring using the latest App Bridge library from Shopify and configure it to track Web Vitals. Shopify’s Web Vitals monitoring lets you capture LCP and other metrics directly within your app by implementing a callback function, such as processWebVitals, to process and send the collected metrics to your backend for analysis. You can also view real-time LCP scores during app navigation in the development console if you enable debugging .
Q10: How are web vitals calculated?
A: Web Vitals, including LCP, CLS, and INP, are calculated using the web-vitals package from Google. Shopify uses the 75th percentile of each metric’s performance data collected over a 28-day period to evaluate an app’s quality. You can learn more about how Shopify measures your apps loading performance here.
Q11: Why is there no INP data being shared for my app?
A: There could be two reasons for this:
- Your app might not have enough interactive user sessions to meet Shopify’s 100-call minimum in a 28-day period. Shopify requires this threshold to stabilize the data for accurate Web Vitals reporting, ensuring metrics are not skewed by insufficient sample sizes.
- You might be using an outdated version of App Bridge. In order for us to measure INP, you must be on the latest version of App Bridge (via script tag). This will also be a requirement for BFS in 2025
Q12: Why do the metrics I capture not match what Shopify records?
A: Metrics differences between your data and Shopify’s often result from variations in where and how data is captured. Shopify’s metrics typically reflect a wide range of real-world conditions, while your setup may differ in network speed, caching, or device performance. We know this has been a frustration for many developers, which is why we created debugging tools for Web Vitals. Learn how to enable debugging .
Q13: How can I report a Shopify feature that is affecting my web vitals scores?
A: The best way to report a performance issue is by creating a post in the Shopify Community Forums.
Q14: What factors can affect a change in LCP when no code has changed?
A: The main factors that can affect a change comes from request time variability based on Shop data or User location.
Q15: How does a 3rd party javascript library I’ve included in my app affect my score?
A: Third-party JavaScript libraries can have a significant impact on your web vitals scores by acting as a blocking resource, introducing large size downloads, and in some cases the latency introduced in the initialization. To minimize the negative impact consider utilizing the async or defer attributes to prevent blocking and including only the necessary parts of the library.
Q16: Does migrating from a legacy app to a new one have any repercussions on the score?
A: No
Q17: Through my CDN, I can see which calls had a low LCP, and these usually come from countries with low-speed internet connections. Are you taking into consideration and excluding such calls from the LCP measurement?
A: We account for low-speed internet by measuring the 75th percentile (p75) of web vital scores and requiring at least 100 calls over 28 days for stability. To improve performance, consider using CDNs or regional hosting to enhance LCP and web vitals. However, if your app truly isn’t suited for certain regions, you can specify country restrictions here.
Q18: Is there any correlation between the storefront performance and the LCP of embedded app?
A: Storefront performance and LCP are two separate concepts- LCP measures the load time of the largest block in the viewport of the app home, and storefront speed measures the impact of an app on the actual merchant storefront for buyers. It’s important to think of these 2 concepts as separate, as the web vitals we evaluate for Built For Shopify are specifically focused on the use of an app by merchants within the Shopify admin.
Q19: I am trying to decrease the LCP of my embedded app to < 2.5 using your debugging tools and noticed that from the console, LCP on each page of my app is under 2.5 but in admin performance, Shopify is showing me that the LCP of my app is 3.11.
A: It’s great that you are using our debugging tools! It’s important to note here that not all LCP scores will be the same as what you see from your end, as merchants have varying levels of internet speed and other potential factors that can slow down LCP. We also measure the web vitals based on the last 28 days of data, so it might take a few days after improving your app to see the impact on LCP in the dashboard. Be sure to follow our list of best practices to continue to optimize it across all merchants from all locations, and over time the LCP score should continue to decrease
Q20: We’ve recently gone through the assessment phase for the badge but were told that our app was affecting the lighthouse score of the storefront pages by about -10 points. This was strange to us considering we tested the app’s impact via the testing methodology used in this guide here. In our tests, we’ve not noticed an impact as severe as -10 points. Would it be possible for you to share similar details about this but for the storefront tests instead of the in-admin tests?
A: We appreciate you going through the docs and doing the work to ensure merchants have a great experience. There are 2 things I would recommend you try to see if you can get a better baseline on storefront speed:
- Multiple runs - Run the test a few times to ensure a stable metric. This will rule out any weird internet connection flakiness or other external factors that may impact your score.
- Metadata - Ensure there is data in the store that could impact the theme blocks. If you are running the tests on a dev store with no data, it may not be as accurate as a test with store data.