Skip to main content

Delay JavaScript until user interaction

Heavy third-party scripts — Google Tag Manager, analytics, chat widgets, review and social widgets — run during page load and inflate Total Blocking Time (TBT) and Speed Index, even though the user does not need them until they start interacting with the page.

This feature holds back the scripts you choose until the first user interaction (a pointer, key, touch, or scroll event) or until a timeout fallback fires. The page paints and becomes interactive faster, and the deferred scripts run a fraction of a second later — typically with no visible difference to the user.

Note

This is an advanced feature. Incorrect include patterns can prevent third-party scripts from loading and break page functionality. Always validate your patterns with Dry Run before enabling it on a live store.

Configuration​

Open Stores → Configuration → Mirasvit Extensions → Google Page Speed Optimizer → JavaScript optimization and enable Delay JavaScript Until User Interaction. The full field reference is in General settings. In short:

  • Delay these scripts (include patterns) — the scripts you want to defer (one pattern per line).
  • Never delay these scripts (additional excludes) — scripts that must never be delayed.
  • Timeout fallback (ms, 0 = never) — run the delayed scripts anyway after this delay (default 5000).
  • Dry Run (log only) — log what would be delayed without changing the page.

How it works​

For every page (non-AJAX), the extension scans the <script> tags in the HTML:

  1. A script is a candidate only if it matches one of your include patterns.
  2. Candidates that match the built-in safety excludes or your additional excludes are left untouched.
  3. Remaining candidates are rewritten to a neutral type so the browser does not execute them on load. A tiny inline loader listens for the first user interaction (or the timeout) and then restores the original scripts so they execute in order.

Built-in safety excludes​

The following are always protected and cannot be delayed, because delaying them would break Magento's core JavaScript: RequireJS (requirejs), Magento core JS (mage/), Magento_Ui, jQuery (jquery), Knockout (knockoutjs), the mixin loader (mixins.js), versioned static assets (/static/version), x-magento-init, mage-init, and the Page Builder runtime (Magento_PageBuilder). Your additional excludes are appended to this list.

  1. Enable Dry Run and Delay JavaScript Until User Interaction, then add your include patterns (start with one tag, e.g. googletagmanager.com).
  2. Load a few representative pages and inspect var/log/mst_optimize_delay_js.log to confirm only the intended scripts are listed.
  3. Turn Dry Run off to apply the delay on the storefront.
  4. Test the affected functionality (tag firing, chat widget, reviews) by interacting with the page, and verify the scripts run after the first interaction.
  5. Add more include patterns one at a time, re-validating with Dry Run each time.

Troubleshooting​

A third-party feature stopped working. The script is being delayed when it should not be. Add a pattern that uniquely identifies it to Never delay these scripts, or make your include pattern more specific so it no longer matches that script.

Tags do not fire for users who bounce immediately. Analytics tags only run after the first interaction. If a user leaves without interacting, the tag fires when the Timeout fallback elapses. Lower the timeout if you need tags to fire sooner, but keep it high enough to still gain the TBT benefit (the default 5000 ms is a good starting point). Avoid 0 unless you are certain every relevant tag does not need to run on bounce.

Nothing is being delayed. Confirm the master switch is on and Dry Run is off, and check that your include patterns actually match the script src (or inline content) — re-enable Dry Run and read var/log/mst_optimize_delay_js.log to see what was evaluated. Remember that core Magento scripts are never delayed by design.