JS deferral

The Script Manager and JS deferral are crucial tools in SEO for organizing and selectively loading various scripts on your website, enhancing site speed and user experience

Who can use this feature?

• This feature is available for Pro and Enterprise plan users.

What is JS deferral?

The JS deferral feature delays loading non-essential scripts like chat, popups, and widgets until the user interacts with the page. This reduces the amount of Javascript running at once, improving site speed and performance, especially on mobile devices.

Why JS Deferral matters for your store

You might install 3rd-party apps to enrich your store features and user experience.

This might cause problems:

• You have many used apps and scripts that have been added long ago without noticing

• Too many apps can slow down your site because they run a lot of Javascrip

To fix this, we delay loading non-essential scripts like chat, popups, and floating widgets until users interact with the page. This helps your store load faster, especially on mobile devices, by reducing the amount of Javascript running at once.

We also have a list of apps to prioritize or delay to make sure your store works well. This approach improves your store's performance and creates a smoother experience for your customers.

See our App Deferral for Shopify Store Speed Optimization deep dive post here to fully understand the idea behind this approach.

Does this impact how 3rd-party apps work?

No, the JS deferral feature does not affect the core functionality of 3rd-party apps. It only delays their scripts until the user interacts with the page, ensuring your store loads faster without compromising app performance.

How does it work?

1. In "Speed up customization" -> Click JS deferral

2. Click Turn on

3. Select a mode to optimize script: Standard, Smart, Expert

   
4. Click Save

   

If you remove the app, Speed up will be disabled after 48 hours. Then the store's score will be affected and may drop suddenly.

Script manager

Scripts are pieces of code that add features and functionality to your store (mostly from 3rd-party apps), such as popups, live chat, or analytics tracking.

You can manually manage all scripts on your store to improve page loading and user experience by customizing the Script manager.

This will let you configure each script behavior on your site. You select which scripts are allowed to run on your store.

For now, it will only manage your app script registered via Script Tag API, with OS 2 blocks, we are on the way to deliver this update SOON enough. With this update, customers will have more controls over the JS scripts on their website.

What's in the Script manager:

• Script: List of scripts on your site. You can click on each script to check

• Source: Shows where the script comes from, like a URL or app

• Size: Displays the file size of the script in kilobytes (KB)

• Used: Shows the percentage of the file that is actually loaded and used on your store

• Updated at: Shows the last time the script was updated

• Load on user action: The script will load only when a user interacts with the page

1. In speed up customization, click Script manager

   
2. Click Check for new scripts to load all scripts on your site

3. Select "On user action" to make the scripts load when user take action on your site.

   
4. Click Save.