INP Fixes: Kill Long Tasks with Chrome Profiler (Plain English)

INP (Interaction to Next Paint) measures how quickly your page visually responds after a user action (tap, click, key). Bad INP usually means the main thread is stuck doing long JavaScript tasks (≥50 ms). This guide shows you, step by step, how to find those tasks with Chrome DevTools and fix them—without breaking WooCommerce or WordPress.

On Pofii’s Pofii-Tuned LiteSpeed & uncapped plans you already get a fast base. Pair that with the fixes below and your site will feel instant.

---

How to profile a slow interaction (2 minutes)

Step 1: Reproduce the jank

Open the page that feels slow (menu open, add-to-cart, search). Use a real device or simulate CPU 4× slow-down in DevTools for clarity.

Step 2: Record the interaction

1. Open Chrome DevTools → Performance
2. Click Record, perform the action (e.g., open mobile menu, add to cart), then Stop after ~5–10 seconds.
3. In the timeline, enable Web Vitals lane (three-dot menu → “Web Vitals”). DevTools highlights Longest Interaction.

Step 3: Zoom into the “Longest Interaction”

• Click the purple Interactions marker.
• On the Main thread below, look for Long tasks (thick bars; red triangle corners).
• Expand the task → expand Evaluate Script / Function Call to see which file & function caused the stall (e.g., theme.js, mega-menu.js, analytics.js).

Step 4: Identify the culprits

Common jank sources:

• Big theme bundles firing on every page
• Third-party scripts (chat, heatmaps, A/B, old tag managers)
• WooCommerce add-ons binding too many handlers
• “Cart fragments” refreshing mini-cart on every view (fix here: WooCommerce Cart Fragments)

Now fix what you just found.

---

Fix playbook (prioritized)

1) Defer and delay non-critical JavaScript

If a script doesn’t need to run before the first interaction, push it back.

LiteSpeed Cache quick win: turn on JS Defer and Delay JS (safe defaults here: LiteSpeed Cache for WordPress).

Manual delay on interaction (vanilla JS):

<script>
(function() {
  let loaded = false;
  function loadScriptOnce(src){ if(loaded) return; loaded = true;
    var s = document.createElement('script'); s.src = src; document.head.appendChild(s);
  }
  ['click','touchstart','keydown','mousemove','scroll'].forEach(evt=>{
    window.addEventListener(evt, ()=>loadScriptOnce('/js/noncritical-bundle.js'), {once:true, passive:true});
  });
})();
</script>

Loads your heavy bundle after the first user signal—INP improves because the main thread is free when they actually click.

---

2) Split long tasks into small chunks

If a function runs for 120 ms, break it into micro-tasks so the browser can paint between chunks.

// Bad: one giant loop blocks UI ~120ms
doExpensiveWork(items);

// Better: chunk work; let the browser breathe
const CHUNK = 50;
function chunkedWork(list, i=0){
  const end = Math.min(i+CHUNK, list.length);
  for(let x=i; x<end; x++){ doUnit(list[x]); }
  if(end < list.length) setTimeout(()=>chunkedWork(list, end), 0); // yield
}
chunkedWork(items);

For truly heavy stuff, consider Web Workers (off-main-thread).

---

3) Cut third-party bloat (or load when it’s needed)

• Move chat/heatmap/AB tools to after interaction (see snippet above) or fire only on pages that need them.
• In WordPress, dequeue scripts on sensitive pages (cart/checkout/search):

add_action('wp_enqueue_scripts', function () {
  if (is_cart() || is_checkout()) {
    wp_dequeue_script('hotjar');      // example handles
    wp_dequeue_script('crazyegg');
    wp_dequeue_script('ab-test');
  }
}, 100);

---

4) Reduce work at the moment of click

When the user clicks, do the minimum needed; schedule the rest.

button.addEventListener('click', () => {
  // immediate feedback
  button.setAttribute('aria-busy','true');

  // do the critical thing first
  submitOrder();

  // non-critical: postpone
  requestIdleCallback(()=> { preloadAccountTab(); prefetchRecommendations(); }, {timeout: 2000});
});

If requestIdleCallback isn’t available, use a short setTimeout.

---

5) Keep the DOM light & predictable

• Avoid re-rendering entire containers on click; update only the part that changed.
• Use event delegation (one listener on a parent instead of hundreds on children).
• Pre-measure dynamic elements (width/height) to avoid extra layout work.

---

6) WooCommerce specifics that help INP

• Disable/Delay Cart Fragments outside Cart/Checkout:
  Stop the AJAX Drag
• Payment SDKs: enqueue only on checkout; avoid loading them site-wide.
• Search & filtering: prefer server-rendered results + fast object cache.
  Pair with Redis: Object Cache (Redis vs Memcached)

---

Verify the win (repeat the profile)

1. Re-record the exact interaction.
2. Confirm the Longest Interaction shrank and the main-thread long tasks are now <50 ms.
3. Check INP in PageSpeed Insights after you deploy (field data trails; expect a few days to reflect).

Also make sure LCP is in good shape—fast render helps perceived responsiveness:
WooCommerce Image Speed and
Core Web Vitals (Plain English)

---

10-point INP checklist (copy/paste)

• Defer & delay non-critical JS (LSCache or manual)
• Load third-party scripts after interaction or only where needed
• Break big functions into micro-tasks (yield with setTimeout(…,0))
• Use event delegation; remove duplicate handlers
• Avoid full container re-renders on click
• Keep checkout/cart pages clean (no chat/heatmap there)
• Limit cart fragments to Cart/Checkout
• Use object cache for backend load (Redis)
• Re-profile the interaction; confirm long tasks <50 ms
• Monitor field INP in Search Console over time

---

FAQ

How fast is “good” INP?
≤200 ms for the vast majority of interactions.

Do I have to rewrite my theme?
Usually not. Deferring/delaying JS and trimming third-party scripts solve most INP issues.

Why do lab and field INP differ?
Field data reflects real users (devices, networks). Ship the fixes, then watch GSC over a few weeks.

---

Final word

INP improves when you do less at the moment of click. Use the Chrome Profiler to pinpoint long tasks, then defer, delay, or split them. On Pofii’s LiteSpeed-tuned stack, these changes shine—your pages stay responsive even under load.

---