How to reduce unused JavaScript from your Shopify site

In this guide, we’ll explore techniques and best practices to reduce unused JavaScript in your Shopify store. By optimizing your JavaScript, you can enhance performance and provide a better user experience. We’ll cover assessment methods, techniques for eliminating unused code, and tips for managing JavaScript effectively.

Once you understand your JavaScript usage, we’ll discuss techniques to reduce unused code. This includes removing unused libraries, consolidating and minifying JavaScript files, and implementing code splitting and lazy loading. These strategies will streamline your codebase, improve loading times, and enhance performance.

Implementing the techniques and best practices discussed in this guide can significantly reduce unused JavaScript in your Shopify store. The result will be a faster, more efficient website with an exceptional user experience. Now, let’s dive into the details and optimize your Shopify store’s JavaScript for optimal performance.

Table of content

• Understanding unused JavaScript in Shopify
• Assessing your Shopify store’s JavaScript
• Techniques to Reduce Unused JavaScript from Shopify
  • 1. Prune apps and features
  • 2. Minification and compression
  • 3. Deferring JavaScript loading
  • 4. Asynchronous loading
  • 5. Code splitting
  • 6. Lazy loading
  • 7. Implement tree shaking
  • 8. Adopt HTTP/2
  • 9. Inline critical JavaScript
  • 10. Regular review and cleanup
• Best practices for JavaScript management
• Handling third-party apps and JavaScript
  • 1. Evaluate third-party apps
  • 2. Limit third-party scripts
  • 3. Regularly monitor performance
• Conclusion

Understanding unused JavaScript in Shopify

Unused JavaScript refers to irrelevant or deferrable JS code on your website. While that code isn’t essential for user experience, the browser prioritizes it when processing the page. As a result, the crucial elements of a website (think: above-the-fold content) are on standby until the render-blocking JavaScript takes its sweet time. 

Unused JavaScript can slow your page load speed, consume more bandwidth and resources, and reduce your SEO ranking and accessibility. Therefore, it is essential to understand what unused JavaScript is and how it affects your Shopify store.

There are various causes and sources of unused JavaScript in Shopify. Some of the common ones are:

• Conditional loading: This is when you load JavaScript code only needed for specific conditions or scenarios, such as device type, browser type, user interaction, etc. For example, load a script that handles a pop-up modal that only appears when a user clicks a button. However, the script is never used if the user never clicks that button.
• Browser compatibility: This is when you load JavaScript code only needed for specific browsers or versions, such as polyfills or fallbacks. For example, you might load a script that enables a feature not supported by older browsers. However, the script is never used if the user visits your site with a modern browser.
• Code errors: This is when you load JavaScript code that contains errors or bugs that prevent it from executing correctly. For example, you might load a script with a syntax error or a missing dependency. However, the script is never used if the browser encounters an error while parsing or running the script.

Assessing your Shopify store’s JavaScript

Before you set out to minimize unused JavaScript, you must first recognize the landscape. Grasping the extent and impact of unused JavaScript on your Shopify store’s performance forms the first mile of your optimization journey. An assessment pinpoints the issues and helps monitor improvements over time.

Measurement tools: your navigation aids

Fortunately, we’re not left wandering in the dark. Several robust tools can guide us in understanding the volume of unused JavaScript:

• Google Lighthouse: This open-source, automated tool for improving the quality of web pages provides a thorough performance audit, giving specific insights about unused JavaScript, which can be a great starting point.
• Chrome DevTools: Google Chrome browser comes with an embedded set of tools specifically for web developers. Its ‘Coverage’ tab visually shows you what code has been executed and what hasn’t, giving you a clear picture of the unused JavaScript landscape.
• WebPageTest: This is a productive tool that gauges performance from various global locations using actual consumer connection speeds and real browsers. It helps highlight third-party scripts contributing to unused JavaScript.
  

These tools won’t just tell you that you have unused JavaScrip. They can also show you a line-by-line breakdown of used and unused code in each script file. You can use these tools to find opportunities to reduce unused JavaScript in your Shopify store and improve its performance and user satisfaction.

Reading the map: interpreting the results.

Understanding the results from these tools is much like reading a map. The information can guide your optimization journey:

• Unused JavaScript is often reported in kilobytes (KB) or percentages. A high value in these metrics is a red flag—indicating substantial room for performance optimization.
• Particular attention should be paid to third-party scripts. These can contribute significantly to unused JavaScript and might not be immediately evident.
• Files that are larger and have high percentages of unused code should be your prime targets for reduction. They are the ‘big wins’ in your optimization journey.

An ongoing journey: continuous assessment

Assessing your Shopify store’s JavaScript isn’t a one-and-done task. It’s an ongoing journey that should be integrated into your regular performance optimization workflow:

