How to Make Your Embedded Apps Load Quickly and Reliably

Slow loading times on embedded apps can be a frustrating experience for your users, getting in their way 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. In this article, we’ll look at how app authentication on embedded apps works, and a brand-new solution for fixing frustrating loading problems.

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 an iframe in 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’s OAuth service. 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 the iframe. 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 the iframe and the top frame of the browser make this app loading behavior feel disorienting and slow to the user.

The whole flow looks like this:

1. Embedded iframe: 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. Embedded iframe: 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

Over the past several years, browser vendors have 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’s Intelligent 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.

If your users are seeing this error message, it’s likely an issue with third-party cookies. 

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 a session 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.

When your app loads, the front end can retrieve session tokens via App 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.

A comparison of the old and new flows for loading embedded apps.

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 like Turbolinks. We have a separate tutorial to 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