Shopify Reduce JavaScript Execution Time: Fix the PageSpeed Warning

Why Shopify Stores Get This JavaScript Warning

Lighthouse reports JavaScript execution time when the browser spends a large amount of main-thread time evaluating scripts. Shopify stores are especially exposed because the theme, apps, analytics pixels, consent tools, review widgets, search tools, collection filters, page builders, and cart drawers often run on the same page.

Google’s Core Web Vitals guidance separates loading, responsiveness, and visual stability. Heavy JavaScript hurts responsiveness most directly because clicks and taps wait behind long tasks. It can also delay LCP when scripts compete with the hero image, CSS, and font rendering. If you are also seeing poor INP or Total Blocking Time, read the Shopify INP guide and Shopify Total Blocking Time guide.

The warning is not telling you to delete every script. It is telling you to decide which scripts are critical for the first view and which can wait. A product page needs variant selection, price state, product media, add-to-cart, and sometimes subscriptions. It probably does not need chat, reviews, recommendations, heatmaps, and every marketing tag before the first interaction.

How to Find the Shopify JavaScript That Matters

Test the homepage, a best-selling product page, a collection page, and a landing page. Product pages often have the worst script mix because reviews, media galleries, subscriptions, recommendations, and product options all load there. Collection pages often suffer from filters, search, sorting, personalization, and large DOM updates.

In Chrome DevTools, open the Performance panel, record a mobile-throttled load, and look for long yellow scripting blocks. In PageSpeed Insights, check “Reduce JavaScript execution time,” “Minimize main-thread work,” and “Reduce unused JavaScript.” Shopify’s Web Performance Dashboard gives field trends, while PageSpeed gives page-specific diagnostics.

Use the same URLs every time. PageSpeed scores vary because test location, cache, throttling, app responses, and page state vary. The article on why Shopify speed test scores vary explains how to compare tests without chasing random movement.

Manual Step-by-Step: Reduce JavaScript Execution Time on Shopify

1. Remove apps and snippets you no longer use

Start with the app list, theme app embeds, and old snippets. Uninstalled apps can leave code behind in theme.liquid, sections, snippets, or customer event pixels. Remove code only after duplicating the theme and confirming the app is not active.

<!-- theme.liquid: remove old scripts only after confirming the app is gone -->
<!-- Example of stale code to investigate, not blindly delete -->
<script src="https://cdn.old-widget.example/app.js"></script>
{% render 'old-reviews-widget' %}

If this is a recurring problem, read the Shopify app leftovers guide before editing production theme files.

2. Defer scripts that are not needed for first interaction

Native defer is safe for many theme-owned scripts that do not need to block parsing. It keeps execution order for deferred scripts and runs after HTML parsing. Do not add it blindly to checkout-adjacent logic, consent code, or scripts that must initialize before the page is usable.

<!-- Better for non-critical theme JS -->
<script src="&lbrace;&lbrace; 'theme.js' | asset_url &rbrace;&rbrace;" defer></script>

<!-- Avoid async for scripts that depend on execution order -->
<script src="&lbrace;&lbrace; 'product-form.js' | asset_url &rbrace;&rbrace;" defer></script>

3. Load optional widgets after user intent

Chat, surveys, heatmaps, and some personalization widgets can often wait until after the first view, scroll, idle time, or a specific click. This reduces the first-load main-thread queue while keeping the tool available to shoppers who need it.

function loadChatWidget() {
  if (window.__chatLoaded) return;
  window.__chatLoaded = true;
  const script = document.createElement('script');
  script.src = 'https://example-chat-cdn.com/widget.js';
  script.async = true;
  document.head.appendChild(script);
}

window.addEventListener('scroll', loadChatWidget, { once: true, passive: true });
window.addEventListener('pointerdown', loadChatWidget, { once: true });

This pattern is useful for support widgets, but not for code that must record consent or revenue attribution before events fire. For app-heavy stores, compare this with fixing app scripts slowing down Shopify.

4. Stop initializing every component on every page

Many Shopify themes ship one large JavaScript file that initializes sliders, product media, cart drawers, collection filters, accordions, modals, and predictive search everywhere. Guard those initializers so pages only run what they need.

if (document.querySelector('[data-product-form]')) {
  import('./product-form.js').then(({ initProductForm }) => initProductForm());
}

if (document.querySelector('[data-collection-filters]')) {
  import('./collection-filters.js').then(({ initFilters }) => initFilters());
}

Dynamic imports require a build pipeline, so they are easier in custom themes than basic Shopify theme editing. If your theme does not support bundling, split scripts by template and include only what each template needs.

5. Use passive listeners for scroll and touch work

Scroll and touch handlers can block the browser if the browser has to wait to know whether the event calls preventDefault(). Use passive listeners when the handler only observes interaction.

window.addEventListener('scroll', updateStickyHeader, { passive: true });
window.addEventListener('touchstart', trackTouchIntent, { passive: true });

See the passive event listeners guide if PageSpeed also flags event listener issues.

Manual Fix vs Thunder Fix

What Not to Break

The riskiest speed work is script deferral that accidentally breaks buying behavior. Test variant changes, add-to-cart, cart drawer updates, discount code entry, subscription selections, dynamic checkout buttons, product recommendations, reviews, consent, analytics, and ad pixels. A faster page that loses conversion tracking or add-to-cart behavior is a failed optimization.

Also avoid stacking several speed apps. Multiple apps trying to defer the same script can cause hard-to-debug timing bugs. If you need a broad plan, use the complete Shopify speed optimization guide and compare options in the best Shopify speed apps guide.

How to Confirm the Fix Worked

Run PageSpeed Insights or a Shopify speed test on the same URLs, mobile first. Look for lower JavaScript execution time, fewer long tasks, lower Total Blocking Time, and better INP trends once field data updates. Google’s Core Web Vitals guidance recommends evaluating page experience at the 75th percentile, so do not judge long-term success from one lab run.

If JavaScript is only one part of the slowdown, keep going through render-blocking resources, large network payloads, and LCP optimization. Most real Shopify speed wins come from fixing the stack, not one isolated warning.

FAQ