App Performance on Storefronts - Revised Requirements and Resources

Shopify
Shopify Staff
Shopify Staff
115 0 70

Hi Shopify App Devs,

Throughout the past couple years, we’ve talked about the importance of online store performance, and asked our app developers community to ensure Shopify merchants offer a great buyer experience through performant online stores.

To provide more guidance, we’ve revised our requirements for being listed in the Shopify App Store and wanted to share some considerations and best practices around improving app speed. We hope the following recommendations, together with suggestions from your Lighthouse performance report, can serve as jumping-off points for making your apps as fast as they can be.

Recommendation #1: Replace parser-blocking script tags with non-blocking tags

The “defer” or “async” attributes are extremely important on script tags. When they aren’t used, they make it so the parser is blocked until the script is loaded, parsed and executed. This delays the construction of the DOM, creates congestion on the Network to download JavaScript files instead of more important assets(images, styles), and significantly delays the initial rendering of the page.

 

<!-- bad -->
<script src="https://cdn.shopify.com/app-code.js"></script>
{{ 'app-code.js' | asset_url | script_tag }}

<!-- good -->
<script src="https://cdn.shopify.com/app-code.js" defer><script>
<script src="{{ 'app-code.js' | asset_url }}" defer><script>
 
<!-- also good -->
<script src="https://cdn.shopify.com/app-code.js" async><script>
<script src="{{ 'app-code.js' | asset_url }}" async><script>

 

As a general rule, use defer if the order of execution matters, async otherwise. When in doubt, choose either one and get the majority of the benefit.

Recommendation #2: Host static files on Shopify

Make use of the Asset API to host your assets on Shopify's servers and have them delivered by our globally available CDN. CDNs are accelerated web servers with built-in caching, compression, super fast performance, and crucially, global distribution. Using Shopify’s CDN will also reduce network congestion.

Recommendation #3: Avoid JavaScript frameworks

The JavaScript ecosystem is rich with libraries to use to build your application, however, including them in your package can lead to large bundle sizes, slow load times, and a poor experience for online shoppers. Frameworks such as React, Angular, and Vue come with significant performance costs, as do large utility libraries such as jQuery.

This effect is compounded when multiple apps try to install the same framework multiple times on the same page.

Instead, use native browser features and modern DOM APIs where possible, and avoid using polyfill libraries to support older browsers.

Recommendation #4: Do not use JavaScript for something that can be done with CSS

CSS parses and renders much faster than JavaScript, so any opportunity to use the latest CSS features for building interactivity should be taken advantage of. Web searches for “using css instead of JavaScript” bring up many great sites to read through to get ideas of where you can find savings, here's a good one to start.

Recommendation #5: Use the Import on Interaction Pattern

Can you avoid loading your JavaScript bundle entirely until a user indicates they’d like to interact with your application?

The Import on Interaction Pattern that Addy Osmani outlines in his web performance blog can show you how to build apps the way Google does, deferring expensive asset loading until a user interacts with the UI requiring it.

Recommendation #6: Minimize your bundle size

As a general rule, your app should inject less than 10KB of JavaScript on a page, and less than 50KB of CSS. Make sure you are optimizing your bundle sizes by minimizing your code, and serving your assets with gzip or brotli compression enabled.

As you build and optimize your app, keep in mind: The theme is responsible for user interactivity, your app should augment it only slightly. If you absolutely need to inject more JavaScript, be sure it loads without blocking the browser by following Recommendations #1, #3 and #5 above.

Recommendation #7: Include remote stylesheets after inline JavaScript tags

Stylesheets block browser rendering until they are downloaded, parsed, and applied. Inline script tags only execute after stylesheets are loaded. When a remote stylesheet is included before an inline script tag, the stylesheet becomes parser-blocking and prevents the discovery of more important resources.

 

<!-- bad -->
<link href="//example.com/app-css.css" rel="stylesheet">
<script>console.log('hello world')</script>

<!-- good -->
<script>console.log('hello world')</script>
<link href="//example.com/app-css.css" rel="stylesheet">

 

