How to Use Async and Defer in Shopify to Speed Up Your Store

Website speed is crucial for Shopify stores, directly impacting user experience and conversion rates.

Slow-loading sites can lead to lost sales and higher bounce rates. One important way to improve load time is by optimizing how scripts are loaded, especially third-party scripts like analytics or ads.

Efficient script loading reduces delays and boosts performance.

This guide will focus on how to use async and defer in Shopify to load scripts more efficiently, helping your store run faster.

Why Script Loading Matters

Scripts are crucial for Shopify stores, enabling everything from basic interactivity to advanced integrations with third-party tools like analytics, payment processors, and marketing widgets.

These scripts handle essential functions such as tracking customer behaviour, displaying ads, and managing store operations.

Typically, all JavaScript is loaded when the page loads, even if some functions aren’t needed until a specific action is triggered.

Loading all scripts at once can overwhelm the browser and slow down your page.

Poor script optimization leads to rendering delays, leaving customers facing a blank or incomplete page, which harms the user experience and increases the likelihood of visitors abandoning your store.

Slow script execution can also cause lag, making the page feel unresponsive.

By loading scripts only when necessary—triggered by specific actions—you reduce the initial load on the browser, improving page performance and delivering a faster, smoother experience for your users.

What Are Async and Defer Load Methods?

To understand how the defer and async attributes work, it helps to know how a browser loads a web page:

1. The browser starts by reading HTML to build the structure of the page, called the Document Object Model (DOM).
2. As the browser reads the HTML, it encounters a JavaScript (JS) file.
3. When the JavaScript is found, the browser pauses building the DOM to:
   • Retrieve the JavaScript file.
   • Execute the script.
4. Once the script has been executed, the browser continues reading and building the rest of the page.
5. The placement of the JavaScript in the HTML affects how quickly the page loads and how it appears to users during the loading process.

Use Async and Defer in Shopify to Speed Up Your Store

But why stop loading the page just for JavaScript?

The browser has to pause because it doesn’t know what the script will do until it fully loads and runs it. So, it waits for instructions before continuing.

In short, JavaScript can slow down page loading.

Luckily, there are ways to reduce this delay by telling the browser it can load some scripts later, instead of immediately. Some scripts aren’t essential for the initial page display and can wait until everything else is loaded to run.

Hence, the two key attributes: async and defer.

These attributes determine how and when your scripts are downloaded and executed, which can have a big impact on your Shopify store’s performance.

Async Load Method

When a script is loaded with the async attribute, the browser downloads the script asynchronously, meaning the script is fetched while the HTML is still being parsed.

Once the script is ready, it is executed immediately, without waiting for the rest of the page to finish loading.
This can speed up overall load time since the script doesn’t block other resources from being downloaded.

However, because the script executes as soon as it’s ready, it can interrupt the normal loading sequence, potentially leading to issues if the script depends on other elements that haven’t fully loaded yet.

Defer Load Method

The defer attribute also allows the browser to download the script while parsing the HTML, but with one key difference: the script execution is deferred until the entire HTML document has been fully parsed.

This means that even though the script is downloaded early, it won’t interfere with the loading and rendering of the page.

Scripts with the defer attribute are executed in the order they appear in the HTML, ensuring that dependent scripts are loaded in sequence.

This makes defer ideal for scripts that need the full HTML structure before running.

What are the key Differences Between Async and Defer

Understanding the differences between async and defer helps you choose the right method for optimizing script loading on your Shopify store.

Below is a breakdown of their technical differences:

• When scripts are downloaded: Both async and defer allow the browser to download scripts while the HTML is still being parsed, improving efficiency.
• When scripts are executed: Async executes the script as soon as it’s downloaded, which can disrupt the page load. Defer waits until the entire HTML has been parsed before executing, ensuring a smoother rendering process.
• Impact on rendering: Async can interrupt the rendering process, while defer ensures that script execution doesn’t block the loading of the rest of the page.

