How to Make Your Embedded Apps Load Quickly and Reliably

A slow loading time on embedded apps can be a frustrating experience for your users, slowing down their work and causing a negative impression of your app. Even worse is when your app fails to load at all, meaning you spend your time chasing down reports and trying to identify the cause.

What causes slow loading times or failed loads on embedded apps can be how your app authenticates with Shopify. In this article, we’ll look at how app authentication on embedded apps works, and a brand-new solution for fixing this frustrating problem.

How your embedded app loads today

A merchant clicks a link to load your app and a few seconds later it’s there on the screen. What happens under the hood to make that happen?

First, Shopify creates aniframein the Shopify admin, and sets the URL to the URL of your app. When the browser makes the request to your app, it includes any cookies that your app has previously set. These cookies contain session information that make it possible for your app to recognize who is accessing it.

Sometimes no cookies exist, or the session contains no user information. In this case, your app redirects the user to Shopify’sOAuthservice. The OAuth service validates that the user has installed your app, and then redirects the user back to your app, passing back information your app can use to recognize the user. Your app stores the user information and links it to the session cookie, so that future interactions can occur without the OAuth service’s involvement.

Now that your app knows who the user is, it can load with information specific to that user.

You might also like:API Deprecation at Shopify: 2020-10 Edition.

Why your app sometimes loads slowly

The process of redirecting to the OAuth server is slow. In order to set the session cookie, the redirect can’t happen inside theiframe. Instead, the entire browser needs to be redirected, leaving the Shopify admin. It only redirects the user back to the Shopify admin and the embedded app page at the end of all the redirects needed for OAuth. In many cases, browser redirects can be made to appear seamless to the user. However, the number of redirects needed and the jumps back and forth between theiframeand the top frame of the browser make this app loading behavior feel disorienting and slow to the user.

整个流程是这样的:

1. Embeddediframe: App loads
2. Top frame: App redirects to Shopify OAuth
3. Top frame: Shopify OAuth redirects to app
4. Top frame: App loads, notices it’s outside of the iframe, and redirects to the admin
5. Top frame: The admin loads
6. Embeddediframe: App loads

Each of these steps decreases performance, and several of them together can result in poor UX. Total load times might climb as high as 10 seconds, an eternity for impatient users.

Why your app sometimes doesn’t load at all

在过去的几年中,浏览器厂商focused on increasing user privacy. This is a good thing for users, as it gives them more control over how their data is collected. In particular, browser vendors have tried to stop the “tracking” of users across sites.

"Over the past several years, browser vendors have focused on increasing user privacy."

Neither Shopify nor its apps are the kind of “trackers” that browser vendors want to block. However, the core technology we use to power embedded apps (iframes) is the same technology many sites use for cross-site tracking. As a result, the restrictions that browser vendors have implemented (such as Safari’sIntelligent Tracking Prevention) to stop cross-site tracking have made it more difficult for Shopify apps to function.

The most pertinent restrictions are ones that limit the use of cookies in iframes (“third-party cookies”). Shopify apps use cookies to store the user session, so that apps only need to perform the OAuth flow infrequently. When third-party cookies are restricted, apps are unable to store or retrieve this information, which often results in app loading failures. In August 2020, apps failed to load an average of 5,150 times every day.

There are ways to work around limitations like Safari’s Intelligent Tracking Prevention, but they’re difficult to implement, force undesirable UX choices, and don’t cover every use case.

You might also like:5 Key Strategies to Improve Your App Support.

How to fix slow app loading times and third-party cookie errors

Shopify has implemented a better way to load your app. Instead of using a session cookie to store and retrieve user information, you can now use asession token. These session tokens are secure packets containing information about the user accessing your app. Just like session cookies, they allow your app to know which user is using it.

当你的应用程序负载s, the front end can retrieve session tokens viaApp Bridge. Once your app front end has a session token, it can include it in requests to your app backend. The session token includes all the information your app needs to identify the user. This means that in most cases, your app only needs to perform an OAuth redirect for the initial install, and does not need to store the user information in a cookie. Instead, after the initial install, your app can rely on session tokens.

This mechanism is significantly more reliable and faster than the cookie-based approach. Apps that have adopted App Bridge authentication load up to four times faster and have no cookie-related loading failures. For a side-by-side comparison of how much faster embedded apps load with App Bridge authentication in the video below:

"Apps that have adopted App Bridge authentication load up to four times faster and have no cookie-related loading failures."

To learn more about how to implement the session token, follow the link below to access our dedicated tutorial.

View tutorial

Note: In order to include session tokens in the requests to your app backend, the requests need to come from Javascript in your front end. This makes single-page apps easy to convert, because they already rely on Javascript-based requests for most of their interactions with their backends. If your app renders its front end on the server-side (e.g. traditional Ruby on Rails apps, Django apps, or PHP apps), you might need to do additional work and encapsulate your app in a tool likeTurbolinks. We have aseparate tutorialto illustrate how this can be done.

A better experience for your users

Issues with loading speed and reliability can frustrate your users and hold your app back. The increasing restrictions browsers are placing on third-party cookies will only make this worse.

With Shopify’s new authentication solution for embedded apps, you can fix both problems at once and provide a better user experience to your app users. Crack open the tutorial and get started—your users will thank you!

View tutorial