TL;DR: Get high-performance LCP times with Gadget’s new and improved /api/shopify/install-or-render route.

Starting today, it's easier for public Shopify app developers to achieve that shiny Built for Shopify badge with Gadget. We’ve introduced a new high-performance entrypoint that will trigger a different route depending on a merchant’s install status.

Previously, unless otherwise specified, Shopify apps built with Gadget always used the <inline-code>/shopify/install<inline-code> URL for their App URL configuration value in Shopify. This required a cold boot of the Gadget app sandbox, which can add a meaningful delay to the Largest Contentful Paint (LCP) time of an app's index.html. Instead, Gadget will now run server-side redirects for starting the install flow, bypassing the need for a cold boot and speeding up your app’s LCP.

The new route will trigger the OAuth install flow when a merchant first installs the app, while redirecting existing users to <inline-code>/<inline-code> for rendering the frontend experience of an application. By doing this, the route is automatically optimized by Gadget to be as fast as possible and does not require starting up the serverless runtime for your application. As a result, LCP performance times will be much more predictably low.

How to use the new route

Every new Shopify built with Gadget will have this new route automatically applied upon creation. And for existing apps, it’s easy to make the switch. Simply change your <inline-code>App URL<inline-code> to be <inline-code><your app domain>/api/shopify/install-or-render<inline-code> from the Shopify Partner Dashboard.

‍

‍

‍

For example, for a Shopify app built with Gadget at <inline-code>shopify-example.gadget.app<inline-code>, you can set the following values:

Development <inline-code>App URL<inline-code>:

<inline-code>https://shopify-example--development.gadget.app/api/shopify/install-or-render<inline-code>

Production <inline-code>App URL<inline-code>:

<inline-code>https://shopify-example.gadget.app/api/shopify/install-or-render<inline-code>

Why does LCP matter?

Shopify uses a combination of web vitals to assess your app for the Built for Shopify badge, and LCP is one of the key considerations. Slow load times can create friction for merchants, or worse, buyers, which can affect the overall experience of using Shopify. To encourage developers to create performant apps, Shopify requires a maximum LCP of 2.5 seconds in order to qualify for the Built for Shopify badge. 

If you have any questions or want to learn more about building Shopify apps with Gadget, you can head over to our developer Discord, or read through our docs.