Built for Shopify Resource hub

Built for Shopify
1

Find everything you need to make the most of Built for Shopify. From documentation to webinars and expert tips, this resource hub is here to help you streamline the review process, get your app fully compliant, and unlock all the benefits that come with BFS status.

Product documentation

Our comprehensive documentation covers every quality standard, program benefit, and achievement criteria required for apps to learn more about Built for Shopify and how to unlock status. Whether you’re troubleshooting or diving deeper into the program requirements, our documentation will help guide you:

Webinars & app demos

Watch our webinars for a deep-dive into common application challenges and learn how to overcome them with useful tips, strategies and app demos from Shopify’s product experts.

Built for Shopify: How to improve admin performance

Learn how to boost your apps’ admin performance to unlock exclusive Built for Shopify benefits.

Whether you’re struggling to meet targets for Largest Contentful Paint (LCP) or want to learn more about Built for Shopify 2025 requirements like Cumulative Layout Shift (CLS) and Interaction to Next Paint (INP), we’ve got you covered.

Built for Shopify: How to embed your app

Master how to embed your app into Shopify’s admin. Members of Shopify’s engineering and product team, along with top Built for Shopify app partners from Smile.io and Seguno cover the best strategies to embed your app in the Shopify admin and achieve Built for Shopify status.

Whether you’re running a large app or just getting started, this webinar will teach you practical strategies to seamlessly integrate your app, no matter the size.

Troubleshooting tools

Monitoring & Debugging Admin Performance

Shopify uses Web Vitals to measure app performance in the Shopify admin, collecting data with each user load. While there are some differences in how metrics are recorded for embedded apps, Shopify provides tools for real-time monitoring and debugging to help optimize your app’s performance.

Learn how to use these features to enhance your app’s performance.

Performance optimizations for Web Vitals

1. Optimize Server Response Times

  • Use Caching: Implement caching strategies (e.g., fragment caching, page caching, or action caching) to reduce server response times.
  • Database Optimization: Optimize your database queries by using indexes, avoiding N+1 queries, and using eager loading where appropriate.
  • Background Jobs: Offload long-running tasks to background jobs using tools like Sidekiq or Delayed Job to keep the main request-response cycle fast.

2. Optimize Assets

  • Image Optimization: Use image formats like WebP and ensure images are properly compressed. Tools like image_optim or mini_magick can help.
  • Lazy Loading: Implement lazy loading for images and other media to defer loading until they are in the viewport.
  • Preload Key Resources: Use <link rel="preload"> to prioritize loading of critical resources, such as fonts and hero images.

3. Minimize Render-Blocking Resources

  • Defer JavaScript: Use the defer attribute for non-critical JavaScript files to prevent them from blocking the rendering of the page.
  • Inline Critical CSS: Consider inlining critical CSS to ensure that the styles necessary for rendering the above-the-fold content are loaded quickly.

4. Use a Content Delivery Network (CDN)

  • CDN for Static Assets: Serve static assets (images, CSS, JavaScript) from a CDN to reduce latency and improve load times for users across different geographical locations.

5. Optimize Fonts

  • Font Loading Strategies: Use font-display: swap in your CSS to ensure text remains visible while fonts are loading. Consider using system fonts or optimizing web fonts to reduce loading times.

6. Reduce Third-Party Scripts

  • Limit Third-Party Resources: Minimize the use of third-party scripts and services that can slow down your page load times. If necessary, load them asynchronously.

7. Use HTTP/2

  • Enable HTTP/2: If your server supports it, enable HTTP/2 to take advantage of multiplexing, which allows multiple requests to be sent for loading resources simultaneously.

Support

Need help? Contact our support team for personalized assistance with any issue related to your Built for Shopify status.
Contact Support → https://help.shopify.com/

4 Likes