> For the complete documentation index, see [llms.txt](https://help.appplaza.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.appplaza.app/speed-optimizer/speed-up/js-deferral.md).

# 📜 JS deferral

{% hint style="info" %}

### Who can use this feature?

JS deferral is available on the **Expert** plan.
{% endhint %}

### What is JS deferral?

Every app you install adds JavaScript to your store. A chat widget, a popup builder, a review tool — each one runs on every page, even before customers see anything. That pile of scripts slows down your initial load.

JS deferral holds those scripts back. Your page content loads first. The scripts only kick in when the customer scrolls, clicks, or taps — by which point they're already engaged with your store.

For more control, you can use the **Script manager** to decide exactly which scripts get deferred.

### Why use JS deferral?

* **Faster initial load** — your content appears before non-essential scripts run.
* **Tames app bloat** — keeps chat widgets, popups, and review tools from slowing down every page.
* **Better Core Web Vitals** — less JavaScript blocking the first render.
* **Granular control** — use Script manager to choose exactly which scripts defer and which load immediately.
* **No lost functionality** — deferred scripts still run as soon as the customer interacts.

### ⚙️ How to use JS deferral

#### Step 1: Open Self-optimize

Go to **Speed up → Self-optimize**.

*\[Screenshot: Speed up page with Self-optimize tab open]*

#### Step 2: Turn on JS deferral

Turn on **JS deferral**.

*\[Screenshot: JS deferral toggle switched on]*

#### Step 3: Apply to your theme

Click **Speed up now** and pick a theme to apply changes.

*\[Screenshot: Speed up now button and theme selection modal]*

#### Want more control? Use Script manager

1. Open **Script manager** inside the JS deferral settings.

   *\[Screenshot: Script manager panel with detected scripts list]*
2. Click **Check for new scripts** to scan your store. You'll see every script with its name, source, size, and where it's used.

   *\[Screenshot: Check for new scripts button + scripts table]*
3. For each script, pick how it should load:

   * **Immediate** — loads with the page (use for scripts your page needs right away).
   * **On user action** — waits until the customer clicks, scrolls, or taps.

   *\[Screenshot: load trigger dropdown with Immediate and On user action options]*
4. Save your changes.

### 📌 Merchant Notes

* JS deferral works on scripts added through **Shopify's Script Tag API**. Apps that inject scripts other ways may not appear in Script manager.
* Always click **Speed up now** after turning this on to apply the changes.
* Keep scripts your page needs right away set to **Immediate** — only defer non-essential ones to avoid breaking functionality.
* This feature requires the **Expert** plan.
* For an overview of all optimization features, see **Speed up**.

Contact us in live chat if you have any problems.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.appplaza.app/speed-optimizer/speed-up/js-deferral.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.