We hope you found these recommendations helpful. If you have any additional suggestions or best practices of your own to share, please let us know in the comments section below.

 

Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog
Replies 19 (19)
JoesIdeas
Shopify Expert
1646 141 421

Nice, great recommendations, thanks for sharing these and helping improve performance for everyone.

I love #2 (and use it with our apps) because it reduces 3rd party resources and ensures the fastest load possible. I'd like to make a comment / suggestion on this one though.

We (speedboostr.com) optimize Shopify sites every day and 1 of the most common issues we see is old app code still loading because the store owner deleted the app but did not remove the app snippets / code.

As in your point #2 it's great for performance to use Assets, and especially if the snippet needs to be updated often (like if the store owner edits a setting in the app) it's nice to re-render that snippet on the spot and keep it loading quickly in the theme. So I like keeping that as a best practice.

Solution to lingering app code issue
A) The manual way, which works fairly well is to have an uninstall option, or remove the assets when a feature is disabled... plus in either case, include uninstall instructions in the exit email triggered on app uninstall.

B) Ideal solution: could Shopify set a delay on the revocation of access for the app, maybe to 10 seconds after the app/uninstalled webhook is fired? This would allow the app to clean up their code on uninstall before losing access to the theme.

With solution B implemented, the store owner would have a faster loading site + would not have to spend money hiring developers (like us haha) to clean up old app code.

This would be a win for everyone!

 

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor at Speed Boostr (Shopify optimization / dev team)
• Guy who likes to help people
Eligijus_Lipski
Shopify Partner
15 0 5

Great recommendations!

 

I can back JoesIdeas on the solution for allowing API calls for a short period of time once the app is uninstalled. This is a really big problem for a lot of apps. We at TinyIMG sometimes have to fix other app issues just because after uninstall, there is a lot of leftover code. 

 

Jose_Samper
Shopify Partner
30 2 18

Hi Shopify ,

We  have received an email that says that "Starting on February 16th, app performance will become more heavily weighted in our app ranking and recommendation engine".

In my opinion, there are a few flaws on that approach.

First, there are apps that need to modify heavily the storefront (a translation app, for example) while others do not modify it at all (a report app that only runs in the Shopify Admin, for example). Does this mean that storefronts apps are going to be penalised over admin apps? Or apps that offer advanced features over simple apps (for example, 'Hide Paypal button')?

On the other hand, if you go to Google Page Insights (same engine used by Shopify) and click the on the 'Analyze' button a few times, you will get very different results each time, because the analysis depends on network factors, including the testing environment itself. Has this been taking into account? It would not be fair to penalise an app because the Google Cloud network is slow at that time.
For example, I've just run the Debut demo page only six times and I've got results varying from 69 to 88.

I hope this information helps making the new feature less unfair.

Kind regards,
  Jose Samper

SherpasDesign
Shopify Expert
51 0 19

Jose is right. Lighthouse will give highly inconsistent performance scores between tests. I tested with a vanilla installation of the Narrative theme

and the scores I got in a roll were: 69, 57, 53, 64.

Is this going to be taken into account because as Jose described it, it depends on a few factors external factors?

Cheers!

Milen

 

Tony_Bui
Shopify Expert
371 11 48

Thank you for recommendation and guidance. We'll definitely take into account with the our app performance improvement. With the Jose's concern, do you suggest any alternative solution to test the app performance?

The Lighthouse performance report is good, but better to cross check with other solutions as well.

❤️ Found my answer helpful? Please LIKE or Accept Solutions.
❤️Top 30 Best Shopify Themes Free + Premium: A Complete Review Read More
Jose_Samper
Shopify Partner
30 2 18

Hi Tony,


@Tony_Bui wrote:

do you suggest any alternative solution to test the app performance?


Automated reports are a very nice tool for web developers, who can analyse their output carefully to improve their websites.

However, using a score like 72 without context is utterly meaningless. For example, it is not the same a simple web page that only show some text and an image (like a blog post) than a page with a lot of content (a newspaper home page, for example). Same for different stores. Same for different apps.

In my opinion, using the number without checking the details it's not a good approach and using the score as a weight in a positioning algorithm does not sound like a good idea.

PaulNewton
Shopify Partner
4177 299 886

