Skip to main content

Performance

App performance affects merchants twice: a slow admin UI discourages them from using your app, and slow scripts injected into their storefront cost them real conversions. This guide covers the performance practices for each surface your app touches.

Meet the Lighthouse benchmark​

To be published in the Shoplazza App Store, your app must not reduce a store's Lighthouse performance score by more than 10%. This is measured during app review — see app performance requirements for the testing methodology. Test your own app against this benchmark before every submission: run Lighthouse on a development store before and after installing your app, and compare the scores.

Keep your app pages fast​

Your app's own pages — embedded in the admin or standalone — should follow standard web performance practice:

  • Minimize your bundles. Minify JavaScript and CSS, remove unused code, and avoid shipping large frameworks or utility libraries when native browser features and modern DOM APIs can do the job.
  • Load non-critical resources on interaction. Don't load, parse, and execute code for a feature until the user opens it.
  • Serve static assets from a CDN with long-lived cache headers.
  • Avoid layout shifts and show loading progress. Reserve space for content that loads asynchronously and indicate progress clearly — an app that looks stable and responsive is perceived as faster even at the same load time.
  • Put inline scripts before remote stylesheets. Browsers block inline script execution until earlier stylesheets finish loading, so a stylesheet placed first delays your script.

Streamline your OAuth flow​

Authorization is the first interaction a merchant has with your app, so make it fast:

  • Respond to the callback quickly. In the OAuth callback, do only what's necessary — validate the request, exchange the code for an access token, create the session — then redirect (302) into your app immediately.
  • Move heavy setup out of the critical path. Initial data sync, webhook registration, or provisioning can run as background jobs after the redirect. Show the merchant your app UI first and let setup finish asynchronously, with progress shown in the UI if needed.
  • Keep the redirect chain short. Every extra hop between authorization and your app's first screen adds latency and looks broken to the merchant.

Keep injected scripts lean​

Scripts your app injects into the storefront or checkout run on the merchant's revenue-critical pages, so their budget is much tighter than your own admin pages:

  • Checkout pages: stay under 30 KB gzipped per extension. Checkout performance directly impacts conversion rate.

  • Never block rendering. Load your scripts with defer (order preserved) or async (order independent) so the browser can keep parsing the page:

    <script src="https://cdn.example.com/app-code.js" defer></script>

  • Avoid heavy dependencies. Don't ship React, Vue, jQuery, or polyfills for obsolete browsers into someone else's storefront. Multiple apps loading the same framework multiply the damage.

  • Prefer CSS over JavaScript for visual effects and simple interactivity — CSS parses and renders much faster.

  • Prefer passive patterns over polling. Use IntersectionObserver, event listeners, or a one-off setTimeout instead of high-frequency timers.

  • Scope your globals. Wrap your code in an IIFE so your variables can't collide with the theme or other apps in the global namespace.