Understanding INP : A guide for SEOs

In March 2024, Google made a significant change to Core Web Vitals by replacing First Input Delay (FID) with Interaction to Next Paint (INP).

This change represents a shift in how Google measures user experience, and as SEO professionals, we need to understand and adapt.

As someone who's spent years optimizing websites for performance across various industries, I've seen firsthand how this metric can impact rankings and user experience.

In this guide, I'll break down what INP is, why it matters, and most importantly, how you can improve it without being a developer.

What is INP?

Interaction to Next Paint (INP) measures how responsive your website is to user interactions throughout the entire user journey.

While the previous metric (FID) only measured the first interaction, INP evaluates all interactions during a user's visit and reports the worst one as the final score.

When users click a button, tap on a menu, or press a key, they expect an immediate response. INP measures the time from when a user initiates an interaction, to when the next frame is painted on the screen, showing visual feedback that their action was received.

The scoring thresholds for INP are:

• Good: 200 milliseconds or less 😊
• Needs improvement: Between 200 and 500 milliseconds 😐
• Poor: Greater than 500 milliseconds 🥺

For SEO purposes, I recommend aiming to have INP under 200 milliseconds for at least 75% of your page loads across both mobile and desktop devices.

Understanding interactions - key concepts for INP

To understand INP, we need to break down what constitutes an "interaction" in the context of this metric.

An interaction consists of three main components:

1. Input delay: Time from when the user initiates an action until the browser is able to begin processing event handlers
2. Processing time: Time it takes for the browser to execute all event callbacks associated with the interaction
3. Presentation delay: Time required to render the next frame that shows the result of the interaction

INP captures the entire duration from input to visual feedback, which gives us a more complete picture of the user experience than FID did. This is especially important for websites with complex interactive elements like e-commerce filters, form submissions, or navigation menus.

What interactions are considered for INP?

Not all user actions count toward your INP score. Understanding which ones do is critical for focused optimization. Google specifically measures:

• Mouse clicks: Button clicks, link clicks, checkbox toggles, etc.
• Taps on touchscreens: Tapping navigation items, buttons, forms, etc.
• Keyboard inputs: Key presses, typing in form fields, keyboard navigation

Notably, these continuous interactions are NOT included in INP measurement:

• Scrolling
• Hovering
• Pinching or zooming
• Dragging elements

Why does this matter? Because you should focus your optimization efforts on the discrete interactions that actually impact your INP score.

For example, if your site has a complex filtering system that takes 700ms to respond when clicked, that would result in a poor INP score. But if your infinite scroll feature is somewhat laggy, that won't directly affect INP (though it might still frustrate users).

Common INP issues and how to address them

Based on my experience optimizing websites, here are the most common INP issues I've encountered and how to fix them:

Issue 1: Heavy JavaScript execution on the main thread

The problem: When a user interacts with your page, large JavaScript operations block the main thread, preventing the browser from responding to the interaction quickly.

How to identify it: Use Chrome DevTools Performance panel to record interactions and look for long tasks (yellow blocks) when you click or tap elements.

How to fix it:

1. Break up long tasks into smaller, asynchronous operations:

// Before: Processing everything at once
function handleFilterClick() {
  const products = fetchAllProducts();
  const filtered = filterProducts(products);
  renderProductGrid(filtered);
  updateUrlParameters();
  trackAnalyticsEvent();
}

// After: Breaking up the work
function handleFilterClick() {
  // Show immediate visual feedback
  showLoadingIndicator();
  
  // Use setTimeout to move work off the current task
  setTimeout(() => {
    const products = fetchAllProducts();
    
    // Use requestAnimationFrame to schedule visual updates
    requestAnimationFrame(() => {
      const filtered = filterProducts(products);
      renderProductGrid(filtered);
      
      // Defer non-essential work
      setTimeout(() => {
        updateUrlParameters();
        trackAnalyticsEvent();
      }, 0);
    });
  }, 0);
}

2. Move intensive work to Web Workers:

// Create a worker
const worker = new Worker('filter-worker.js');

// Handle the filter click
function handleFilterClick() {
  // Show immediate visual feedback
  showLoadingIndicator();
  
  // Send data to worker
  worker.postMessage({
    action: 'filterProducts',
    filters: getCurrentFilters()
  });
}