Yes , yes , keep goingYes , yes , keep going

  1. To be published in the Shopify App Store, your app must not reduce Lighthouse performance scores by more than 10%. Submissions are evaluated based on this criteria, using the testing methodology outlined in the section below.

I applaud this start, but would like to see that rephrased so that 10% doesn't seem like a goal to brush up against.

It needs read as disqualifier , an outright threat even, not as acceptable behavior if an app pushes the redline to cram more stuff in.

And that this is an ongoing threshold to be avoided to keep an app on the app store.

Especially since a 10% drop from 99 is a bigger drop than than a 10% drop from 60 , ratio withstanding.

 

 

 

Save time seeking solutions - Learn To Ask Questions The Smart Way

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
PaulNewton
Shopify Partner
4177 299 886

 


@JoesIdeas wrote:

Solution to lingering app code issue
A) The manual way, which works fairly well is to have an uninstall option, or remove the assets when a feature is disabled... plus in either case, include uninstall instructions in the exit email triggered on app uninstall.


To facilitate this we also need a requirement of better namespacing of app assets filenames and possibly variables too.

To many apps use general names that makes it difficult sometimes to know if that file is supposed to be part of the theme which is compounded by themes not having a manifest or required changelog.

I've even been finding myself wishing for an /apps subfolder in all the existing directories to kill the amount of digging required around this issue.

 

Apps that create new variables to replace a native one  that is then peppered everywhere need to be required to have a obvious fallback when that app is not installed.

e.g. product_price 

The latter possibly means there needs to be an "{{app.namespace}}" or other fixture(automf) since trying to use metafields to bandaid this fails the moment the app cannot edit a metafield.

 


@JoesIdeas wrote:

B) Ideal solution: could Shopify set a delay on the revocation of access for the app, maybe to 10 seconds after the app/uninstalled webhook is fired? This would allow the app to clean up their code on uninstall before losing access to the theme.

With solution B implemented, the store owner would have a faster loading site + would not have to spend money hiring developers (like us haha) to clean up old app code.


A delay or something but that's still a bandaid for the hard problem of the trash can nuke in the /apps admin.

The ecosystem uninstall problems could be a better experience if merchants are told front and center to use the apps own uninstall process when the apps have one.

But alas shopify cannot have apps dictating deletion steps in the /app admin either

 

 

Save time seeking solutions - Learn To Ask Questions The Smart Way

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
PaulNewton
Shopify Partner
4177 299 886

Obviously context matters but also why the 10% is for app devs to keep an eye while ratio is the metric shopify uses.

Hopefully the ranking is binned to specific categories and not the whole app store and is a limited bias compare to other metrics like user reviews.

So apps in specific categories would only be ranked against others in that bin.

So a language app perf rank only matters in comparison to other language apps.

 

If that's not the case then yes that's a big oversight and may open the door to gaming the shopify app store.

The same way apple/google let bad faith actors proliferate because the "algorithm" allows it and not because what's reasonable.

Make a bunch of "fast" scoring apps with limited individual functionality like adding a fixed CSS based banner and take over the top global spots; not just because this app is "fast" or good but because other apps rank as slooooow as seen by an algorithm.

While on the other end larger apps like 360 image viewers, page design apps like pagefly, shogun , etc would see massive penalties because the difference in ranking becomes so extreme.

Save time seeking solutions - Learn To Ask Questions The Smart Way

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
Kris_Doyle
Shopify Partner
95 0 24

Hi Shopify ,

I just got an email saying the following:

Action Required: Your app has been flagged as reducing Lighthouse performance scores by more than 10%. Improve your app(s)’ performance by March 2nd, 9am EST.

I'm confused though because my app is admin-facing and doesn't interact with storefronts or themes at all. I'm not sure how it could be affecting shop performance?

I've been running Lighthouse but it doesn't report correctly because embedded apps have to go through the oauth process which causes problems for Lighthouse. I'm wondering how the app could have been tested with Lighthouse with those limitations. When I did get it to work, it was reporting errors with the Shopify Admin, and not my actual app (since it's embedded in a frame) so I'm not sure what to do about that.

