Why are new app.latest JS files affecting page speed?

[mfcss]

Our page speed (via Lighthouse testing) has dropped from 90+ to 75 recently. 

When looking at the optimizations, none of them are within our control, but rather relate to changes made by Shopify.

In particular, looking at the network traffic, a number of Shopify JS files seem to take up the vast majority of the traffic, specifically the below:

Does anyone know what these do - and if there is a way to avoid/delay them to avoid tanking the page load speed? All of them appear new to me, but may simply be renamed vs. previously. 

Looking at my page source code, these seem related to the below section:

<script>
  (function() {
    var scripts = ["https://cdn.shopify.com/shopifycloud/checkout-web/assets/runtime.latest.en.8645d252f07ec25fdbc6.js", "https://cdn.shopify.com/shopifycloud/checkout-web/assets/checkout-web-packages~Information~NoAddressLocation~Payment~PostPurchase~Review~Shipping~ShopPay~Sho~cf13f96e.latest.en.04837ae4ff5a8e949953.js", "https://cdn.shopify.com/shopifycloud/checkout-web/assets/Information~Payment~ShopPay.latest.en.84ff9c0024faf7f72c14.js", "https://cdn.shopify.com/shopifycloud/checkout-web/assets/Information.latest.en.900911b3d82c82309ebf.js", "https://cdn.shopify.com/shopifycloud/checkout-web/assets/checkout-web-ui~app.latest.en.86cd9328cdcd6cd3a58f.js", "https://cdn.shopify.com/shopifycloud/checkout-web/assets/vendors~app.latest.en.b4546f9bffad10b3673b.js", "https://cdn.shopify.com/shopifycloud/checkout-web/assets/checkout-web-packages~app.latest.en.f5154093d2604596d084.js", "https://cdn.shopify.com/shopifycloud/checkout-web/assets/app.latest.en.931851b1b02f1bcae42a.js"];
    var styles = ["https://cdn.shopify.com/shopifycloud/checkout-web/assets/checkout-web-ui~app.latest.en.9f2a5e9ec696775e2217.css", "https://cdn.shopify.com/shopifycloud/checkout-web/assets/vendors~app.latest.en.e788719f193b49c039a3.css", "https://cdn.shopify.com/shopifycloud/checkout-web/assets/app.latest.en.6b4c79ead7042980b29d.css", "https://cdn.shopify.com/shopifycloud/checkout-web/assets/Information~Payment~ShopPay.latest.en.da9f06164a980bf8e7ea.css", "https://cdn.shopify.com/shopifycloud/checkout-web/assets/Information.latest.en.9a0274ab07be120c1902.css"];

    function prefetch(url, as, callback) {
      var link = document.createElement('link');
      if (link.relList.supports('prefetch')) {
        link.rel = 'prefetch';
        link.fetchPriority = 'low';
        link.as = as;
        link.href = url;
        link.onload = link.onerror = callback;
        document.head.appendChild(link);
      } else {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onloadend = callback;
        xhr.send();
      }
    }

    function prefetchAssets() {
      var resources = [].concat(
        scripts.map(function(url) { return [url, 'script']; }),
        styles.map(function(url) { return [url, 'style']; })
      );
      var index = 0;
      (function next() {
        var res = resources[index++];
        if (res) prefetch(res[0], res[1], next);
      })();
    }

    addEventListener('load', prefetchAssets);
   })();
</script>

[flareAI]

Hello @mfcss,

I am Gina from flareAI app helping Shopify merchants get $5Million+ in sales from Google Search, on autopilot. Hope you are having a good day.

The JavaScript file you highlighted in the screenshot is likely a core Shopify file that is required for the proper functioning of your online store. In general, it's not recommended to delay or avoid loading core files, as doing so could result in site functionality issues.

However, there are a few things you can do to improve your page speed.

1. Optimize your images
Large image files can significantly slow down your page load time. Make sure that your images are compressed and optimized for the web.

2. Minimize HTTP requests
The more HTTP requests your site makes, the slower it will load. Try to minimize the number of requests by combining multiple files into one, reducing the number of images on your page, and using CSS sprites.

3. Enable compression
Compressing your files can reduce their size and speed up your site's load time. You can enable compression through your server settings.

4. Minimize CSS and JavaScript
Large CSS and JavaScript files can slow down your site. You can minimize these files by removing whitespace, comments, and unnecessary code. You can also consider using some tools to automate this process.

5. Remove all unwanted Shopify Apps which you are not using
You should disable app features you don't use, or you can remove the app if you don't need it. If you are removing an app make sure to remove code that was added as part of the app install process.

6. Always choose a theme that is responsive, fast, and takes minimal time to load the page
If you choose a theme with numerous sliders, fancy animations, advanced navigation systems, etc., will affect your page speed. If your theme is loading slow, consider disabling the theme features you don't need.

Let me know if you have any further questions.

Gina

[ben-yes]

Hi,

Did you figure this out? What its use is etc?

I'm seeing a similar file appearing and it's now right at the top of the Lighthouse payload size list..

[thk116]

check my post if it's relevant to yours https://community.shopify.com/c/site-speed/low-site-performance-scores-due-to-enormous-network-paylo... 

[thk116]

Did you figure anything out? Seeing similar issues with two assets:

- cdn.shopify.com/shopifycloud/checkout-web/assets/Redesign.latest.en.22eb550d8c102629a078.js

- cdn.shopify.com/shopifycloud/checkout-web/assets/app.latest.en.11a05e04d13716c43e1a.js

[thk116]

check my post if it's relevant to yours https://community.shopify.com/c/site-speed/low-site-performance-scores-due-to-enormous-network-paylo... 

[Alex_Moser]

Could we get some clarification from Shopify on this? There are 800kB of assets being loaded from "/shopify-cloud/checkout-web/assets" on every page, which is crazy since it's not even clear what utility it provides outside of checkout.