Interaction to Next Paint (INP) Engineering: Mitigating JavaScript Execution Bottlenecks on Media-Heavy Shopping Sites

핵심 내용

• Measure INP in the field. Lab tools miss real interaction delays; use CrUX and the web-vitals library.
• Identify long tasks. Chrome DevTools Performance panel shows tasks over 50 ms that block interaction.
• Break up long tasks. Split heavy work into smaller chunks using setTimeout or scheduler.yield.
• Defer non-critical JavaScript. Load analytics, chat widgets, and recommendations after first interaction.
• Optimize event handlers. Debounce input handlers and avoid synchronous layout in click and key handlers.
• Reduce third-party impact. Audit scripts and remove or defer those that block the main thread.
• Use web workers. Move image processing and filtering off the main thread.
• Test on low-end devices. INP failures often appear only on slower hardware and networks.

Architecture

Interactions are queued behind whatever the main thread is doing. Long tasks from image decoding, filtering, and third-party scripts delay the response. Breaking tasks into smaller pieces and moving work off the main thread lets interactions complete within the INP threshold.

Production configuration

async function processItems(items) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);
    if (i % 50 === 0) {
      // yield to the browser to handle interactions
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

// load analytics after first interaction
let loaded = false;
function loadAnalytics() {
  if (loaded) return;
  loaded = true;
  const s = document.createElement('script');
  s.src = 'https://analytics.example.com/a.js';
  s.async = true;
  document.head.appendChild(s);
}
window.addEventListener('pointerdown', loadAnalytics, { once: true });

import { onINP } from 'web-vitals';
onINP(({ name, value, rating, attribution }) => {
  console.log(name, value, rating);
  // send to analytics
  navigator.sendBeacon('/analytics', JSON.stringify({ name, value, rating, target: attribution.interactionTarget }));
});

Edge cases from production

• Image decoding on the main thread blocks interaction; use loading='lazy' and decode='async'.
• React hydration can cause long tasks; profile and split components.
• Third-party scripts often re-introduce long tasks after optimization; re-audit regularly.
• INP thresholds differ by device; a passing lab score may fail in the field.

자주 묻는 질문