When to Use Async and Defer in Shopify

Choosing between async and defer for script loading in your Shopify store depends on the specific role and dependencies of each script.

Here’s some practical advice on when to use each method:

Async

Use the async attribute for scripts that can be executed independently and don’t rely on other scripts or the Document Object Model (DOM) being fully loaded.

These scripts can be downloaded and executed as soon as they are ready without affecting the rest of the page.

Best Shopify use cases for Async:

• Third-party analytics (e.g., Google Analytics, Facebook Pixel): These scripts don’t interact with the content of the page, so loading them asynchronously improves performance without disrupting the user experience.
• Ads and tracking scripts: Since ads typically load external resources, async ensures they load as fast as possible without delaying the rest of the page.

By using async for these types of scripts, you reduce their impact on your store’s load time and ensure they don’t block other important resources.

Defer

The defer attribute is best used for scripts that depend on the DOM being fully loaded before they can run. These scripts are still downloaded while the page is being parsed, but their execution is delayed until the entire HTML document has been loaded, preventing interruptions to the rendering process.

Best Shopify use cases for Defer:

• JavaScript libraries (e.g., jQuery or other frameworks): These libraries often interact with elements on the page, so deferring them ensures that all the HTML is fully loaded and available before the script runs.
• Custom scripts that manipulate the DOM: If your script modifies or interacts with page elements, use defer to ensure it doesn’t run before those elements are available.

In general, defer is ideal for critical scripts that need the page to be fully rendered before they execute, while async is better for non-essential or standalone scripts that don’t interfere with the rest of the page.

• Defer ensures script execution order: With defer, scripts are loaded in the order they appear in the HTML and executed after the entire HTML document has been fully parsed. This is crucial for scripts that depend on other scripts or require the full DOM to be loaded before running.
• No disruption to page rendering: Defer allows the browser to continue parsing the HTML while the scripts are being downloaded in the background. The scripts are executed only after the page content has been fully parsed, ensuring a smooth rendering process without interruptions.
• Async can cause execution issues: With async, scripts are executed as soon as they are downloaded, which means they might run before the HTML is fully parsed or before other scripts that they depend on. This can lead to problems if the script requires other elements on the page or depends on other scripts.

By strategically using async and defer, you can optimize your Shopify store’s performance and provide a faster, smoother experience for your customers.

Other Best Practices for Optimizing Shopify Store Scripts

In addition to using async and defer to improve your Shopify store’s script loading, there are other effective techniques that can further optimize performance.

Here are some best practices to consider:

Minimise the number of scripts

The more scripts you load on your site, the longer it takes to fully load the page.

To improve performance:

• Remove any unnecessary or unused scripts, including outdated third-party apps or tracking codes that no longer provide value.
• Audit your Shopify store regularly to ensure only essential scripts are included, and eliminate anything that adds unnecessary weight to your page.

Lazy Load non-critical scripts

Lazy loading allows you to delay the loading of non-essential scripts until they are actually needed.

This reduces the initial page load time since only the necessary resources are loaded upfront.

• For instance, scripts for features that appear lower down on the page or in pop-ups can be lazy loaded, allowing the page’s visible content to load faster.
• Some Shopify apps can make implementing this technique easier without requiring much technical knowledge.

Combine and minify JavaScript files

Combining multiple JavaScript files into a single file reduces the number of requests the browser needs to make, speeding up page load time.

Minifying these files further compresses them by removing unnecessary characters, such as white spaces, without changing the functionality of the code.

• Use tools like UglifyJS or Shopify apps such as Hyperspeed to automatically combine and minify your JavaScript files. This reduces the file sizes and helps your store load faster.

By applying these best practices—minimising scripts, lazy loading non-critical scripts, and combining/minifying files—you can significantly improve your Shopify store’s speed and overall performance.

These optimizations, paired with the use of async and defer, create a more efficient, faster-loading site that enhances the user experience.

The Benefits of Script Optimization for Shopify Store Performance

