INP‑केंद्रित इमेज डिलीवरी 2025 — decode/priority/स्क्रिप्ट समन्वय से अनुभव सुरक्षित रखें

प्रस्तावना

LCP सुधार महत्वपूर्ण है, पर 2024–2025 में INP (Interaction to Next Paint) अक्सर नजरअंदाज हो जाता है। पहली इंटरैक्शन के आसपास भारी इमेज डिकोडिंग या मेन‑थ्रेड इनिशियलाइज़ेशन प्रतिक्रियाशीलता घटा देता है। जब “लेज़ी‑लोड बर्स्ट”, डिकोडिंग और स्क्रिप्ट इनिशियलाइज़ेशन पहली स्क्रॉल/टैप के तुरंत बाद एक साथ हो जाएँ, तो फ्रेम ड्रॉप और इनपुट स्लग हो जाता है।

यह गाइड पहले “लेआउट से ओवर‑सर्विंग खत्म करें” पर जोर देता है, फिर decode/priority/lazy और स्क्रिप्ट समन्वय के जरिए INP सुरक्षा के पैटर्न व्यवस्थित करता है। Next.js (App Router) और ब्राउज़र APIs का सही उपयोग, हीरो बनाम फोल्ड के नीचे की छवियों की भूमिका, और RUM से सत्यापन शामिल है।

TL;DR

• पहले ओवर‑सर्विंग काटें (sizes/srcset लेआउट से डिज़ाइन)
• केवल LCP उम्मीदवारों पर priority/fetchPriority="high"; non‑LCP के लिए decoding="async" + lazy
• पहली इनपुट के आसपास लोड/डिकोड/स्क्रिप्ट इनिट को टकराने न दें (समय समन्वय)
• Placeholder से CLS न हो (LQIP/BlurHash)

विस्तार: 2025 में रेस्पॉन्सिव इमेज डिज़ाइन — srcset/sizes प्रैक्टिकल गाइड और 2025 में रीसाइज़िंग डिज़ाइन — लेआउट से उल्टा सोचकर 30–70% बाइट्स बचाएँ।

क्यों इमेज INP बिगाड़ती हैं (मानसिक मॉडल)

ब्राउज़र का क्रम “फ़ेच → डिकोड → लेआउट/पेंट” है। INP इनपुट से अगले पेंट तक का समय है। यदि भारी डिकोड/री‑लेआउट इनपुट हैंडलिंग के ठीक पहले/बाद में हो, INP बढ़ता है।

• इनपुट के तुरंत बाद लेज़ी‑लोड का बर्स्ट → मेन‑थ्रेड decode/layout से भर जाता है
• ओवर‑साइज़्ड इमेज में डिकोडिंग देर लगती है (LCP/INP दोनों खराब)
• स्क्रिप्ट इनिट (पैरालैक्स/फिल्टर/Canvas) और डिकोडिंग टकराती हैं

उपाय तीन‑इन‑वन: “सही साइज”, “चयनात्मक प्राथमिकता” और “समय अलगाव (समन्वय)”.

Next.js (App Router) पैटर्न

<Image
  src="/hero-1536.avif"
  alt="प्रोडक्ट हीरो"
  fill
  sizes="(max-width: 768px) 100vw, 768px"
  priority
  fetchPriority="high"
  decoding="sync"
/>

<Image
  src="/gallery-640.webp"
  alt="गैलरी"
  width={640}
  height={360}
  sizes="(max-width: 768px) 100vw, 768px"
  loading="lazy"
  decoding="async"
/>

टिप्स:

• केवल LCP उम्मीदवार sync/priority/high लें; बाकी lazy/async रहें
• सही sizes ब्राउज़र को सर्वोत्तम सोर्स चुनने देता है

Lazy‑granularity और स्क्रिप्ट समन्वय

• इनपुट के आसपास 300–500 ms में भारी डिकोड/इनिट न करें
• IntersectionObserver से दृश्यता से थोड़ा पहले प्रीलोड करें
• लंबी inits (Canvas/फिल्टर) idle/scheduler से टालें

let lastInput = 0;
['pointerdown','keydown','wheel','touchstart'].forEach((t) => {
  addEventListener(t, () => (lastInput = performance.now()), { passive: true });
});

export function scheduleAfterInput(task: () => void) {
  const dt = performance.now() - lastInput;
  if (dt < 300) setTimeout(task, 300 - dt);
  else requestIdleCallback(() => task());
}

Placeholder और CLS

width/height या aspect‑ratio ज़रूर दें; हल्के LQIP/BlurHash का उपयोग करें। देखें LQIP/SQIP/BlurHash प्लेसहोल्डर डिज़ाइन — 2025 व्यावहारिक मार्गदर्शिका।

माप

• RUM (web‑vitals) से INP
• इनपुट के बाद Long Tasks देखें
• Lighthouse Timespan से इंटरैक्शन सीनारियो जाँचें

सार

INP की रक्षा के लिए “ओवर‑सर्विंग रोकें”, “प्राथमिकता सही दें” और “इनपुट विंडो से भारी काम दूर रखें”। LCP के साथ समय समन्वय जोड़ें, RUM से देखें और hero के बाहर priority पर lint/CI से रोक लगाएँ।