Pre-submitted questions + responses
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