Fetch Priority API, ब्राउज़र पर संसाधनों की प्राथमिकता के बारे में बताता है. यह वेबसाइट की परफ़ॉर्मेंस की जानकारी को बेहतर तरीके से लोड करता है और इसे बेहतर बनाता है.
जब कोई ब्राउज़र किसी वेब पेज को पार्स करता है और इमेज, स्क्रिप्ट या सीएसएस जैसे संसाधनों को खोजना और डाउनलोड करना शुरू करता है, तो वह उन्हें फ़ेच priority असाइन करता है, ताकि वह उन्हें सही क्रम में डाउनलोड कर सके. आम तौर पर, किसी संसाधन की प्राथमिकता इस बात पर निर्भर करती है कि वह क्या है और दस्तावेज़ में कहां है. उदाहरण के लिए, इन-व्यूपोर्ट इमेज की High प्राथमिकता हो सकती है. साथ ही, पहले से लोड होने वाले, <head> में <link> का इस्तेमाल करके रेंडर करने वाले सीएसएस को रेंडर करने पर रोक लगाने वाली सीएसएस की प्राथमिकता Very High हो सकती है. ब्राउज़र ऐसी प्राथमिकताएं असाइन करने का काम बहुत अच्छे से करते हैं जो अच्छी तरह से काम करती हैं, लेकिन हो सकता है कि वे सभी मामलों में सही न हों.
इस पेज पर, 'प्राथमिकता एपीआई' और fetchpriority एचटीएमएल एट्रिब्यूट के बारे में बताया गया है. इनकी मदद से किसी संसाधन (high या low) की प्राथमिकता के बारे में बताया जा सकता है. 'फ़ेच प्राथमिकता' की मदद से, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को ऑप्टिमाइज़ किया जा सकता है.
खास जानकारी
कुछ अहम चीज़ें जहां 'प्राथमिकता' से मदद मिल सकती है:
- एलसीपी इमेज की प्राथमिकता बढ़ाने के लिए, इमेज एलिमेंट पर
fetchpriority="high"तय करें. इससे एलसीपी जल्द ही हो जाएगी. asyncस्क्रिप्ट की प्राथमिकता बढ़ाना, मौजूदा सबसे सामान्य हैक की तुलना में बेहतर सिमेंटिक्स का इस्तेमाल करना (asyncस्क्रिप्ट के लिए<link rel="preload">डालना).- लेट-बॉडी स्क्रिप्ट की प्राथमिकता को कम कर रही हूँ, ताकि इमेज के साथ बेहतर क्रम में बनाई जा सकें.
पहले से ही, प्रीलोड और प्रीकनेक्ट का इस्तेमाल करने वाले डेवलपर का, संसाधन की प्राथमिकता पर सीमित असर रहा है. पहले से लोड करने की सुविधा की मदद से, ब्राउज़र को उन अहम संसाधनों के बारे में बताया जा सकता है जिन्हें आपको जल्दी लोड करना है. इससे, ब्राउज़र को इन संसाधनों का अपने-आप पता चल जाता है. यह उन संसाधनों के लिए खास तौर पर काम का है जिन्हें खोजना मुश्किल होता है. जैसे, स्टाइलशीट में शामिल फ़ॉन्ट, बैकग्राउंड की इमेज या किसी स्क्रिप्ट से लोड किए गए संसाधन. Preconnect, क्रॉस-ऑरिजिन सर्वर से कनेक्शन को गर्म करने में मदद करता है और टाइम टू फ़र्स्ट बाइट जैसी मेट्रिक को बेहतर बनाने में मदद कर सकता है. यह तब मददगार होता है, जब आपको ऑरिजिन के बारे में पता हो, लेकिन यह ज़रूरी नहीं है कि उस रिसॉर्स का सटीक यूआरएल दिया गया हो.
फे़च प्राथमिकता, इन संसाधन से जुड़े संकेतों को पूरा करती है. यह मार्कअप पर आधारित एक सिग्नल होता है, जो fetchpriority एट्रिब्यूट के ज़रिए उपलब्ध होता है. डेवलपर इसका इस्तेमाल किसी खास संसाधन की प्राथमिकता बताने के लिए कर सकते हैं. डेटा को फ़ेच करने के लिए बनाए गए रिसॉर्स की प्राथमिकता तय करने के लिए, priority प्रॉपर्टी के साथ JavaScript और फ़ेच एपीआई की मदद से भी इन संकेतों का इस्तेमाल किया जा सकता है. 'प्राथमिकता' फ़ेच करने से, पहले से लोड किए गए डेटा को भी बेहतर बनाया जा सकता है. सबसे बड़े कॉन्टेंटफ़ुल पेंट वाली इमेज लें, जिसे पहले से लोड किए जाने पर भी कम प्राथमिकता दी जाएगी. अगर इसे अन्य कम प्राथमिकता वाले संसाधनों से भेजा जाता है, तो 'प्राथमिकता' का इस्तेमाल करने से, इमेज कितनी जल्दी लोड होती है, इसमें मदद मिल सकती है.
संसाधन की प्राथमिकता
संसाधन डाउनलोड का क्रम, पेज पर मौजूद हर संसाधन के लिए ब्राउज़र की असाइन की गई प्राथमिकता पर निर्भर करता है. प्रायॉरिटी कंप्यूटेशन लॉजिक पर असर डालने वाले फ़ैक्टर में ये शामिल हैं:
- संसाधन का टाइप, जैसे कि सीएसएस, फ़ॉन्ट, स्क्रिप्ट, इमेज, और तीसरे पक्ष के संसाधन.
- वह जगह या ऑर्डर जिसमें दस्तावेज़ के बारे में जानकारी दी गई है.
- स्क्रिप्ट पर
asyncयाdeferएट्रिब्यूट का इस्तेमाल किया गया है या नहीं.
यहां दी गई टेबल में दिखाया गया है कि Chrome ज़्यादातर संसाधनों को किस तरह प्राथमिकता देता है और उन्हें क्रम से लगाता है:
| लेआउट ब्लॉक करने के फ़ेज़ में लोड करें | लेआउट ब्लॉक करने के फ़ेज़ में, एक बार में एक ही बार लोड करें | ||||
|---|---|---|---|---|---|
| ब्लिंक प्राथमिकता |
VeryHigh | ज़्यादा | ठीक-ठाक | कम | VeryLow |
| Devटूल प्राथमिकता |
सबसे ज़्यादा रेटिंग वाली | ज़्यादा | ठीक-ठाक | कम | सबसे कम रेटिंग वाली |
| मुख्य संसाधन | |||||
| CSS (शुरुआती**) | CSS (देर से**) | सीएसएस (मीडिया मेल नहीं खाता***) | |||
| स्क्रिप्ट (शुरुआती** या प्रीलोड स्कैनर से नहीं) | स्क्रिप्ट (देर से**) | स्क्रिप्ट (एक साथ काम नहीं करने वाली प्रोसेस) | |||
| फ़ॉन्ट | फ़ॉन्ट (rel=preload) | ||||
| इंपोर्ट करें | |||||
| इमेज (व्यूपोर्ट में) | इमेज (पहली पांच इमेज > 10,000 पिक्सल2) | Image | |||
| मीडिया (वीडियो/ऑडियो) | |||||
| प्रीफ़ेच करें | |||||
| एक्सएसएल | |||||
| XHR (सिंक) | XHR/फ़ेच* (एक साथ काम नहीं करने वाली प्रोसेस) | ||||
ब्राउज़र, सोर्स को उसी क्रम में डाउनलोड करता है जिस क्रम में वे पहले से मिलते-जुलते हैं. Chrome Dev टूल नेटवर्क टैब में जाकर, किसी पेज को लोड करते समय अलग-अलग संसाधनों को असाइन की गई प्राथमिकता देखी जा सकती है. पक्का करें कि आपने टेबल के टाइटल पर राइट क्लिक करके और उस पर सही का निशान लगाकर, प्राथमिकता कॉलम को शामिल किया है.
type = "font" की प्राथमिकता
type = "script" की प्राथमिकता.प्राथमिकताओं में बदलाव होने पर, बड़े अनुरोध की लाइनों की सेटिंग या टूलटिप में, शुरुआती और आखिरी, दोनों प्राथमिकता देखी जा सकती है.
आपको 'फ़ेच प्राथमिकता' की ज़रूरत कब पड़ सकती है?
अब आपको ब्राउज़र की प्राथमिकता के हिसाब से जानकारी मिल गई है. ऐसे में, अब पेज को डाउनलोड करने के क्रम में बदलाव किया जा सकता है, ताकि पेज की परफ़ॉर्मेंस और वेबसाइट की परफ़ॉर्मेंस की जानकारी को ऑप्टिमाइज़ किया जा सके. यहां कुछ ऐसे उदाहरण दिए गए हैं जिनमें बदलाव करके, संसाधन डाउनलोड की प्राथमिकता तय की जा सकती है:
<script>और<link>जैसे संसाधन टैग को उसी क्रम में रखें जिस क्रम में आपको ब्राउज़र उन्हें डाउनलोड करने देना चाहता है. आम तौर पर, एक जैसी प्राथमिकता वाले रिसॉर्स उसी क्रम में लोड किए जाते हैं जिस क्रम में उन्हें खोजा जाता है.- ज़रूरी संसाधनों को पहले डाउनलोड करने के लिए,
preloadरिसॉर्स संकेत का इस्तेमाल करें. खास तौर पर, ऐसे संसाधनों को डाउनलोड करने के लिए जिन्हें ब्राउज़र आसानी से जल्दी नहीं खोज सकता. - दूसरे संसाधनों को ब्लॉक किए बिना, स्क्रिप्ट डाउनलोड करने के लिए
asyncयाdeferका इस्तेमाल करें. - वेबसाइट में फ़ोल्ड के नीचे लेज़ी-लोड की सुविधा, ताकि ब्राउज़र उपलब्ध बैंडविड्थ का इस्तेमाल ज़्यादा ज़रूरी संसाधनों के लिए कर सके.
इन तकनीकों का इस्तेमाल करके, ब्राउज़र की प्राथमिकता का हिसाब आसानी से लगाया जा सकता है. इससे परफ़ॉर्मेंस और वेबसाइट की परफ़ॉर्मेंस की जानकारी बेहतर होती है. उदाहरण के लिए, अगर कोई बैकग्राउंड इमेज पहले से लोड होती है, तो उसे पहले ही खोजा जा सकता है. इससे सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) को बेहतर बनाया जा सकता है.
कभी-कभी ऐसा हो सकता है कि आपके ऐप्लिकेशन के लिए, संसाधनों को प्राथमिकता देने के लिए ये हैंडल काफ़ी न हों. यहां कुछ ऐसे मामले दिए गए हैं जिनमें 'प्राथमिकता' फ़ेच करने से मदद मिल सकती है:
- आपके पास वेबपेज पर सबसे ऊपर कई इमेज हैं, लेकिन सभी की प्राथमिकता एक जैसी नहीं होनी चाहिए. उदाहरण के लिए, किसी इमेज कैरसेल में, सिर्फ़ पहली बार दिखने वाली इमेज को ज़्यादा प्राथमिकता की ज़रूरत होती है. वहीं दूसरी ओर, आम तौर पर ऑफ़स्क्रीन वाली इमेज को कम प्राथमिकता पर सेट किया जा सकता है.
- व्यूपोर्ट के अंदर की इमेज आम तौर पर
Lowप्राथमिकता से शुरू होती हैं. लेआउट पूरा होने के बाद, Chrome को पता चलता है कि वे व्यूपोर्ट में हैं और उनकी प्राथमिकता बढ़ा देता है. आम तौर पर, इससे अहम इमेज, जैसे कि हीरो इमेज लोड होने में ज़्यादा समय लगता है. मार्कअप में फे़च प्राथमिकता देने से, इमेजHighकी प्राथमिकता से शुरू होती है और काफ़ी पहले लोड होना शुरू हो जाती है. इसे ऑटोमेट करने की कोशिश में, Chrome ने पहले पांच बड़ी इमेज कोMediumप्राथमिकता पर सेट कर दिया है. इससे मदद मिलेगी, लेकिन साफ़ तौर पर इमेज के साथfetchpriority="high"का इस्तेमाल करना और बेहतर होगा.
सीएसएस बैकग्राउंड के तौर पर शामिल की गई एलसीपी इमेज को शुरुआती खोज के लिए, पहले से लोड करना अब भी ज़रूरी है. बैकग्राउंड की इमेज की प्राथमिकता बढ़ाने के लिए, पहले से लोड की गई इमेज मेंfetchpriority='high'शामिल करें. - स्क्रिप्ट को
asyncयाdeferके तौर पर सेट करने से, ब्राउज़र उन्हें एसिंक्रोनस रूप से लोड होने के लिए कहता है. हालांकि, जैसा कि प्राथमिकता टेबल में दिखाया गया है, इन स्क्रिप्ट को भी एक "कम" प्राथमिकता असाइन की जाती है. एसिंक्रोनस डाउनलोड को सुनिश्चित करते हुए आप शायद उनकी प्राथमिकता बढ़ाना चाहें, विशेष रूप से ऐसे स्क्रिप्ट जो उपयोगकर्ता अनुभव के लिए महत्वपूर्ण हैं. - अगर एसिंक्रोनस तरीके से रिसॉर्स या डेटा फ़ेच करने के लिए JavaScript
fetch()API का इस्तेमाल किया जाता है, तो ब्राउज़र उसेHighप्राथमिकता असाइन करता है. ऐसा हो सकता है कि आप अपने कुछ फ़ेच कम प्राथमिकता के साथ चलाना चाहें, खासकर तब, जब आप बैकग्राउंड एपीआई कॉल को ऐसे एपीआई कॉल के साथ मिला रहे हों जो उपयोगकर्ता के इनपुट का जवाब देते हैं. बैकग्राउंड एपीआई कॉल कोLowप्राथमिकता के तौर पर और इंटरैक्टिव एपीआई कॉल कोHighप्राथमिकता के तौर पर मार्क करें. - ब्राउज़र, सीएसएस और फ़ॉन्ट को
Highप्राथमिकता असाइन करता है, लेकिन हो सकता है कि उनमें से कुछ संसाधन दूसरों के मुकाबले ज़्यादा ज़रूरी हों. आप गैर-ज़रूरी संसाधनों की प्राथमिकता को कम करने के लिए, 'प्राथमिकता' का इस्तेमाल कर सकते हैं. ध्यान दें कि शुरुआत में दिखाए जाने वाले सीएसएस की मदद से रेंडर होने की सुविधा को बेहतर बनाया जा रहा है. इसलिए, आम तौर पर यहHighकी प्राथमिकता होनी चाहिए.
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" (◉) उस तरह के संसाधन की डिफ़ॉल्ट प्राथमिकता को मार्क करता है. (Google दस्तावेज़ के रूप में भी उपलब्ध है).
| लेआउट ब्लॉक करने के फ़ेज़ में लोड करें | लेआउट ब्लॉक करने के चरण में, एक बार में एक लोड करें | ||||
|---|---|---|---|---|---|
| ब्लिंक प्राथमिकता |
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>
हालांकि, 2-4 इमेज व्यूपोर्ट के बाहर होंगी, इसलिए उन्हें "काफ़ी पास" माना जा सकता है, ताकि उन्हें high पर बूस्ट किया जा सके और load=lazy एट्रिब्यूट जोड़े जाने के बावजूद लोड भी किया जा सके. इसलिए, इसके लिए fetchpriority="low" सही हल है.
हमने Oodle ऐप्लिकेशन के साथ एक पुराने प्रयोग में, इसका इस्तेमाल उन इमेज की प्राथमिकता को कम करने के लिए किया था जो लोड होने पर नहीं दिखती हैं. इससे पेज लोड होने का समय 2 सेकंड कम हो गया.
पहले से लोड किए गए संसाधनों की प्राथमिकता कम करें
पहले से लोड किए गए संसाधनों को अन्य ज़रूरी संसाधनों के साथ प्रतिस्पर्धा करने से रोकने के लिए, उनकी प्राथमिकता को कम किया जा सकता है. इस तकनीक का इस्तेमाल इमेज, स्क्रिप्ट, और सीएसएस के साथ करें.
<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" as="script" href="non-critical-script.js" fetchpriority="low">
<!-- Preload CSS without blocking render, or 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>
इससे, इस स्क्रिप्ट तक पहुंचने पर पार्सर अब भी ब्लॉक हो जाएगा. हालांकि, इससे पहले के कॉन्टेंट को प्राथमिकता दी जाएगी.
अगर पूरे DOM की ज़रूरत है, तो आपके पास एक विकल्प है. आप defer एट्रिब्यूट (जो DOMContentLoaded के बाद, क्रम में चलता है) या पेज पर सबसे नीचे async का इस्तेमाल करें.
गैर-ज़रूरी डेटा फ़ेच करने की सुविधा की प्राथमिकता कम करें
ब्राउज़र, 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"का इस्तेमाल करके पहले से लोड करें.प्राथमिकता के आधार पर तय किए गए लोड में लगने वाले समय में होने वाले सुधार, ऐसे माहौल में ज़्यादा काम के होते हैं जहां ज़्यादा संसाधन उपलब्ध नेटवर्क बैंडविथ के लिए मुकाबला करते हैं. यह HTTP/1.x कनेक्शन के लिए आम है, जहां समानांतर डाउनलोड संभव नहीं है, या कम बैंडविड्थ वाले HTTP/2 या HTTP/3 कनेक्शन पर ऐसा होता है. ऐसे मामलों में, प्राथमिकता तय करने से दिक्कतों को दूर करने में मदद मिल सकती है.
सीडीएन, एचटीटीपी/2 की प्राथमिकता को एक जैसा लागू नहीं करते. इसी तरह, ये एचटीटीपी/3 के लिए भी काम करते हैं. भले ही ब्राउज़र, 'प्राथमिकता' से मिली प्राथमिकता के बारे में बताता हो, लेकिन हो सकता है कि सीडीएन, संसाधनों को तय किए गए क्रम में दोबारा प्राथमिकता न दे. इससे, 'प्राथमिकता' को टेस्ट करना मुश्किल हो जाता है. प्राथमिकताओं को ब्राउज़र में अंदरूनी तौर पर और ऐसे प्रोटोकॉल के साथ लागू किया जाता है जो प्राथमिकता (एचटीटीपी/2 और एचटीटीपी/3) के साथ काम करते हैं. सीडीएन या ऑरिजिन सपोर्ट के अलावा, अंदरूनी ब्राउज़र की प्राथमिकता के लिए, फे़च प्राथमिकता का इस्तेमाल अब भी किया जा सकता है. इसकी वजह यह है कि जब ब्राउज़र, संसाधनों का अनुरोध करता है, तो अक्सर प्राथमिकताएं बदल जाती हैं. उदाहरण के लिए, जब ब्राउज़र ज़रूरी
<head>आइटम प्रोसेस करता है, तब इमेज जैसे कम प्राथमिकता वाले संसाधनों को अक्सर अनुरोध किए जाने से रोक दिया जाता है.हो सकता है कि आप अपने शुरुआती डिज़ाइन में, 'फ़ेच प्राथमिकता' को सबसे सही तरीके के तौर पर पेश न कर पाएं. अपने डेवलपमेंट साइकल में आगे चलकर, पेज पर मौजूद अलग-अलग संसाधनों को असाइन की जा रही प्राथमिकताएं सेट की जा सकती हैं. साथ ही, अगर ये आपकी उम्मीद के मुताबिक नहीं हैं, तो इन्हें ऑप्टिमाइज़ करने के लिए 'प्राथमिकता दें' को लॉन्च किया जा सकता है.
डेवलपर को अपने इंटेंट के मुताबिक—ऐसे संसाधनों को पहले से लोड करने के लिए प्रीलोड का इस्तेमाल करना चाहिए जिनका पार्सर को पता नहीं चला (फ़ॉन्ट, इंपोर्ट, बैकग्राउंड एलसीपी इमेज). संसाधन के पहले से लोड होने पर, preload संकेत के प्लेसमेंट पर असर पड़ेगा.
फे़च की प्राथमिकता से यह पता चलता है कि संसाधन को फ़ेच किए जाने पर, उसे कैसे फ़ेच किया जाना चाहिए.
पहले से लोड किए गए डेटा को इस्तेमाल करने के बारे में सलाह
पहले से लोड की जाने वाली फ़ाइलों का इस्तेमाल करते समय इन बातों का ध्यान रखें:
- एचटीटीपी हेडर में पहले से लोड करने की सुविधा शामिल करने से, लोड होने के क्रम में शामिल अन्य सभी चीज़ों से पहले वह लोड हो जाता है.
- आम तौर पर,
Mediumया इससे ज़्यादा प्राथमिकता वाली किसी भी चीज़ के लिए, पार्सर उस क्रम में पहले से लोड हो जाता है जिस क्रम में वह पार्सर तक पहुंचता है. अगर एचटीएमएल की शुरुआत में पहले से लोड किए गए यूआरएल शामिल किए जा रहे हैं, तो सावधानी बरतें. - पहले से लोड किए गए फ़ॉन्ट, शायद सिर के आखिर या मुख्य हिस्से में बेहतर तरीके से काम करते हैं.
- पहले से लोड किए गए इंपोर्ट (डाइनैमिक
import()याmodulepreload), उन स्क्रिप्ट टैग के बाद चलने चाहिए जिन्हें इंपोर्ट की ज़रूरत है. इसलिए, पक्का करें कि स्क्रिप्ट लोड या पार्स हो जाए, ताकि इसकी डिपेंडेंसी लोड होने के दौरान इसका आकलन किया जा सके. - पहले से लोड की गई इमेज की प्राथमिकता
LowयाMediumहोती है. एक साथ काम नहीं करने वाली स्क्रिप्ट और कम या सबसे कम प्राथमिकता वाले टैग के हिसाब से उन्हें क्रम में लगाएं.
इतिहास
फे़च प्रायॉरिटी को पहली बार Chrome में ऑरिजिन ट्रायल के तौर पर साल 2018 में आज़माया गया था. इसके बाद, importance एट्रिब्यूट का इस्तेमाल करके इसे 2021 में फिर से एक्सपेरिमेंट किया गया. उस समय, इसे प्राथमिकता संकेत कहा जाता था. इसके बाद, इंटरफ़ेस को एचटीएमएल के लिए fetchpriority और JavaScript के फ़ेच एपीआई के लिए priority में बदल दिया गया है. ऐसा वेब स्टैंडर्ड प्रोसेस के तहत किया गया है. भ्रम की स्थिति को कम करने के लिए, अब हम इस एपीआई को फ़ेच करने की प्राथमिकता को कहते हैं.
नतीजा
ऐसा हो सकता है कि डेवलपर को 'प्राथमिकता' फ़ेच करने में दिलचस्पी हो. इसमें पेज को पहले से लोड करने के तरीके को ठीक किया गया है. साथ ही, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी और एलसीपी पर हाल ही में फ़ोकस किया गया है. अब इनमें लोड होने वाले पसंदीदा नॉब उपलब्ध हैं, ताकि कॉन्टेंट लोड होने के लिए उन्हें अपनी पसंद के हिसाब से क्रम में लगाया जा सके.