Skip to main content

JS Optimization

JavaScript affects how fast your site becomes interactive (INP) and how stable it feels. But JS changes are also the fastest way to break menus, sliders, and checkout flows.

Rules of Engagement​

  • Pick one "JS owner" (one plugin/system) for defer/delay/minify. Disable duplicates elsewhere.
  • Prefer removing JS over delaying JS.
  • Defer first, then consider delaying execution.
caution

Delay/execution deferral is not a free win. It can break anything that must run before the first interaction.

Step 1: Audit What Runs​

On a representative page, identify:

  • which scripts are render-blocking
  • which scripts run long tasks on the main thread
  • which scripts are third-party and heavy

Good places to look:

  • Chrome DevTools Performance panel (long tasks)
  • Lighthouse Treemap (JS bytes)
  • Chrome DevTools Coverage (unused JS)

Step 2: Reduce the Payload​

Before you touch defer/delay toggles:

  • disable unused plugin features that enqueue JS site-wide
  • remove "legacy" helpers (for example, jQuery Migrate) if the site supports it
  • move optional widgets to only the pages that need them

Step 3: Defer Non-Critical Scripts​

Defer moves script execution later so HTML and CSS can render first.

Verification targets:

  • no console errors
  • menus and critical UI still work on first tap
  • no regressions on login/cart/checkout

Step 4: Delay Execution (Interaction-Based)​

Delay is best for non-critical third-party scripts and widgets (analytics, chat, embeds). Anything required for first interaction should be excluded.

Common delay/defer exclusion themes (examples)

Use patterns as a starting point, then validate per site:

Example exclusion patterns
jquery
woocommerce
cart-fragments
recaptcha
grecaptcha
contact-form
swiper
slick

Debugging Fast​

If something breaks:

  1. Check the browser console for the first error.
  2. Identify the failing script (stack trace + Network tab).
  3. Exclude that script from delay (or from defer), then re-test.
tip

"jQuery is not defined" usually means a dependent script ran before jQuery. Exclude the dependent script from your optimization until you can fix ordering cleanly.

Checklist​

  • Only one tool owns JS optimization features.
  • Critical flows verified (menu, forms, login, checkout if applicable).
  • No new console errors.
  • Delay is applied mostly to third-party/non-critical scripts.

What's Next​