App Performance on Storefronts - Revised Requirements and Resources

Shopify
Shopify Staff
Shopify Staff
135 0 29

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.

 

JoesIdeas
Shopify Expert
1305 118 339

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!

 

Founder of Speed Boostr (Shopify optimization experts, theme customization, custom app development).
Creator of Shopify Analyzer (first performance analysis tool for Shopify sites, free for the Shopify community).
Creator of Order Automator (auto tag orders and customers + auto fulfillment + more automations).
More apps: Theme Scientist (A/B testing), Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).
Eligijus_Lipski
Shopify Partner
10 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. 

 

0 Likes
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
44 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

 

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
2583 136 472

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.

 

 

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
PaulNewton
Shopify Partner
2583 136 472

 


@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

 

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
PaulNewton
Shopify Partner
2583 136 472

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.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes