जब कोई ब्राउज़र किसी वेब पेज को पार्स करता है और इमेज, स्क्रिप्ट या सीएसएस जैसे संसाधनों को खोजना और डाउनलोड करना शुरू करता है, तो वह उन्हें फ़ेच priority असाइन करता है, ताकि वह उन्हें सही क्रम में डाउनलोड कर सके. आम तौर पर, किसी संसाधन की प्राथमिकता इस बात पर निर्भर करती है कि
वह क्या है और दस्तावेज़ में कहां है. उदाहरण के लिए, इन-व्यूपोर्ट इमेज की प्राथमिकता High हो सकती है. साथ ही, पहले से लोड होने वाले और <head> में <link> का इस्तेमाल करके रेंडर रोकने वाले सीएसएस की प्राथमिकता Very High हो सकती है. आम तौर पर,
प्राथमिकता अपने-आप असाइन होने की सुविधा अच्छी तरह से काम करती है, लेकिन कुछ मामलों में ऐसा भी होता है कि
असाइन किया गया ऑर्डर सही नहीं होता.
इस पेज पर, 'प्राथमिकता एपीआई' और 'fetchpriority' एचटीएमएल एट्रिब्यूट के बारे में बताया गया है. इनसे आपको किसी संसाधन (high या low) की प्राथमिकता के बारे में संकेत देकर, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को ऑप्टिमाइज़ करने में मदद मिलती है.
खास जानकारी
कुछ अहम चीज़ें जहां 'प्राथमिकता' से मदद मिल सकती है:
- एलसीपी इमेज की प्राथमिकता बढ़ाने के लिए, इमेज एलिमेंट पर
fetchpriority="high"तय करें. इससे एलसीपी जल्द ही हो जाएगी. asyncस्क्रिप्ट की प्राथमिकता बढ़ाना, मौजूदा सबसे सामान्य हैक के मुकाबले बेहतर सिमेंटिक्स का इस्तेमाल करना (asyncस्क्रिप्ट के लिए<link rel="preload">डालना).- इमेज को बेहतर तरीके से क्रम में लगाने के लिए, लेट-बॉडी स्क्रिप्ट की प्राथमिकता को कम करना.
पुराने समय से, प्रीलोड और प्रीकनेक्ट का इस्तेमाल करने वाले डेवलपर का, संसाधन की प्राथमिकता पर सीमित असर रहा है. पहले से लोड करने की सुविधा की मदद से, ब्राउज़र को उन अहम संसाधनों के बारे में बताया जा सकता है जिन्हें आपको ठीक से लोड करना है. इससे, ब्राउज़र को इन रिसॉर्स के बारे में अपने-आप पता चल जाता है. यह खास तौर पर उन रिसॉर्स के लिए मददगार है जिन्हें ढूंढना मुश्किल होता है. जैसे, स्टाइलशीट में शामिल फ़ॉन्ट, बैकग्राउंड इमेज या किसी स्क्रिप्ट से लोड किए गए रिसॉर्स. Preconnect, क्रॉस-ऑरिजिन सर्वर से कनेक्शन को गर्म करने में मदद करता है और टाइम टू फ़र्स्ट बाइट जैसे मेट्रिक को बेहतर बनाने में मदद कर सकता है. यह तब काम आता है, जब आपको ऑरिजिन के बारे में पता हो, लेकिन यह ज़रूरी नहीं है कि उस संसाधन का सटीक यूआरएल दिया गया हो जिसकी ज़रूरत है.
फे़च प्राथमिकता, इन संसाधन से जुड़े संकेतों को पूरा करती है.
यह मार्कअप पर आधारित एक सिग्नल है, जो fetchpriority एट्रिब्यूट के ज़रिए उपलब्ध होता है. डेवलपर इसका इस्तेमाल किसी खास संसाधन की प्राथमिकता बताने के लिए कर सकते हैं.
डेटा के लिए बनाए गए रिसॉर्स फ़ेच की प्राथमिकता पर असर डालने के लिए, JavaScript और priority प्रॉपर्टी के साथ फ़ेच एपीआई की मदद से भी इन संकेतों का इस्तेमाल किया जा सकता है. फे़च प्राथमिकता, पहले से लोड किए गए डेटा को भी बेहतर बना सकती है. सबसे बड़े कॉन्टेंटफ़ुल पेंट वाली इमेज लें, जिसे पहले से लोड किए जाने पर भी कम प्राथमिकता दी जाएगी. अगर इसे अन्य कम प्राथमिकता वाले संसाधनों से भेजा जाता है, तो 'प्राथमिकता' का इस्तेमाल करने से इमेज कितनी जल्दी लोड होती है, इसमें मदद मिल सकती है.
संसाधन की प्राथमिकता
संसाधन डाउनलोड का क्रम, पेज पर मौजूद हर संसाधन के लिए ब्राउज़र की असाइन की गई प्राथमिकता पर निर्भर करता है. प्रायॉरिटी कंप्यूटेशन लॉजिक पर असर डालने वाले फ़ैक्टर में ये शामिल हैं:
- संसाधन का प्रकार, जैसे कि सीएसएस, फ़ॉन्ट, स्क्रिप्ट, इमेज, और तीसरे पक्ष के संसाधन.
- वह जगह या ऑर्डर जिसमें दस्तावेज़ के बारे में जानकारी दी गई है.
preloadके रिसॉर्स से जुड़ा संकेत, जो ब्राउज़र को किसी संसाधन को तेज़ी से खोजने और उसे जल्दी लोड करने में मदद करता है.asyncयाdeferस्क्रिप्ट के लिए, प्राथमिकता का हिसाब लगाने के तरीके में बदलाव किया जाता है.
यहां दी गई टेबल में दिखाया गया है कि Chrome ज़्यादातर संसाधनों को किस तरह प्राथमिकता देता है और उन्हें क्रम से लगाता है:
| लेआउट ब्लॉक करने के फ़ेज़ में लोड करें | लेआउट ब्लॉक करने के फ़ेज़ में, एक बार में एक ही बार लोड करें | ||||
|---|---|---|---|---|---|
| ब्लिंक प्राथमिकता |
VeryHigh | ज़्यादा | ठीक-ठाक | कम | VeryLow |
| Devटूल प्राथमिकता |
सबसे ज़्यादा रेटिंग वाली | ज़्यादा | ठीक-ठाक | कम | सबसे कम रेटिंग वाली |
| मुख्य संसाधन | |||||
| CSS (शुरुआती**) | CSS (देर से**) | सीएसएस (मीडिया मेल नहीं खाता***) | |||
| स्क्रिप्ट (शुरुआती** या प्रीलोड स्कैनर से नहीं) | स्क्रिप्ट (देर से**) | स्क्रिप्ट (एक साथ काम नहीं करने वाली प्रोसेस) | |||
| फ़ॉन्ट | फ़ॉन्ट (rel=preload) | ||||
| इंपोर्ट करें | |||||
| इमेज (व्यूपोर्ट में) | इमेज (पहली पांच इमेज > 10,000 पिक्सल2) | Image | |||
| मीडिया (वीडियो/ऑडियो) | |||||
| प्रीफ़ेच करें | |||||
| एक्सएसएल | |||||
| XHR (सिंक) | XHR/फ़ेच* (एक साथ काम नहीं करने वाली प्रोसेस) | ||||
ब्राउज़र, सोर्स को उसी क्रम में डाउनलोड करता है जिस क्रम में वे पहले से ढूंढे गए हैं. Chrome Dev टूल नेटवर्क टैब में कोई पेज लोड करते समय, अलग-अलग संसाधनों को असाइन की गई प्राथमिकता देखी जा सकती है. (टेबल के हेडर पर राइट क्लिक करके पक्का करें कि आपने प्राथमिकता कॉलम शामिल किया है).
type = "font" की प्राथमिकता
प्राथमिकताओं में बदलाव होने पर, शुरुआती और आखिरी, दोनों प्राथमिकता को बड़े अनुरोधों की पंक्तियों की सेटिंग या टूलटिप में देखा जा सकता है.
आपको 'फ़ेच प्राथमिकता' की ज़रूरत कब पड़ सकती है?
अब आपको ब्राउज़र की प्राथमिकता के हिसाब से जानकारी मिल गई है. ऐसे में, पेज को डाउनलोड करने के क्रम में बदलाव किया जा सकता है, ताकि उसकी परफ़ॉर्मेंस और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को ऑप्टिमाइज़ किया जा सके. यहां कुछ ऐसी चीज़ों के उदाहरण दिए गए हैं, जिन्हें आप फ़ेच प्राथमिकता का इस्तेमाल किए बिना बदल सकते हैं:
<script>और<link>जैसे संसाधन टैग को उसी क्रम में रखें जिस क्रम में ब्राउज़र उन्हें डाउनलोड करना चाहता है.- ज़रूरी संसाधनों को, खास तौर पर ऐसे संसाधनों को डाउनलोड करने के लिए
preloadरिसॉर्स संकेत का इस्तेमाल करें जिन्हें ब्राउज़र को खोजना मुश्किल है. - दूसरे संसाधनों को ब्लॉक किए बिना, स्क्रिप्ट डाउनलोड करने के लिए
asyncयाdeferका इस्तेमाल करें. - वेबसाइट में फ़ोल्ड के नीचे लेज़ी-लोड की सुविधा, ताकि ब्राउज़र उपलब्ध बैंडविथ का इस्तेमाल पेज के ऊपरी हिस्से में मौजूद ज़्यादा ज़रूरी संसाधनों के लिए कर सके.
यहां कुछ और जटिल मामले दिए गए हैं, जिनमें 'प्राथमिकता' फ़ेच करने से आपको ज़रूरी संसाधन प्राथमिकता क्रम पाने में मदद मिल सकती है:
- आपके पास पेज के ऊपरी हिस्से पर कई इमेज हैं, लेकिन सभी की प्राथमिकता एक ही नहीं होनी चाहिए. उदाहरण के लिए, इमेज कैरसेल में, सबसे पहले दिखने वाली इमेज को ही ज़्यादा प्राथमिकता की ज़रूरत होती है.
- व्यूपोर्ट के अंदर हीरो इमेज, आम तौर पर
LowयाMediumप्राथमिकता से शुरू होती हैं. लेआउट पूरा हो जाने के बाद, Chrome को पता चलता है कि वे व्यूपोर्ट में हैं और उनकी प्राथमिकता को बढ़ा देता है. आम तौर पर, इससे इमेज लोड होने में ज़्यादा समय लगता है. मार्कअप में फे़च प्राथमिकता देने से इमेज "ज़्यादा" प्राथमिकता से शुरू होती है और काफ़ी पहले लोड होना शुरू हो जाती है.
सीएसएस बैकग्राउंड के तौर पर शामिल की गई एलसीपी इमेज को शुरुआती खोज के लिए, अब भी पहले से लोड करना ज़रूरी है. अपने बैकग्राउंड की इमेज की प्राथमिकता बढ़ाने के लिए, पहले से लोड की गई इमेज परfetchpriority='high'शामिल करें. - स्क्रिप्ट को
asyncयाdeferके तौर पर सेट करने पर, ब्राउज़र को उन्हें एसिंक्रोनस रूप से लोड होने के लिए कहा जाता है. हालांकि, जैसा कि प्राथमिकता टेबल में दिखाया गया है, इन स्क्रिप्ट को भी एक "कम" प्राथमिकता असाइन की जाती है. एसिंक्रोनस डाउनलोड को पक्का करते हुए शायद आप उनकी प्राथमिकता बढ़ाना चाहें खास तौर पर ऐसी स्क्रिप्ट के लिए जो उपयोगकर्ता अनुभव के लिए ज़रूरी हैं. - अगर एसिंक्रोनस तरीके से रिसॉर्स या डेटा फ़ेच करने के लिए JavaScript
fetch()API का इस्तेमाल किया जाता है, तो ब्राउज़र उसेHighप्राथमिकता असाइन करता है. ऐसा हो सकता है कि आप अपने कुछ फ़ेच कम प्राथमिकता के साथ चलाना चाहें, खास तौर पर जब बैकग्राउंड एपीआई कॉल को ऐसे एपीआई कॉल के साथ मिलाया जा रहा हो जो उपयोगकर्ता के इनपुट का जवाब देते हैं. बैकग्राउंड एपीआई कॉल कोLowप्राथमिकता और इंटरैक्टिव एपीआई कॉल कोHighप्राथमिकता के तौर पर मार्क करें. - ब्राउज़र, सीएसएस और फ़ॉन्ट को
High" priorityअसाइन करता है, लेकिन इनमें से कुछ संसाधन दूसरों के मुकाबले ज़्यादा अहम हो सकते हैं. आप गैर-ज़रूरी संसाधनों की प्राथमिकता कम करने के लिए, 'प्राथमिकता' का इस्तेमाल कर सकते हैं.
fetchpriority एट्रिब्यूट
सीएसएस, फ़ॉन्ट, स्क्रिप्ट, और इमेज जैसे संसाधन टाइप के लिए डाउनलोड की प्राथमिकता तय करने के लिए, fetchpriority एचटीएमएल एट्रिब्यूट का इस्तेमाल करें. ऐसा link, img या script टैग की मदद से डाउनलोड किया जाता है. इसमें नीचे दी गई वैल्यू हो सकती हैं:
high: रिसॉर्स को सबसे ज़्यादा अहमियत दी जाती है और आपको ब्राउज़र से इसे तब तक प्राथमिकता देनी है, जब तक कि ब्राउज़र के अपने अनुभव के आधार पर, ऐसा न हो.low: रिसॉर्स की प्राथमिकता कम है. साथ ही, आपको चाहिए कि अगर ब्राउज़र अपनी ज़रूरत के हिसाब से संसाधन को प्राथमिकता देता है, तो वह भी उसी संसाधन को प्राथमिकता न दे.auto: डिफ़ॉल्ट वैल्यू, जो ब्राउज़र को सही प्राथमिकता चुनने की सुविधा देती है.
यहां मार्कअप में fetchpriority एट्रिब्यूट और स्क्रिप्ट की मिलती-जुलती priority प्रॉपर्टी को इस्तेमाल करने के कुछ उदाहरण दिए गए हैं.
<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">
<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<script>
fetch('https://example.com/', {priority: 'low'})
.then(data => {
// Trigger a low priority fetch
});
</script>
ब्राउज़र की प्राथमिकता और fetchpriority के असर
अलग-अलग संसाधनों की परिकलित प्राथमिकता को बढ़ाने या कम करने के लिए, fetchpriority एट्रिब्यूट को अलग-अलग संसाधनों पर लागू किया जा सकता है. ऐसा करने के लिए, इस टेबल में बताया गया है.
हर लाइन में fetchpriority="auto" (◉) उस तरह के संसाधन की डिफ़ॉल्ट प्राथमिकता को मार्क करता है.
| लेआउट ब्लॉक करने के फ़ेज़ में लोड करें | लेआउट ब्लॉक करने के चरण में, एक बार में एक लोड करें | ||||
|---|---|---|---|---|---|
| ब्लिंक प्राथमिकता |
VeryHigh | ज़्यादा | ठीक-ठाक | कम | VeryLow |
| Devटूल प्राथमिकता |
सबसे ज़्यादा रेटिंग वाली | ज़्यादा | ठीक-ठाक | कम | सबसे कम रेटिंग वाली |
| मुख्य संसाधन | ◉ | ||||
| CSS (शुरुआती**) | ⬆◉ | ⬇ | |||
| CSS (देर से**) | ⬆ | ◉ | ⬇ | ||
| सीएसएस (मीडिया मेल नहीं खाता***) | ⬆*** | ◉⬇ | |||
| स्क्रिप्ट (शुरुआती** या प्रीलोड स्कैनर से नहीं) | ⬆◉ | ⬇ | |||
| स्क्रिप्ट (देर से**) | ⬆ | ◉ | ⬇ | ||
| स्क्रिप्ट (एक साथ काम नहीं करने वाली/डिफ़रर) | ⬆ | ◉⬇ | |||
| फ़ॉन्ट | ◉ | ||||
| फ़ॉन्ट (rel=preload) | ⬆◉ | ⬇ | |||
| इंपोर्ट करें | ◉ | ||||
| इमेज (व्यूपोर्ट में - लेआउट के बाद) | ⬆◉ | ⬇ | |||
| इमेज (पहली पांच इमेज > 10,000 पिक्सल2) | ⬆ | ◉ | ⬇ | ||
| Image | ⬆ | ◉⬇ | |||
| मीडिया (वीडियो/ऑडियो) | ◉ | ||||
| XHR (सिंक) - काम नहीं करता | ◉ | ||||
| XHR/फ़ेच* (एक साथ काम नहीं करने वाली प्रोसेस) | ⬆◉ | ⬇ | |||
| प्रीफ़ेच करें | ◉ | ||||
| एक्सएसएल | ◉ | ||||
fetchpriority, रिलेटिव प्राथमिकता को सेट करता है. इसका मतलब है कि यह प्राथमिकता को साफ़ तौर पर High या Low पर सेट करने के बजाय, डिफ़ॉल्ट प्राथमिकता को एक सही मात्रा तक बढ़ा या घटाता है. इसके लिए अक्सर High या Low प्राथमिकता मिलती है,
लेकिन हमेशा नहीं. उदाहरण के लिए, fetchpriority="high" वाली क्रिटिकल सीएसएस "बहुत ज़्यादा"/"सबसे ज़्यादा" प्राथमिकता को बनाए रखती है. साथ ही, इन एलिमेंट पर fetchpriority="low" का इस्तेमाल करने पर, उसकी प्राथमिकता "ज़्यादा" बनी रहती है. इनमें से किसी भी मामले में, प्राथमिकता को
High या Low पर साफ़ तौर पर सेट करना शामिल नहीं है.
इस्तेमाल के उदाहरण
जब आपको ब्राउज़र को इस बारे में ज़्यादा संकेत देना हो कि किसी संसाधन को किस प्राथमिकता से फ़ेच करना है, तब fetchpriority एट्रिब्यूट का इस्तेमाल करें.
एलसीपी इमेज की प्राथमिकता बढ़ाएं
एलसीपी या दूसरी अहम इमेज की प्राथमिकता बढ़ाने के लिए, fetchpriority="high" तय किया जा सकता है.
<img src="lcp-image.jpg" fetchpriority="high">
नीचे दी गई तुलना में, Google Flights का वह पेज दिखाया गया है जिसमें एलसीपी बैकग्राउंड इमेज है. इस इमेज को 'फ़ेच प्राथमिकता' के साथ और उसके बिना लोड किया गया है. प्राथमिकता को ज़्यादा पर सेट करने से, एलसीपी 2.6 से बेहतर होकर 1.9s हो गया.
वेबपेज के ऊपरी हिस्से पर मौजूद इमेज की प्राथमिकता को कम करें
पेज के ऊपरी हिस्से पर मौजूद उन इमेज की प्राथमिकता को कम करने के लिए fetchpriority="low" का इस्तेमाल करें
जो तुरंत ज़रूरी नहीं होतीं, जैसे कि इमेज कैरसेल में.
<ul class="carousel">
<img src="img/carousel-1.jpg" fetchpriority="high">
<img src="img/carousel-2.jpg" fetchpriority="low">
<img src="img/carousel-3.jpg" fetchpriority="low">
<img src="img/carousel-4.jpg" fetchpriority="low">
</ul>
Oodle ऐप्लिकेशन के साथ एक पुराने प्रयोग में, हमने इसका इस्तेमाल उन इमेज की प्राथमिकता को कम करने के लिए किया था जो लोड होते समय नहीं दिखती हैं. इससे पेज लोड होने का समय 2 सेकंड कम हो गया.
पहले से लोड किए गए संसाधनों की प्राथमिकता कम करें
पहले से लोड किए गए संसाधनों को अन्य ज़रूरी संसाधनों के साथ प्रतिस्पर्धा करने से रोकने के लिए, उनकी प्राथमिकता कम की जा सकती है. इस तकनीक का इस्तेमाल इमेज, स्क्रिप्ट, और सीएसएस के साथ करें.
<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<!-- Preload CSS without blocking other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">
स्क्रिप्ट की प्राथमिकता बदलें
आपके पेज की इंटरैक्टिव स्क्रिप्ट को तेज़ी से लोड होना चाहिए, लेकिन इससे दूसरे रिसॉर्स पर रोक नहीं लगनी चाहिए. इन्हें async के तौर पर, 'ज़्यादा' प्राथमिकता के तौर पर मार्क किया जा सकता है.
<script src="async_but_important.js" async fetchpriority="high"></script>
अगर स्क्रिप्ट खास DOM स्थितियों पर निर्भर करती है, तो आप उसे async के तौर पर मार्क नहीं कर सकते. हालांकि,
अगर वे पेज पर बाद में चलते हैं, तो उन्हें कम प्राथमिकता पर लोड किया जा सकता है:
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
गैर-ज़रूरी डेटा फ़ेच करने की सुविधा की प्राथमिकता कम करें
ब्राउज़र, fetch को ज़्यादा प्राथमिकता से चलाता है. अगर आपके पास ऐसे कई फ़ेच हैं जो एक साथ ट्रिगर हो सकते हैं, तो ज़्यादा ज़रूरी डेटा फ़ेच करने और कम ज़रूरी डेटा को कम करने के लिए, हाई डिफ़ॉल्ट प्राथमिकता का इस्तेमाल किया जा सकता है.
// Important validation data (high by default)
let authenticate = await fetch('/user');
// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});
प्राथमिकता लागू करने के नोट फ़ेच करें
'प्राथमिकता' का इस्तेमाल करते समय इन बातों का ध्यान रखें:
fetchpriorityएट्रिब्यूट एक संकेत है, न कि डायरेक्टिव. ब्राउज़र, डेवलपर की प्राथमिकता को ध्यान में रखता है. हालांकि, यह समस्याओं को हल करने के लिए, संसाधन की प्राथमिकता के लिए, संसाधन की प्राथमिकता की प्राथमिकताएं भी लागू कर सकता है.फे़च प्राथमिकता और पहले से लोड होने की प्रक्रिया में कोई भ्रम न हो:
- पहले से लोड करने की सुविधा को फ़ेच करना ज़रूरी है. हालांकि, यह कोई संकेत नहीं है.
- पहले से लोड करने की सुविधा से, ब्राउज़र को किसी संसाधन को पहले ही खोजने की सुविधा मिल जाती है. हालांकि, यह संसाधन को अब भी डिफ़ॉल्ट प्राथमिकता पर फ़ेच कर लेता है. इस बीच, 'प्राथमिकता' फ़ेच करने की सुविधा को खोजने लायक नहीं बनाती है. हालांकि, यह आपको फ़ेच करने की प्राथमिकता को बढ़ाने या कम करने में मदद करती है.
- प्राथमिकता में बदलाव के असर की तुलना में, पहले से लोड किए गए पेज के असर को देखना और मेज़र करना आसान होता है.
प्राथमिकता के हिसाब से डेटा फ़ेच करने की सुविधा, ज़्यादा जानकारी के साथ पहले से लोड किए गए डेटा को ज़्यादा बेहतर बना सकती है. अगर आपने पहले ही एलसीपी इमेज के लिए
<head>में पहले आइटम में से एक प्रीलोड तय कर दिया है, तो हो सकता है किhighफ़ेच की प्राथमिकता से एलसीपी में काफ़ी सुधार न हो. हालांकि, अगर अन्य संसाधनों के लोड होने के बाद प्रीलोड होता है, तोhighफ़ेच प्राथमिकता, एलसीपी को और बेहतर बना सकती है. अगर कोई अहम इमेज, सीएसएस बैकग्राउंड इमेज है, तो इसेfetchpriority = "high"का इस्तेमाल करके पहले से लोड करें.प्राथमिकता के आधार पर तय किए गए, लोड होने में लगने वाले समय में होने वाले सुधार उन माहौल में ज़्यादा काम के होते हैं जहां ज़्यादा संसाधन उपलब्ध नेटवर्क बैंडविड्थ के लिए मुकाबला करते हैं. आम तौर पर, ऐसा एचटीटीपी/1.x कनेक्शन पर होता है जहां समानांतर डाउनलोड नहीं हो पाते. इसके अलावा, कम बैंडविड्थ वाले एचटीटीपी/2 कनेक्शन पर भी आम तौर पर ऐसा होता है. इन मामलों में, प्राथमिकता तय करके उस समस्या को हल किया जा सकता है.
सीडीएन, एचटीटीपी/2 की प्राथमिकता को एक ही तरह से लागू नहीं करते. भले ही ब्राउज़र, फे़च प्राथमिकता से प्राथमिकता के बारे में बताता हो, फिर भी हो सकता है कि सीडीएन, संसाधनों को तय किए गए क्रम में फिर से प्राथमिकता न दे. इससे फे़च प्राथमिकता की जांच करना मुश्किल हो जाता है. प्राथमिकताओं को ब्राउज़र में अंदरूनी तौर पर और उन प्रोटोकॉल के साथ लागू किया जाता है जो प्राथमिकता (एचटीटीपी/2 और एचटीटीपी/3) के साथ काम करते हैं. सीडीएन या ऑरिजिन सपोर्ट के अलावा, अंदरूनी ब्राउज़र को प्राथमिकता देने के लिए, फ़ेच प्रायॉरिटी का इस्तेमाल करना अब भी फ़ायदेमंद है. इसकी वजह यह है कि जब ब्राउज़र, संसाधनों का अनुरोध करता है, तो अक्सर प्राथमिकताएं बदल जाती हैं. उदाहरण के लिए, कम प्राथमिकता वाले रिसॉर्स, जैसे कि इमेज को अक्सर अनुरोध किए जाने से रोक दिया जाता है. ऐसा तब होता है, जब ब्राउज़र ज़रूरी
<head>आइटम प्रोसेस करता है.हो सकता है कि आप अपने शुरुआती डिज़ाइन में, 'फ़ेच प्राथमिकता' को सबसे सही तरीके के तौर पर पेश न कर पाएं. डेवलपमेंट साइकल में आगे चलकर, पेज पर मौजूद अलग-अलग संसाधनों को असाइन की जा रही प्राथमिकताएं चुनी जा सकती हैं. अगर वे आपकी उम्मीदों से मेल नहीं खाती हैं, तो बेहतर ऑप्टिमाइज़ेशन के लिए, 'फ़ेच प्राथमिकता' को लागू किया जा सकता है.
पहले से लोड किए गए डेटा को इस्तेमाल करने के बारे में सलाह
पहले से लोड की जाने वाली फ़ाइलों का इस्तेमाल करते समय इन बातों का ध्यान रखें:
- एचटीटीपी हेडर में पहले से लोड करने की सुविधा शामिल करने से, लोड होने के क्रम में शामिल अन्य सभी चीज़ों से पहले वह लोड हो जाता है.
- आम तौर पर, "मध्यम" प्राथमिकता से ऊपर की किसी भी चीज़ के लिए, पार्सर उस क्रम में पहले से लोड होता है जिस क्रम में वह उस तक पहुंचता है. अगर एचटीएमएल की शुरुआत में पहले से लोड किए गए पेज शामिल किए जा रहे हैं, तो सावधानी बरतें.
- पहले से लोड किए गए फ़ॉन्ट, शायद सिर के आखिर या मुख्य हिस्से की शुरुआत में बेहतर तरीके से काम करते हैं.
- पहले से लोड किए गए इंपोर्ट (डाइनैमिक
import()याmodulepreload) को उस स्क्रिप्ट टैग के बाद चलाना चाहिए जिसे इंपोर्ट की ज़रूरत है. इसलिए, पहले यह पक्का कर लें कि स्क्रिप्ट लोड या पार्स हो जाए, ताकि इसकी डिपेंडेंसी लोड होने के दौरान इसका आकलन किया जा सके. - पहले से लोड की गई इमेज की प्राथमिकता डिफ़ॉल्ट रूप से "कम" या "सामान्य" होती है. उन्हें एक साथ काम न करने वाली स्क्रिप्ट और कम या सबसे कम प्राथमिकता वाले दूसरे टैग के हिसाब से क्रम में लगाएं.
इतिहास
फे़च प्रायॉरिटी को सबसे पहले Chrome में ऑरिजिन ट्रायल के तौर पर 2018 में आज़माया गया था.
इसके बाद, importance एट्रिब्यूट का इस्तेमाल करके इसे 2021 में फिर से एक्सपेरिमेंट किया गया. उस समय इसे प्राथमिकता संकेत कहा जाता था. अब इंटरफ़ेस, एचटीएमएल के लिए fetchpriority और JavaScript के फ़ेच एपीआई के लिए priority हो गया है. ऐसा वेब स्टैंडर्ड प्रोसेस के तहत किया गया है. भ्रम की स्थिति को कम करने के लिए, अब हम इस एपीआई को
फ़ेच करने की प्राथमिकता को कहते हैं.