The principal benefit of CrazyLoad is the capability to adjust the JS execution sequence based on the requirements of your site. This becomes increasingly crucial when catering to mobile devices or devices with inferior processing capabilities, especially in locations with weak signals or remote areas with limited internet connectivity.

The internal workings of many platforms can be bulky. They initiate all widgets within the management interface and commence their analytics scripts immediately following DomContentLoaded event. A web browser has a certain bandwidth, i.e., a limited number of processes it can handle in a unit of time. This bandwidth is determined by the characteristics of a specific device, such as the power of its CPU, the device’s RAM, and so on. If the loading of scripts on a website is not optimized, a bottleneck, commonly referred to as the “bottleneck effect,” can occur. This can be likened to traffic jams on roads, where a broad highway narrows down to a single-lane road, causing congestion. Much like cars in a jam, processes in a browser queue up, and each process begins to operate with significant delays.

This problem is particularly relevant for weaker mobile devices or devices in unstable connection areas. The primary goal of optimization is to increase the efficiency ratio specifically for these clients. By doing so, we enhance your conversion rate, behavioral metrics (bounce rate), and so on. As a result, mobile versions don't initiate until the browser has processed all scripts. Incorporating embedded media, like YouTube videos, can further deteriorate the speed.

By setting a specific order for JS scripts, they're distributed more evenly over time, enhancing the page display speed. Scripts essential for theme functions are prioritized, with others following suit.

Configuring JavaScript Loading Sequence

You can govern the timing of event triggers with the __clspeedapp-js-init.liquid file:

For clarification: '2500' represents milliseconds. Adjust this value if you want to modify the loading speed of certain events; set the values to 0 to deactivate event triggers.

Modifying timers can lead to a deterioration in performance, so please be cautious when editing these parameters.

Definitions:

  • __opt1 is for mobile configurations.

  • __opt2 is for desktop configurations.

  • p - preloading settings. This is the time interval between the window.addEventListener("load", (event)) and the current timer. During this interval, only the most important scripts that are needed on the site immediately should run.

  • s - scripstloading settings. At this moment, all scripts on the site that are inside the HTML code of the page are executed. That is, this is the standard time for launching all the functionality of the site.

  • o - other scriptloading. At this moment, “other” scripts are executed. By default, internal Shopify analytics scripts are launched here, which are responsible for displaying internal statistics. However, any other scripts can be added here if needed.

  • a - asyncloading scripts. At this moment, all app scripts installed through the Shopify store’s administrative panel are executed sequentially.

Correlating events and scripts

This is a list of arrays correlating between events and scripts that should be executed during these events.

In the next sections, you'll find detailed descriptions of each of those arrays.

---

__engine_objects_queue['loaded']

If you add a script to this array, it will be executed immediately upon the event addEventListener("DOMContentLoaded", (event) => {});

For example, the ‘initial’ script (method) can be found in __clspeedapp-js-scripts.liquid.

It would be possible to add the `lazypreload` script (method) to this event.

---

__engine_objects_queue['scriptspreloading']

This array contains a list of scripts that should be triggered by the event `s`. In our case, it’s 1000ms for the mobile version and 100ms for the desktop version.

---

__engine_objects_queue['scriptsloading']

This array contains a list of scripts that will run after all the scripts present in the HTML code have executed. In our case, this means 2700ms for the mobile version and 300ms for the desktop version. To reiterate: as soon as the last script from the HTML has executed, `recaptcha` will then run.

---

__engine_objects_queue['other'] = ['__fend_trekkie.integrations']

This array contains a list of “other” scripts, as I mentioned earlier: by default, it includes the analytics scripts from Shopify.

---

__engine_objects_queue['event'] = ['buyitnow', 'video', 'video-native']

This array contains a list of scripts that will be triggered by interactive events.

For the mobile version, it’s 

window.addEventListener("scroll", function() {});

and 

window.addEventListener("click", function() {});

 

For the desktop version, it’s 

window.addEventListener("scroll", function() {}); 

and 

window.addEventListener("mousemove", function() {});

 

Adding Functionality

To add your own methods to the script loading events, you just need to open the file __clspeedapp-js-scripts.liquid and add a new method to the __engine_scripts_queue method array:

After the method has been created, we can immediately add it to an array of our events, for example, to the 'other' event:

So, this code will be initialized for the mobile version at 2200ms after the window.addEventListener("load", (event)) event, and for the desktop version at 150ms.

It's important to note that any methods in the __engine_scripts_queue array are directly accessible in the event arrays.

Managing Scripts within HTML

We have the ability to add to the `event` arrays:

any scripts that are inside the HTML.

To do this, we need to use the prefix __fend_[match], where "match" is the keyword for the script entry.

It’s worth noting that this is relevant for both inlined scripts and scripts that are connected through files. Let’s say we want the `test1` and `test2.js` scripts to run on an event. Here’s an example:

Adding scripts from the Admin Panel to the different event arrays

All applications that are installed in the admin panel (i.e., all applications from the Shopify App store) are located in a special array, asyncLoadArr. You can view the contents of this array by using Chrome DevTools.

For instance, if we want the script 'zendesk-embeddable.js' to initialize by a user interactive event (mouse movement, scrolling), we add it to the 'event' array.

In a similar way, we can handle scripts installed through the administrative panel. However, instead of using the prefix __fend_[match], we should use __app_[match].

Exclusions

In certain scenarios, scripts might need to be excluded from the js queue. To achieve this, refer to the interface within the __clspeedapp-js-init.liquid file.

  • class - binding to the script class
  • id - binding to the script ID
  • src - binding to the script source
  • data-src - binding to the data-src parameter of the script
  • innerHTML - binding to the code located inside <script></script> tag

Examples of exceptions

Class:

_________

ID:

______

SRC:

_________

data-src:

_________

innerHTML:

Creating SLC: Script Loading Chains

We also have the ability to create “script loading chains”. Their operation is based on the JS entity `Promise`, which you can learn more about here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise.

For instance, suppose we have a situation where we have a file of all libraries called ‘vendor.js’ and an executable theme file theme.js that utilizes vendor.js. In such a case, we need to be certain that vendors.js has indeed loaded.

To address this, we employ a chain of scripts that ensures a clear sequence. It’s worth noting that using this method is relevant only when we make custom settings, i.e., when adding script launches to lists of events arrays (loaded, scriptspreloading, scriptsloading, other, event).

If scripts are launched without additional settings, then by default they operate sequentially, and such issues don’t arise. Here’s an example of using “chains” in the screenshot. In this case, we use the prefix: __fend_await_.

Using Callback (s) with CrazyLoad

We can also use a “callback”. That is, after loading a file/script, we can trigger something else. For example, if we need to output console.log(‘hello world’) after loading the theme.js file.

To do this, we need to add a method to the __clspeedapp-js-functions.liquid file, then once the file is loaded, what we wanted will automatically be executed. It should be noted that the method name must contain the prefix __fend_cb_, followed by the keyword, so in our case __fend_cb_theme.js.