JS Interaction Delay holds back all non-critical JavaScript until the user first interacts with the page — a scroll, click, mouse move, or keypress. This produces the highest possible initial performance scores because the browser has nothing to execute on load, resulting in near-zero Total Blocking Time (TBT).
Dashboard path: Cache Settings → Asset Optimization
Section: JS Interaction & Compression
Plan: Pro only
Settings #
| Setting | Type | Plan | Description |
|---|---|---|---|
| JS Interaction Delay | Toggle | Pro only | Holds all non-critical scripts until the user’s first interaction event. |
How It Works #
Normally, JavaScript files are downloaded and executed as the browser loads the page, blocking rendering and consuming main thread time. With JS Interaction Delay:
- On page load, all non-critical scripts are intercepted and not executed.
- The page renders immediately with only HTML and CSS.
- The moment a user interacts (scroll, click, keypress, mouse move), the held scripts are released and execute normally.
- From that point forward the site behaves exactly as without the setting.
Performance Impact #
| Metric | Typical improvement |
|---|---|
| Total Blocking Time (TBT) | Drops to near 0ms on initial load |
| Largest Contentful Paint (LCP) | Significant improvement (no JS blocking render) |
| Time to Interactive (TTI) | Measured after first interaction — may appear unchanged in lab tests |
| PageSpeed Score | Often jumps 10–25 points |
When to Use #
| Site type | Safe to enable? |
|---|---|
| Blog, news site, content pages | ✅ Yes — no JS needed before interaction |
| Landing page / marketing page | ✅ Yes — best use case |
| WooCommerce product pages | ⚠️ Test — cart JS must still work after first interaction |
| WooCommerce cart / checkout | ❌ Exclude these pages — JS required immediately |
| Membership / dashboard pages | ❌ Not recommended — JS-heavy before interaction |
| Sites with above-the-fold sliders or animated heroes | ⚠️ Test — animation may not start until interaction |
How to Enable #
- Go to Cache Settings → Asset Optimization.
- Under JS Interaction & Compression, toggle JS Interaction Delay to ON.
- Click Save Changes.
- Test every interactive element across the site — menus, cart, popups, forms, sliders.
Troubleshooting #
| Symptom | Likely cause | Fix |
|---|---|---|
| Site appears frozen until you scroll | Expected behaviour — JS loads on first interaction | This is correct; if problematic, disable the feature |
| Hero slider / animation not playing | Slider JS deferred until interaction | Consider disabling JS Interaction Delay if animation is business-critical |
| WooCommerce cart not working | WooCommerce JS delayed | Disable for cart and checkout pages (use Full Page Cache exclusions) |
| Chat widget not appearing | Chat JS delayed until interaction | This is often acceptable — chat widgets load on first scroll |
| JS errors after interaction | Script dependency order broken | Disable JS Interaction Delay; switch to Defer Scripts instead |
Tips #
Note: JS Interaction Delay is the most aggressive JavaScript optimization available. Enable it last, after all other JS optimizations are stable and tested.
Tip: Use Defer Scripts first — it is safer and still provides major PageSpeed improvements. Switch to JS Interaction Delay only if you need the maximum possible TBT score.
Note: This feature is available on Pro plans only. Free plan users see the section labelled “Compression” without the JS Interaction Delay toggle.
