<link rel="preload"> की मदद से रिसॉर्स को पहले से लोड करने से, ब्राउज़र को यह सिग्नल मिलता है कि किसी रिसॉर्स की ज़रूरत जल्द ही पड़ने वाली है. हालांकि, प्रीलोड को रिसॉर्स टाइप के लिए डिफ़ॉल्ट प्राथमिकता मिलती है. खास तौर पर, इमेज के लिए यह प्राथमिकता कम होती है. fetchpriority का इस्तेमाल करके, इस प्राथमिकता को बेहतर बनाया जा सकता है. खास तौर पर, यह पक्का किया जा सकता है कि इमेज प्रीलोड को ज़्यादा प्राथमिकता के साथ प्रीलोड किया जाए, ताकि वे पहले शुरू हो सकें और ज़्यादा बैंडविड्थ संसाधनों का इस्तेमाल कर सकें.
इन्हें कैसे लागू करें
- प्रीलोड किए जाने वाले रिसॉर्स की पहचान करना: ऐसे रिसॉर्स ढूंढें जो ब्राउज़र को शुरुआत में नहीं मिलते.जैसे, वीडियो पोस्टर इमेज या सीएसएस में बैकग्राउंड इमेज. हालांकि, ये रिसॉर्स पेज के दिखने के लिए ज़रूरी होते हैं.
- ज़रूरी इमेज को पहले से लोड करने की प्रोसेस को बेहतर बनाएं: एलसीपी इमेज या अन्य ज़रूरी इमेज के लिए,
<link rel="preload" fetchpriority="high">का इस्तेमाल करें. इससे यह पक्का किया जा सकेगा कि उन्हें पहले से लोड की जाने वाली अन्य इमेज के मुकाबले प्राथमिकता दी जाए. ऐसा इसलिए, क्योंकि इन इमेज को डिफ़ॉल्ट रूप से प्राथमिकता नहीं दी जाती. ध्यान दें कि फ़ॉन्ट पहले से ही डिफ़ॉल्ट रूप से ज़्यादा प्राथमिकता वाले होते हैं. - कम ज़रूरी रिसॉर्स को पहले से लोड करने की प्रोसेस को कम प्राथमिकता दें: ऐसे रिसॉर्स जो शुरुआती रेंडर के लिए ज़रूरी नहीं हैं (जैसे, बैकग्राउंड वीडियो या सेकंडरी फ़ॉन्ट), उनके लिए
<link rel="preload" fetchpriority="low">का इस्तेमाल करें. - संसाधन के टाइप के साथ तालमेल बिठाना: ध्यान दें कि अलग-अलग
asटाइप की डिफ़ॉल्ट प्राथमिकताएं अलग-अलग होती हैं. ज़रूरत पड़ने पर, इन डिफ़ॉल्ट प्राथमिकताओं को बदलने के लिएfetchpriorityका इस्तेमाल करें.
कोड का उदाहरण
<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">
<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">
<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>
सबसे सही तरीके
- ज़रूरी:
fetchpriority="high"का इस्तेमाल, ज़्यादा से ज़्यादा एक या दो ज़रूरी इमेज को पहले से लोड करने के लिए करें. इससे नेटवर्क की समस्या से बचा जा सकता है और प्राथमिकता को कम होने से रोका जा सकता है. - ज़रूरी: सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) से जुड़ी इमेज पर
fetchpriority="high"का इस्तेमाल करें. - क्या करें: बैंडविड्थ की समस्या से बचने के लिए, किसी पेज पर पहले से लोड होने वाली इमेज की कुल संख्या को ज़्यादा से ज़्यादा दो इमेज और दो से तीन ज़रूरी फ़ॉन्ट तक सीमित करें.
- ज़रूर इस्तेमाल करें
fetchpriority="low"उन प्रीलोड के लिए जिन्हें आपको ब्राउज़र से जल्दी शुरू करवाना है, लेकिन ज़रूरी रिसॉर्स (खास तौर पर, गैर-ज़रूरी फ़ॉन्ट) की कीमत पर नहीं. asएट्रिब्यूट की सही जानकारी ज़रूर दें, ताकि यह पक्का किया जा सके कि प्रीलोड का इस्तेमाल किया जाएगा.- बैकग्राउंड इमेज के लिए प्रीलोड पर निर्भर रहने के बजाय,
<img>टैग के ज़रिए एचटीएमएल में ज़रूरी रिसॉर्स (जैसे, एलसीपी इमेज) को स्टैटिक तौर पर खोजे जाने लायक बनाएं. - ज़रूर पक्का करें कि फ़ॉन्ट प्रीलोड में हमेशा
crossoriginएट्रिब्यूट हो. भले ही, वह एक ही ऑरिजिन का हो. importanceएट्रिब्यूट का इस्तेमाल न करें, क्योंकि अब इसका इस्तेमाल नहीं किया जाता. इसकी जगह अबfetchpriorityका इस्तेमाल किया जाता है.
फ़ॉलबैक रणनीति
<link rel="preload"> पर fetchpriority एट्रिब्यूट, प्रोग्रेसिव एन्हांसमेंट है. जो ब्राउज़र इस सुविधा के साथ काम नहीं करते वे उस संसाधन टाइप के लिए, अपनी डिफ़ॉल्ट प्राथमिकता का इस्तेमाल करके संसाधन को पहले से लोड करेंगे. यह पक्का करने के लिए कि प्रॉडक्ट, वाहन के साथ काम करता है, हमेशा as और type एट्रिब्यूट की सही वैल्यू सबमिट करें.