// Receive the result from the worker
worker.onmessage = function(e) {
  renderProductGrid(e.data.products);
  hideLoadingIndicator();
};

Issue 2: Too many event listeners with inefficient callbacks

The problem: Each event listener adds overhead, and poorly optimized event handlers can cause significant delays.

How to identify it: Check the Event Listeners tab in Chrome DevTools Elements panel to see how many listeners are attached to interactive elements.

How to fix it:

1. Use event delegation instead of multiple listeners:

// Before: Multiple listeners on each button
document.querySelectorAll('.product-card button').forEach(button => {
  button.addEventListener('click', handleButtonClick);
});

// After: One listener using event delegation
document.querySelector('.product-grid').addEventListener('click', (e) => {
  if (e.target.matches('button') || e.target.closest('button')) {
    handleButtonClick(e);
  }
});

2. Implement debouncing and throttling for frequent events:

// For search inputs or other frequent interactions
const searchInput = document.querySelector('#search-input');

// Debounced search handler
const debouncedSearch = debounce(function(value) {
  performSearch(value);
}, 300);

searchInput.addEventListener('input', function(e) {
  // Show immediate feedback that the input was received
  showTypingIndicator();
  
  // Execute the actual search with debounce
  debouncedSearch(e.target.value);
});

// Debounce helper function
function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

<!-- Before: Loading third-party script immediately -->
<script src="https://analytics.example.com/tracker.js"></script>

<!-- After: Delaying load until idle time -->
<script>
  // Add analytics after the page is interactive
  window.addEventListener('load', () => {
    setTimeout(() => {
      const script = document.createElement('script');
      script.src = 'https://analytics.example.com/tracker.js';
      document.body.appendChild(script);
    }, 2000); // 2 seconds after load
  });
</script>

<iframe 
  src="https://third-party-widget.com/embed" 
  sandbox="allow-scripts allow-same-origin" 
  loading="lazy"
  width="300" 
  height="200">
</iframe>

/* Add simple transitions for immediate feedback */
.button {
  background-color: #3498db;
  transition: background-color 0.1s ease;
}

.button:hover, .button:active {
  background-color: #2980b9;
}

/* Implement skeleton screens for loading content */
.product-card.loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

4. Optimize images and fonts

Resources that aren't properly optimized can impact interactivity:

• Use modern image formats (WebP, AVIF)
• Implement responsive images using srcset
• Optimize font loading with font-display: swap

INP optimization: long-term solutions

For more substantial improvements, consider these strategies that may require more development resources:

1. Implement Web Workers for intensive tasks

Web Workers allow JavaScript to run in a background thread, keeping the main thread free for user interactions:

// main.js
const worker = new Worker('search-worker.js');

document.querySelector('#search-button').addEventListener('click', () => {
  // Show immediate feedback
  showSearchingIndicator();
  
  // Send search query to worker
  worker.postMessage({
    query: document.querySelector('#search-input').value,
    filters: getCurrentFilters()
  });
});

worker.onmessage = function(e) {
  // Update UI with search results
  displaySearchResults(e.data.results);
  hideSearchingIndicator();
};

// search-worker.js
self.addEventListener('message', function(e) {
  const results = performComplexSearch(e.data.query, e.data.filters);
  self.postMessage({ results });
});

2. Implement Virtual Scrolling for long lists

For pages with long lists or tables, virtual scrolling can significantly improve performance:

// Pseudocode for virtual scrolling implementation
const containerHeight = 500; // px
const itemHeight = 50; // px
const totalItems = 10000;
const visibleItems = Math.ceil(containerHeight / itemHeight);

// Only render items that are visible
function renderVisibleItems(scrollTop) {
  const startIndex = Math.floor(scrollTop / itemHeight);
  const endIndex = Math.min(startIndex + visibleItems + 1, totalItems);
  
  // Clear and render only the visible portion
  listContainer.innerHTML = '';
  for (let i = startIndex; i < endIndex; i++) {
    const item = createItemElement(data[i]);
    item.style.transform = `translateY(${i * itemHeight}px)`;
    listContainer.appendChild(item);
  }
}

// Set container height to accommodate all items
listContainer.style.height = `${totalItems * itemHeight}px`;

// Update on scroll
listContainer.addEventListener('scroll', () => {
  renderVisibleItems(listContainer.scrollTop);
});

3. Progressive loading for complex interfaces

