INP Optimization Guide 2025: Fix Interaction to Next Paint

// Add INP monitoring with web-vitals library

import {onINP} from 'web-vitals';

onINP((metric) => {
  console.log('INP:', metric.value, 'ms');
  console.log('Interaction:', metric.entries[0]?.name);
  
  // Send to your analytics
  sendToAnalytics({
    name: 'INP',
    value: metric.value,
    rating: metric.rating, // 'good', 'needs-improvement', 'poor'
    interaction: metric.entries[0]?.name
  });
});

// Before: One long task
function processItems(items) {
  for (const item of items) {
    doExpensiveWork(item); // Blocks for entire loop
  }
}

// After: Yield to browser between chunks
async function processItems(items) {
  for (const item of items) {
    doExpensiveWork(item);
    
    // Let browser handle pending interactions
    if ('scheduler' in window) {
      await scheduler.yield();
    }
  }
}

// Polyfill for scheduler.yield()
function yieldToMain() {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

async function processItems(items) {
  const CHUNK_SIZE = 10;
  
  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);
    chunk.forEach(item => doExpensiveWork(item));
    
    await yieldToMain(); // Let browser breathe
  }
}

// Defer analytics, tracking, prefetching
requestIdleCallback(() => {
  sendAnalytics();
  prefetchNextPage();
}, { timeout: 2000 }); // Max 2s wait

// Before: Handler runs on every keystroke
input.addEventListener('input', (e) => {
  searchAPI(e.target.value); // Too frequent!
});

// After: Debounce to reduce calls
function debounce(fn, delay) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
}

input.addEventListener('input', debounce((e) => {
  searchAPI(e.target.value);
}, 300));

// Before: Everything in one handler
button.addEventListener('click', async () => {
  showLoadingSpinner();
  const data = await fetchData(); // Blocking!
  updateUI(data);
  sendAnalytics();
});

// After: Immediate visual feedback, defer the rest
button.addEventListener('click', () => {
  // Immediate: Visual feedback (fast INP)
  showLoadingSpinner();
  
  // Deferred: Heavy work
  requestAnimationFrame(async () => {
    const data = await fetchData();
    updateUI(data);
    
    requestIdleCallback(() => {
      sendAnalytics();
    });
  });
});

// Bad: Synchronous localStorage in handler
button.addEventListener('click', () => {
  const prefs = JSON.parse(localStorage.getItem('prefs')); // Blocks!
  applyPreferences(prefs);
});

// Good: Read storage outside handlers, cache in memory
let cachedPrefs = null;

// Load once on page start
requestIdleCallback(() => {
  cachedPrefs = JSON.parse(localStorage.getItem('prefs') || '{}');
});

button.addEventListener('click', () => {
  applyPreferences(cachedPrefs); // Fast - already in memory
});

// Load chat widget only after user scrolls or clicks
let chatLoaded = false;

function loadChatWidget() {
  if (chatLoaded) return;
  chatLoaded = true;
  
  const script = document.createElement('script');
  script.src = 'https://chat-widget.com/widget.js';
  document.body.appendChild(script);
}

// Trigger on interaction or scroll
window.addEventListener('scroll', loadChatWidget, { once: true });
document.addEventListener('click', loadChatWidget, { once: true });

// Or after a delay
setTimeout(loadChatWidget, 5000);

<!-- YouTube embeds: Use facade pattern -->
<lite-youtube videoid="VIDEO_ID"></lite-youtube>

<!-- Or native lazy loading for iframes -->
<iframe 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  loading="lazy"
  title="Video title"
></iframe>

// Bad: Read-write-read-write forces multiple layouts
elements.forEach(el => {
  const height = el.offsetHeight; // Read (forces layout)
  el.style.height = height + 10 + 'px'; // Write
});

// Good: Batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight); // All reads

elements.forEach((el, i) => {
  el.style.height = heights[i] + 10 + 'px'; // All writes
});

/* Skip rendering off-screen sections */
.section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px; /* Estimated height */
}

// Use React 18's concurrent features
import { useTransition, useDeferredValue } from 'react';

function SearchResults({ query }) {
  // Mark state updates as non-urgent
  const [isPending, startTransition] = useTransition();
  const [results, setResults] = useState([]);
  
  const handleSearch = (value) => {
    // Urgent: Update input immediately
    setQuery(value);
    
    // Non-urgent: Defer results update
    startTransition(() => {
      setResults(search(value));
    });
  };
  
  return (
    <div className={isPending ? 'opacity-50' : ''}>
      {results.map(r => <Result key={r.id} {...r} />)}
    </div>
  );
}

<!-- Use v-memo for expensive lists -->
<template>
  <div 
    v-for="item in items" 
    :key="item.id"
    v-memo="[item.id, item.selected]"
  >
    <ExpensiveComponent :item="item" />
  </div>
</template>

<!-- Use defineAsyncComponent for lazy loading -->
<script setup>
import { defineAsyncComponent } from 'vue';

const HeavyComponent = defineAsyncComponent(() =>
  import('./HeavyComponent.vue')
);
</script>

// Complete INP monitoring setup
import {onINP} from 'web-vitals';

onINP((metric) => {
  // Get interaction details
  const entry = metric.entries[0];
  const interactionTarget = entry?.target?.tagName;
  const interactionType = entry?.name; // 'click', 'keydown', etc.
  
  // Send to your analytics
  fetch('/api/analytics', {
    method: 'POST',
    body: JSON.stringify({
      metric: 'INP',
      value: metric.value,
      rating: metric.rating,
      url: window.location.href,
      interactionTarget,
      interactionType,
      // Include device info
      deviceMemory: navigator.deviceMemory,
      connection: navigator.connection?.effectiveType
    }),
    keepalive: true // Ensure it sends even on page exit
  });
});