2025 में इमेज डिलिवरी प्राथमिकताएँ — fetchpriority, preload

TL;DR

स्थिर LCP के लिए: (1) LCP इमेज पर fetchpriority, (2) एक सही बना हुआ preload, (3) लेआउट को दर्शाता सटीक srcset/sizes, (4) CLS रोकने के लिए फिक्स्ड डाइमेंशन्स, और (5) साफ़ Cache/CDN नीति।

नियम 1 — LCP को स्पष्ट प्राथमिकता दें

• LCP इमेज पर fetchpriority="high" जोड़ें; फिक्स्ड लेआउट हो तो loading="eager", decoding="async" उपयुक्त।
• हमेशा width/height दें ताकि CLS न हो।

नियम 2 — एक ही और सही preload

• <link rel="preload" as="image" imagesrcset="…" imagesizes="…"> प्रयोग करें।
• बहुत सारे प्रीलोड से बचें; HTTP/2/3 पहले से multiplexed है।
• <img> में उपयोग होने वाले URL से 100% मेल खाएँ।

नियम 3 — srcset/sizes की सुसंगति

• sizes को असली CSS लेआउट के अनुरूप लिखें; ओवर‑डिस्ट्रिब्यूशन न करें।
• आर्ट‑डायरेक्शन ज़रूरत हो तो <picture> का प्रयोग।

नियम 4 — ऑफस्क्रीन के लिए lazy‑load, n+1 प्रीलोड

• गैर‑क्रिटिकल इमेज के लिए loading="lazy"।
• IntersectionObserver से viewport के पास आते ही n+1 प्रीलोड।

नियम 5 — Cache/CDN नीति

• फिंगरप्रिंटेड एसेट्स: Cache-Control: public, max-age=31536000, immutable।
• CDN पर फ़ॉर्मैट नेगोसिएशन हो तो Vary/Accept सही रखें।

टेम्पलेट‑आधारित रणनीतियाँ

• होम: एक LCP, सख्त प्राथमिकता, फ़ॉन्ट swap।
• लेख: कवर इमेज प्राथमिक; गैलरी lazy।
• लिस्टिंग: थंबनेल lazy; क्रमशः प्रीलोड।

मापन और डीबग

• लैब: Lighthouse/WebPageTest (LCP, CLS, TBT)।
• फ़ील्ड: CrUX/GA4 p75 LCP/CLS।
• DevTools: Network Priority कॉलम, preload संगति, माँगे गए आकार।

लिंक

• रेस्पॉन्सिव इमेज: 2025 में रेस्पॉन्सिव इमेज डिज़ाइन — srcset/sizes प्रैक्टिकल गाइड
• कंप्रेशन रणनीति: इमेज कंप्रेशन की अंतिम रणनीति 2025 – गुणवत्ता को बनाए रखते हुए गति अनुकूलन का व्यावहारिक मार्गदर्शन