• Regular audits should be scheduled to monitor the build-up of unused JavaScript. Just as a city routinely checks for vacant properties, so should you scan your site for ‘unused buildings.’
• When an app is added or removed or significant changes are made to your store’s functionality, an assessment should be conducted. These changes could inadvertently increase your unused JavaScript.
• Performance budgets can be set up to provide proactive control over your site’s performance. If your JavaScript (or overall site performance) begins to exceed this budget, you’ll know it’s time to find ways to cut back.

Armed with these insights from your JavaScript assessment, you can navigate toward a streamlined, optimized store. In the next section, we’ll explore the techniques you can employ to reduce unused JavaScript and make your Shopify store more performance-friendly.

Techniques to reduce unused JavaScript from Shopify

Effectively techniques to reduce unused JavaScript from Shopify store involves a blend of strategic removal, advanced loading techniques, and resource optimization. Below, we’ve broken down each technique in more detail, providing step-by-step guides and additional insight.

1. Prune apps and features

Bulky apps and unneeded theme features often contribute significantly to the unused JavaScript in a Shopify store. To address this, perform the following steps:

• App audit: Start with an in-depth review of your installed apps. Please list all the apps you use and critically evaluate their necessity and the functionality they provide to your store. If any are rarely used or have negligible impact on your store’s user experience or function, remove them.

• Theme feature audit:
  • Like with apps, evaluate the features that come with your Shopify theme.
  • Disable the ones you aren’t using.
  • Remember to check whether turning off a feature removes the associated JavaScript or if you must do it manually.

2. Minification and compression

Minifying and compressing your JavaScript files can significantly reduce their size, leading to quicker load times. Here’s how to go about it:

• JavaScript minification: Use a tool like UglifyJS or Terser to automatically remove all the unnecessary characters (spaces, new lines, comments) from your JavaScript files without affecting their functionality.
• Compression: Once your JavaScript files are minified, complete them using Gzip or Brotli compression. This can often reduce the file size by up to 70%, leading to faster transmission times between your server and your user’s browsers.

3. Deferring JavaScript loading

By deferring your JavaScript files, the browser can continue parsing and rendering the HTML of your page without waiting for JavaScript files to download and execute. Here’s how to do it:

• Add the `defer` attribute: Add the’ defer’ attribute for each script tag in your HTML. This tells the browser to defer the execution of the JavaScript file until after the HTML parsing is completed.

4. Asynchronous loading

Asynchronously loading your JavaScript files allows your webpage to render more quickly because the browser doesn’t have to wait for each JavaScript file to download and execute before continuing. Here’s how:

• Add the `async` attribute: Add the’ async’ attribute in each script tag in your HTML. This tells the browser to download the JavaScript file while continuing to parse the HTML and execute the script as soon as it’s ready.

5. Code splitting

Instead of offering your JavaScript in one large bundle, you can partition it into smaller segments that can be loaded when required. Here’s how to do it:

• Use a tool like Webpack: Webpack is a popular module bundler that supports code splitting out of the box. Using Webpack allows you to break your JavaScript into on-demand loaded chunks, aiding in reducing the JavaScript that has to be parsed during the initial page load.

6. Lazy loading

Lazy loading can delay the loading of JavaScript for certain elements (like images or videos) until they’re needed (like when a user scrolls to them). Here’s how:

• Use the Intersection Observer API: The Intersection Observer API allows you to control the behavior of different elements based on their visibility or position relative to the viewport. This means you can delay loading the JavaScript for an element until needed.

7. Implement tree shaking

Using Webpack allows you to break your JavaScript into on-demand loaded chunks, reducing the JavaScript that must be parsed during the initial page load. 

It relies on the static structure of ES6 module syntax, i.e., import and export. The ES6 module bundler rollup has popularized the name and concept.

• Use module bundlers supporting tree shaking: Webpack and Rollup offer tree-shaking capabilities. They eliminate dead code when creating a bundle by including only utilized modules in the final bundle. 

8. Adopt HTTP/2

HTTP/2 is a notable revamp of the HTTP network protocol utilized by the World Wide Web. A significant advantage of HTTP/2 lies in its “push” capability, enabling the server to respond with more data than requested by the client. This feature aids in decreasing the JavaScript required as the server can proactively provide data that it anticipates the web page will utilize.

• Enable HTTP/2 on your server: Check your server documentation on how to enable HTTP/2, or ask your hosting provider to enable it.

9. Inline critical JavaScript

Inlining involves taking your critical JavaScript (the JS which is crucial for rendering the above-the-fold content) and adding it directly to your HTML document instead of a separate file.

• Identify Critical JavaScript and Inline it: Critical is subjective and depends on what’s necessary for your site to function initially. Inlining this JavaScript can eliminate additional requests, reducing unused JS.

10. Regular review and cleanup

