How to fix poor INP scores caused by long-running JavaScript tasks

When users interact with your website, they expect things to happen immediately. However, third-party scripts (like cookie consent popups) can slow down these interactions by running code that blocks the browser from updating what the user sees.

By using yielding strategies and optimising how elements appear and disappear, you can make your website feel much more responsive. These techniques have helped some websites improve their Interaction to Next Paint (INP).

How to solve responsiveness issues

Step 1: Find the Problem Using Chrome DevTools

1. Open Chrome DevTools by pressing F12 or right-clicking and selecting “Inspect”
2. Go to the Performance tab
3. Click record and interact with your website
4. Look for long tasks that appear after you click something
5. Click on these tasks to see what code is running for too long

Pay attention to what happens after users click buttons. Often, the problem is that too much work happens all at once before the screen updates.

Step 2: Implement Yielding Strategies

Once you know what’s causing delays, add strategic yields to let the browser update what the user sees. Here’s how to do it:

For High-Priority Tasks:

function yieldToMainUiBlocking() {
  return new Promise((resolve) => {
    if ('scheduler' in window) {
      if ('yield' in window.scheduler) {
        return window.scheduler.yield().then(() => resolve(true));
      }

      if ('postTask' in window.scheduler) {
        return window.scheduler.postTask(() => resolve(true), { priority: 'user-blocking' });
      }
    }

    resolve(false);
  });
}

For Medium or Background Tasks:

function yieldToMainBackground() {
  return new Promise((resolve) => {
    if ('scheduler' in window) {
      if ('yield' in window.scheduler) {
        return window.scheduler.yield().then(() => resolve(true));
      }

      if ('postTask' in window.scheduler) {
        return window.scheduler.postTask(() => resolve(true), { priority: 'user-visible' });
      }
    }

    setTimeout(() => { resolve(true) }, 0);
  });
}

Using Yields in Your Code:

Break up long-running tasks by adding yields:

async function handleButtonClick() {
  // Do the most important part first
  saveUserChoice();
  
  // Yield to let the screen update
  await yieldToMainBackground();
  
  // Now do the less important stuff
  updatePreferences();
  
  // Yield again if needed
  await yieldToMainBackground();
  
  // Finish up
  logActivity();
}

Step 3: Optimize Rendering Operations

Removing elements from a page can be surprisingly slow. Try this instead:

1. First, hide elements with CSS (which is fast):

// When user clicks "close" popup.style.display = 'none'; // Hides it immediately // Then remove it from the page later when the browser isn't busy if ('requestIdleCallback' in window) { requestIdleCallback(() => { popup.remove(); // Actually removes it from the page }); } else { setTimeout(() => { popup.remove(); }, 50); // Backup option if browser doesn't support requestIdleCallback }

This technique (sometimes called “lazy de-rendering”) makes the element disappear instantly for the user, while the heavier DOM work happens later.

Step 4: Optimize Your Dependencies

If you’re using third-party libraries, try these improvements:

Cache and reuse calculated results

// Before: Calculate the same thing multiple times function getResult(input) { return heavyCalculation(input); } // After: Save and reuse previous calculations const savedResults = new Map(); function getResult(input) { if (!savedResults.has(input)) { savedResults.set(input, heavyCalculation(input)); } return savedResults.get(input); }

Reduce unnecessary loops

// Before: Process everything function processItems(items) { for (const item of items) { for (const property of Object.keys(item)) { // Process each property } } } // After: Only process what you need function processItems(items) { const neededProperties = ['name', 'email']; // Only what we care about for (const item of items) { for (const property of neededProperties) { if (property in item) { // Process only what's necessary } } } }

Step 5: Measure and Validate Your Improvements

1. Use Chrome DevTools to compare performance before and after your changes
2. Set up Real User Monitoring (RUM) to track INP with real visitors
3. Make sure your changes don’t accidentally hurt other important metrics

Conclusion

Remember to keep checking your website’s performance as you add new features, especially when adding third-party scripts. Making your site responsive isn’t just good for users, it’s becoming increasingly important for search rankings too.