In any case, if mine is an admin-facing app, do the same rules apply, and how is the testing done? Everything I've seen is talking about theme performance, but I have no storefront interactions, no injected script or proxy, and no theme-related features, so I'm just a bit confused.

Thanks very much!
Kris

Jose_Samper
Shopify Partner
30 2 18

Hi Kris,

I'm not sure if anyone from Shopify is checking this thread, I would try to contact Partner Support using the form in the Shopify Partner Dashboard and send them a video showing the Lighthouse score of a shop before and after installing your app, as explained at https://shopify.dev/concepts/app-store/getting-your-app-approved/app-requirements#a-performance-scor....

The problem is that the margin of error of Lighthouse is way higher than 10% so the risk of false positives is extremely high. I will say it again: if you run Lighthouse twice on any website, it's easy to get 2 different results that differ on more than 10%.

The Online Speed Score do not apply to admin apps, this is clearly a false positive.

Good luck!

 

 

Kris_Doyle
Shopify Partner
95 0 24

Hi @Jose_Samper ,

Exactly my point (about the admin app). I can run the score and then install the app, an re-run, but all it's going to show is the theme score, which I have no impact on since the app isn't even part of the score.

But wouldn't the testing team have already done this? Is it possible that someone didn't realize it's an admin app and that it's a false positive as you said?

I really hope so because the message "fix this by March 2" is pretty ominous; especially when there's literally nothing I can do to change what the theme performance is, since my app doesn't interact with the storefront at all.

Thanks,
Kris

Jose_Samper
Shopify Partner
30 2 18

Hi,


Is it possible that someone didn't realize it's an admin app and that's it's a false positive as you said?

Definitely a false positive.

I think that Lighthouse should not be used to check apps performance but, to be fair, I understand that the guy who tested it does not need to understand how all apps works, they might think that your app, even being an admin app, could inject some storefront code to get metrics or anything else.

The misunderstanding should be easily solved but, as you said, the deadline is threatening, let's hope someone checks it before it arrives.

 

Kris_Doyle
Shopify Partner
95 0 24

Yeah good point. I guess there's no way they can know that for sure.

I think it would be better if they maybe said something like "You've been flagged! Prove your innocence by March 2 or else!" lol

Anyhow, agreed about hoping they look into it soon...starting to panic a little.

Kris_Doyle
Shopify Partner
95 0 24

Hi Shopify ,

Would it be possible for anyone to offer an official opinion on this?

I created a support ticket a little over a week ago with no response, and it's almost March 2.

I also sent a video showing that my app has no effect on store performance so I'm not sure what else I can do.

At this point, all I can do is wait and see what happens on March 2 but obviously I'm a little concerned here.

Help?

Josh
Shopify Staff
Shopify Staff
1134 82 211

Thanks @Jose_Samper for flagging this post, 

 

@Kris_Doyle I found your email, and am going to have this looked at internally. Either myself or a colleague will respond via email ASAP once we have more information, but in the meantime please know that I'll make sure your app will not be penalized while we investigate this. 

Josh | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Kris_Doyle
Shopify Partner
95 0 24

Hey @Josh ,

Thanks so much, you guys are awesome. I think there might be two threads going for this so I do apologize for that. In any case, this is successfully closed now per your last post.

Cheers,
Kris

UpperCommerce
Shopify Partner
26 1 0

Hi Josh,

Our app ETA is already negatively affected, my email is parcelpanel100@gmail.com, please help to investigate this issue.

We got the email that said, "In addition, if you are still unable to meet our requirements by March 9th, 9 am EST, your app will be delisted from the Shopify App Store until this performance issue is resolved." 

We have already fixed the speed issue regarding the storefront, we don't know what more can we do. I emailed Shopify and the ticket number is 22653438. Haven't got any reply from email yet. Please help.

BinalSavani
Shopify Partner
360 48 83

Hello @Shopify 

I have a query regarding "To be published in the Shopify App Store, your app must not reduce Lighthouse performance scores by more than 10%."

Could you please explain it to me in more detail? Is that mean the app shouldn't reduce the score below the store's current performance score or overall performance score?

Binal Savani | iCart App


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more visit www.identixweb.com