Regular code reviews and cleanup help maintain your JavaScript’s efficiency and can lead to the discovery and removal of unused code.

• Schedule regular reviews: Set a schedule for regularly reviewing your JavaScript code. Remove any unused or unnecessary code, keeping your files lean and efficient.

By leveraging these techniques, you can dramatically reduce the amount of unused JavaScript in your Shopify store, leading to quicker load times, smoother interactions, and a better user experience. Next, we’ll look at best practices for managing JavaScript in your Shopify store.

Best practices for JavaScript management

Effective JavaScript management is crucial in maintaining a lean and optimized Shopify store. Here, we’ll discuss several best practices that prevent unused JavaScript and enhance your store’s performance and maintainability.

1. Organize your code

Start by organizing your JavaScript code. Structured, well-organized code is easier to manage and debug, leading to more efficient development and updates.

• Use modular JavaScript: Break down your JavaScript code into smaller, reusable pieces or modules. Modules make your code more readable, maintainable, and easier to test.
• Follow a consistent naming convention: Implement and adhere to a consistent naming convention for variables, functions, classes, and IDs. This makes your code easier to read and understand.

2. Regularly update and maintain dependencies

Like other software, JavaScript libraries and frameworks can become outdated. Frequent updates and upkeep are crucial for your store’s optimization and security.

• Monitor and update dependencies: Use tools such as npm to keep track of and update your JavaScript dependencies regularly.
• Audit dependencies: Regularly audit your dependencies for any security vulnerabilities using tools such as npm audit or GitHub’s Dependabot.

3. Leverage modern JavaScript Syntax

Modern JavaScript syntax provides more efficient ways of accomplishing tasks and often results in cleaner, more readable code.

• Use ES6 or later Syntax: Use newer JavaScript syntax (ES6 or later) for more concise, readable code. This includes features like arrow functions, let/const, template literals, and destructuring.

4. Regular testing and debugging

Regular testing and debugging help you catch and resolve issues before they affect your store’s performance or user experience.

• Write test cases: Write test cases for your JavaScript code to ensure it behaves as expected under different conditions.
• Use debugging tools: Use browser debugging tools or Node.js debugging tools to identify and fix any issues or inefficiencies in your code.

5. Document your JavaScript code

Clear documentation makes your code easier to understand and maintain for yourself and other developers who might work on your store.

• Comment your code: Use comments to explain the purpose of sections of your code, incredibly complex or non-obvious parts.
• Maintain codebase documentation: Alongside inline comments, maintain a separate document detailing your codebase’s structure, modules, and individual functionality.

Handling third-party apps and JavaScript

Managing third-party apps and their associated JavaScript is critical to reducing unused JavaScript and optimizing your Shopify store’s performance. While these apps provide valuable functionality, they can also add significant load to your store if not appropriately managed. Here are some tips:

1. Evaluate third-party apps

Not all third-party apps are created equal. Some are well-coded and efficient, while others can slow down your store with bloated, inefficient code.

• App audit: Regularly review all third-party apps installed on your Shopify store. Remove any that aren’t providing enough value to justify their impact on your site’s performance.
• Research before installing: Before installing a new app, do some research. Look at reviews, check the app’s update history, and consider reaching out to other users to see how the app has impacted their site’s performance.

2. Limit third-party scripts

Each third-party app can add JavaScript to your store, contributing to your site’s overall JavaScript footprint.

• Monitor script loading: Use developer tools like Google’s Lighthouse or the Network tab in Chrome DevTools to monitor what scripts are loading on your site.
• Request app optimization: If an app loads a large amount of JavaScript, consider contacting the app developer. They may have options to optimize the script loading or to load it only on certain pages.

3. Regularly monitor performance

Even after an app is installed, monitoring its impact on your site’s performance is vital.

• Use performance monitoring tools: Use performance monitoring tools to track how your site’s performance changes over time. Tools like Google’s Lighthouse, WebPageTest, or Shopify’s online store speed report can provide valuable insights.
• Test before and after installation: Take a performance measurement before installing a new app. After installation, take another measurement. Comparing the two can give you an idea of the app’s impact on your site’s performance.

Conclusion

In this blog, we’ve journeyed through understanding unused JavaScript, assessing its impact, and exploring numerous techniques to reduce unused JavaScript from Shopify presence. We’ve also examined best practices for JavaScript management and handling third-party apps, crucial elements in maintaining an optimized and efficient Shopify store.

Unused JavaScript can negatively impact a Shopify store’s performance and user experience, affecting conversions and sales. Therefore, it’s paramount to continuously monitor and optimize JavaScript to ensure smooth operation and maintain a high-quality user experience.

Remember, maintaining your Shopify store is a constant process; even minor improvements in your JavaScript usage can lead to significant enhancements in performance over time. Keep striving for efficiency and a better user experience.