Optimizing how scripts load on your Shopify store offers several important benefits that directly impact both user experience and business performance. Here’s a recap of the key advantages of using async and defer:

Faster Page Loads

By using async and defer, scripts are downloaded and executed without blocking the rest of the page from loading.

This leads to faster overall load times, especially when dealing with third-party scripts like analytics or ads.

A faster website keeps users engaged and reduces the likelihood of them leaving your store due to slow load times.

Improved User Experience

Speed is crucial for user satisfaction.

When your Shopify store loads quickly, users can interact with the site more easily and enjoy a smoother experience.

Faster page loads mean less waiting time for your customers, which can directly lead to higher engagement, lower bounce rates, and increased conversion rates.

Better SEO and Higher Google PageSpeed Scores

Google uses site speed as a ranking factor, meaning that a faster site can improve your SEO performance.

Optimizing script loading with async and defer can help boost your Google PageSpeed scores, which not only impacts SEO but can also improve the visibility of your store in search results.

Better rankings mean more organic traffic and potential customers.

How to Implement Async and Defer in Shopify?

Adding async and defer attributes to your scripts is a simple yet effective way to improve your Shopify store’s load time.

Below is a step-by-step guide on how you can do it.

Important: Knowledgeable developers can identify script dependencies and ensure they load in the correct order. It’s advisable to consult one before making changes or have your developer handle the adjustments for you.

1. Access your Shopify theme files
   To start, you’ll need to access your theme files in Shopify:
   • From your Shopify admin, go to Online Store > Themes.
   • Click Actions on your current theme and select Edit Code.
2. Locate the script tags in your theme
   Most of the JavaScript files will be found in the theme.liquid file or other section files like header.liquid or footer.liquid.  Look for the script tags, which will look something like this: <script src="script.js"></script>
3. Identify Script Dependencies
   Before modifying the scripts, it’s important to check if there are any dependencies between them.Some scripts rely on others to load first. Make sure these dependencies are clearly identified.Once you’ve confirmed the correct order, you can apply the defer attribute to all dependent scripts to ensure they load in sequence without disrupting the page rendering.
4. Add the Async or Defer attribute
   Once you’ve found the relevant script tags, you can modify them by adding the async or defer attribute.
   • Async example: <script async src="script.js"></script> To load a script asynchronously, modify the script tag as follows:This tells the browser to download the script while it continues to load the rest of the page, and execute it as soon as it’s ready.
   • Defer example: <script defer src="script.js"></script> To defer a script’s execution until after the HTML has fully loaded, add the defer attribute like this: This ensures the script will download during page load but won’t run until the entire page is fully parsed, preventing any disruptions to the rendering process.
5. Handling Inline Scripts
   If you are using inline JavaScript, async or defer cannot be applied. In such cases, to defer the script, use  type="module":
   <script type="module">  //  Inline script content </script> However, note that module scripts do not automatically assign variables to the global scope. If your inline script needs to assign variables globally, you will need to explicitly do so using: window.variableName = value; This ensures the script variables are accessible globally when using type="module".
6. Save changes
   After adding the async or defer attribute to the script tags, click Save in the code editor to apply your changes to the live theme.

Optimize Script Loading Without Coding: Hyperspeed’s Intelligent JS Deferral

If you’re not comfortable with coding or prefer a simpler way to manage script loading, Shopify apps like Hyperspeed can help you optimize your site’s performance without manually editing theme files.

Hyperspeed’s intelligent JS deferral is a tool that lets you manage the deferral of non-essential scripts until the page has fully loaded, boosting load times and enhancing user experience without affecting functionality.

The app analyses your site’s code, identifies each JavaScript file, and lets you adjust the loading of individual scripts. Essential scripts can be prioritised to load immediately, while others can be deferred to prevent unnecessary delays.

Looking to improve your loading speed?
Explore the advantages of automating your JS deferral, Lazy Loading images, minifying codes—and much more!
Try Hyperspeed today!