INP — Interactivity

Poor INP —
JavaScript Execution Bloat

Your client's site has too much JavaScript blocking every interaction.

Where to find it: PageSpeed Insights > Opportunities > Reduce Unused JavaScript > Minimize Main-Thread Work

What It Is

JavaScript execution bloat occurs when a site loads and executes significantly more JavaScript than it needs — typically through large framework bundles, unused library code, or unoptimized custom scripts. When the browser's main thread is occupied parsing, compiling, and executing JavaScript, it can't respond to user interactions. Every click, tap, and keystroke is queued and delayed until the JavaScript execution completes. On sites with 500KB–2MB of JavaScript, this can result in interaction delays of 500ms or more — well into the Poor INP range.

Why It Matters

JavaScript is the most expensive resource type for browsers to process. Unlike images, which only require download and decode, JavaScript requires download, parse, compile, and execute — four sequential steps that all run on the main thread. The growth of JavaScript frameworks (React, Vue, Next.js) and plugin ecosystems (WordPress plugins) has made JavaScript bloat one of the most common performance problems on modern websites. Agencies that can diagnose and quantify JavaScript bloat — and prescribe specific fixes — have a clear technical upsell into development retainers.

Root Diagnostics

Common Causes

Understanding why this failure occurs is the first step to fixing it permanently.

Unused JavaScript Code

Libraries and framework code that's loaded but never executed on the page. PageSpeed Insights flags this directly — often 50–80% of loaded JavaScript is unused on any given page.

No Code Splitting

The entire JavaScript application bundle loads on every page, even though most pages only need a fraction of it. Without code splitting, visiting the homepage downloads the code for every other page too.

Heavy WordPress Plugin Scripts

WordPress plugins each add their own JavaScript files, many loaded on every page regardless of whether the page uses the plugin's functionality. A site with 20 plugins can easily load 1MB+ of plugin JavaScript.

Unoptimized Event Listeners

JavaScript event listeners that do heavy computation synchronously on every scroll, resize, or keystroke event. These fire continuously and can consume significant main thread time even without large bundle sizes.

Interactive Standard Operating Procedure

The Fix Blueprint (Interactive SOP)

Check off each step to monitor your implementation progress live!

Implementation Progress: 0% Completed (0/7)

1. Measure Total JavaScript Payload

Run the page through PageSpeed Insights and find 'Reduce unused JavaScript' in Opportunities. Note the total JavaScript transferred and the estimated savings. Also check Chrome DevTools Coverage tab for unused bytes by file.

2. Identify the Largest JS Files

In Chrome DevTools Network tab, filter by JS, sort by Size. The largest files are your highest-impact targets. Cross-reference with the Coverage tab to see what percentage of each large file is actually used.

3. Implement Code Splitting for Framework Sites

For React, Vue, Next.js, or Nuxt sites, implement dynamic imports for route-specific components. This ensures each page only loads the JavaScript it actually needs rather than the full application bundle.

4. Audit WordPress Plugin Scripts

For WordPress sites, install Query Monitor or Asset CleanUp Pro to see which plugins are loading JavaScript on each page type. Dequeue plugin scripts on pages where the plugin isn't used — this alone can reduce JS payload by 30–60%.

5. Tree-Shake and Minify

Ensure the build process includes tree-shaking (removing unused exports) and minification. For WordPress, use a performance plugin like WP Rocket that handles JS optimization automatically.

6. Replace Heavy Libraries with Lighter Alternatives

Audit which libraries are loaded and whether lighter alternatives exist. jQuery can often be replaced with vanilla JS. Moment.js (67KB) can be replaced with Day.js (2KB). Lodash can be partially imported rather than fully loaded.

7. Validate with Performance Panel

After changes, record a page interaction in Chrome DevTools Performance panel. Look for a reduction in Long Tasks and total main thread JavaScript execution time. Measure the INP score before and after.

Tools

Chrome DevTools Coverage Tab
Free | Shows exact bytes of unused JavaScript per file — the essential diagnostic for JS bloat
Bundlephobia
Free (bundlephobia.com) | Shows the size cost of any npm package and suggests lighter alternatives
Query Monitor (WordPress)
Free WordPress plugin | Shows which plugins are loading scripts on each page type — essential for WordPress JS audits

Time to Fix

1–2 hours

To measure JS payload and identify unused code

Days to Weeks

Quick wins (hours) | Code splitting & refactoring (developer days)

Pro Tip

Plugin script dequeuing is the fastest win on WordPress sites — start there.

On WordPress sites, the fastest path to meaningful JavaScript reduction isn't refactoring — it's dequeuing plugin scripts on pages where those plugins aren't active. A contact form plugin loading its scripts on every blog post, a WooCommerce loading cart JavaScript on a static landing page — these are common, fast to fix, and deliver immediate INP improvements without touching a single line of application code.

Poor INP — JavaScript Execution Bloat