Instead of loading everything at once, load components progressively:

// Load and initialize components in order of importance
document.addEventListener('DOMContentLoaded', () => {
  // Critical components first
  initHeader();
  initMainContent();
  
  // Less critical components after a delay
  setTimeout(() => {
    initSidebar();
    initRelatedContent();
    
    // Non-essential components after interaction or idle time
    if ('requestIdleCallback' in window) {
      requestIdleCallback(() => {
        initFooter();
        initRecommendations();
      });
    } else {
      setTimeout(initFooter, 2000);
      setTimeout(initRecommendations, 3000);
    }
  }, 500);
});

INP for different website types

Different types of websites face unique INP challenges. Here's what I've learned working across various industries:

E-commerce websites 🛒

Challenges:

• Complex product filtering and sorting
• Cart and checkout interactions
• Product image galleries and quick-view features

Solutions:

• Implement lazy-loading for product images
• Use debouncing for search and filter inputs
• Consider server-side rendering for product listings
• Optimize add-to-cart and checkout flows for responsiveness

News and media sites 📰

Challenges:

• Ad scripts blocking interactivity
• Social sharing widgets
• Image galleries and video players

Solutions:

• Defer loading of ads until after critical content
• Optimize video player initialization
• Use intersection observer for lazy-loading comments and social widgets
• Implement progressive loading for article content

SaaS and web applications 💼

Challenges:

• Complex dashboards with multiple interactive elements
• Data visualization rendering
• Real-time updates and notifications

Solutions:

• Use Web Workers for data processing
• Implement virtualization for large data sets
• Break complex dashboards into separate loadable sections
• Consider using more efficient frameworks for UI rendering

Common misconceptions about INP

Throughout my conversations with SEO professionals, I've encountered several misconceptions about INP:

1. "INP is just a new name for FID"

While FID only measured the delay before the first interaction was processed, INP measures the entire interaction—from input to visual feedback—for all interactions throughout the page lifecycle. This is a fundamentally different and more comprehensive approach.

2. "Only the first interaction matters"

Unlike FID, INP considers all interactions throughout the user's visit. This means that optimization needs to focus on all interactive elements, not just those used during initial page load.

3. "JavaScript-heavy sites will always have poor INP"

Modern JavaScript frameworks and libraries can deliver excellent INP scores when implemented properly. The key is efficient code, proper resource prioritization, and thoughtful interaction design.

4. "Server improvements will fix INP issues"

While server response time impacts overall page speed, most INP issues occur on the client side after the page has loaded. Focus on frontend optimization for the biggest INP improvements.

Conclusion

Optimizing for INP is not just about improving a metric—it's about creating a genuinely better user experience. When users interact with your site and get immediate feedback, they're more likely to stay engaged, convert, and return.

The key takeaways I want to leave you with are:

1. INP measures the responsiveness of all interactions throughout the user journey
2. Focus on optimizing the most critical interactive elements on your page
3. Immediate visual feedback is essential for good perceived performance
4. Monitor your INP continuously, as performance can degrade over time with new features and content

As browsers and web standards evolve, performance best practices will continue to change. That's why I built PageRadar to help SEO professionals monitor Core Web Vitals over time and receive alerts when performance degrades.

I hope this guide helps you improve your site's INP and deliver a more responsive experience to your users while boosting your search performance. 🚀

Additional resources

For those looking to dive deeper, here are some resources I recommend:

• Web.dev INP optimization guide
• Google's Core Web Vitals documentation
• Chrome DevTools Performance panel tutorial
• PageRadar's free Core Web Vitals monitoring tool

This article was last updated on May 10, 2025, to reflect the latest Core Web Vitals standards and optimization techniques.

About the author

Samir Belabbes is the Head of SEO at North Star Network, where he leads a team of SEO professionals serving sports media websites in over 30 countries. With more than 7 years of experience in technical SEO, performance optimization, and digital marketing, Samir specializes in improving website performance for high-traffic websites.

As an instructor at SKEMA Business School, Samir teaches advanced SEO techniques to master's degree students. His background includes SEO management for multiple industries including sports media, gambling/casino, and insurance sectors.

Samir is passionate about web performance optimization and helping SEO professionals understand technical concepts in accessible ways. He founded PageRadar.io to help website owners monitor and improve their Core Web Vitals.

Connect with Samir on LinkedIn