Fetch Priority API, ब्राउज़र पर संसाधनों की प्राथमिकता के बारे में बताता है. यह वेबसाइट की परफ़ॉर्मेंस की जानकारी को बेहतर तरीके से लोड करता है और इसे बेहतर बनाता है.
जब कोई ब्राउज़र किसी वेब पेज को पार्स करता है और इमेज, स्क्रिप्ट या सीएसएस जैसे संसाधनों को खोजना और डाउनलोड करना शुरू करता है, तो यह उन्हें सही क्रम में रिसॉर्स डाउनलोड करने के लिए फ़ेच priority असाइन करता है. ये प्राथमिकताएं इस बात पर निर्भर कर सकती हैं कि संसाधन किस तरह का है और दस्तावेज़ में वह कहां है. उदाहरण के लिए, इन-व्यूपोर्ट इमेज की High प्राथमिकता हो सकती है, जबकि जल्दी लोड होने की प्राथमिकता को प्राथमिकता दी जाती है. साथ ही, <head> में <link>s के ज़रिए रेंडर करने वाले सीएसएस को Very High किया जा सकता है. ब्राउज़र ऐसी प्राथमिकताएं असाइन करने का काम बहुत अच्छे से करते हैं जो अच्छी तरह से काम करती हैं, लेकिन हो सकता है कि वे सभी मामलों में सही न हों.
इस लेख में, हम 'प्राथमिकता एपीआई' और 'fetchpriority' एचटीएमएल एट्रिब्यूट के बारे में बात करेंगे. इससे आपको किसी संसाधन (high या low) की प्राथमिकता के बारे में पता चलेगा. 'प्राथमिकता' की मदद से, वेबसाइट की परफ़ॉर्मेंस की जानकारी को ऑप्टिमाइज़ किया जा सकता है.
खास जानकारी
कुछ अहम चीज़ें जहां 'प्राथमिकता' से मदद मिल सकती है:
- एलसीपी इमेज की प्राथमिकता बढ़ाने के लिए, इमेज एलिमेंट पर
fetchpriority="high"तय करें. इससे एलसीपी जल्द हो जाएगा. - आम तौर पर इस्तेमाल होने वाले (
asyncस्क्रिप्ट के लिए<link rel="preload">डालकर) मौजूदा हैक के मुकाबले, बेहतर सिमेंटिक्स का इस्तेमाल करकेasyncस्क्रिप्ट की प्राथमिकता बढ़ाएं. - इमेज के साथ बेहतर क्रम में लगाने के लिए, लेट-बॉडी स्क्रिप्ट की प्राथमिकता कम करें.
पहले से ही, प्रीलोड और प्रीकनेक्ट का इस्तेमाल करके, डेवलपर के पास संसाधनों की प्राथमिकता पर कुछ असर हुआ है, लेकिन उनका असर सीमित है. फे़च प्राथमिकता, इन संसाधन संकेतों को और बेहतर बनाती है. हालांकि, यह समझना ज़रूरी है कि ये सभी संकेत कहां फ़िट होते हैं. पहले से लोड करने की सुविधा की मदद से, ब्राउज़र को उन अहम संसाधनों के बारे में बताया जा सकता है जिन्हें आपको जल्दी लोड करना है. इससे, उन्हें आसानी से खोजा जा सकेगा. यह खास तौर पर ऐसे संसाधनों के लिए फ़ायदेमंद है जिन्हें आसानी से नहीं खोजा जा सकता. जैसे, स्टाइलशीट में शामिल फ़ॉन्ट, बैकग्राउंड की इमेज या किसी स्क्रिप्ट से लोड किए गए संसाधन. Preconnect, क्रॉस-ऑरिजिन सर्वर के कनेक्शन को गर्म करने में मदद करता है और Time-to-first-byte जैसी मेट्रिक को बेहतर बनाने में मदद कर सकता है. यह तब काम आता है, जब आपको किसी ऑरिजिन की जानकारी हो, लेकिन यह ज़रूरी नहीं कि उस संसाधन का सटीक यूआरएल हो जिसकी ज़रूरत है.
फे़च प्रायॉरिटी एक मार्कअप-आधारित सिग्नल है (fetchpriority एट्रिब्यूट के ज़रिए उपलब्ध) जिसका इस्तेमाल डेवलपर किसी खास संसाधन की मिलती-जुलती प्राथमिकता बताने के लिए कर सकते हैं. डेटा के लिए बनाए गए रिसॉर्स फ़ेच की प्राथमिकता को कंट्रोल करने के लिए, priority प्रॉपर्टी के साथ JavaScript और फ़ेच एपीआई के ज़रिए भी इन संकेतों का इस्तेमाल किया जा सकता है. 'प्राथमिकता' फ़ेच करने से, पहले से लोड किए गए डेटा को भी बेहतर बनाया जा सकता है. सबसे बड़े कॉन्टेंटफ़ुल पेंट वाली इमेज लें, जिसे पहले से लोड किए जाने पर भी कम प्राथमिकता दी जाएगी. अगर इसे अन्य कम प्राथमिकता वाले संसाधनों से भेजा जाता है, तो 'प्राथमिकता' का इस्तेमाल करने से, इमेज कितनी जल्दी लोड होती है, इसमें मदद मिल सकती है.
प्राथमिकता फ़ेच करने की सुविधा, Chrome 101 या उसके बाद के वर्शन में उपलब्ध है.
संसाधन की प्राथमिकता
संसाधन डाउनलोड का क्रम, पेज पर मौजूद हर संसाधन के लिए ब्राउज़र की असाइन की गई प्राथमिकता पर निर्भर करता है. प्रायॉरिटी कंप्यूटेशन लॉजिक पर अलग-अलग फ़ैक्टर का असर पड़ सकता है. उदाहरण के लिए,
- सीएसएस, फ़ॉन्ट, स्क्रिप्ट, इमेज, और तीसरे पक्ष के संसाधनों को अलग-अलग प्राथमिकताएं असाइन की जाती हैं.
- जिस जगह या क्रम में दस्तावेज़ में संसाधनों का रेफ़रंस दिया जाता है वह संसाधनों की प्राथमिकता पर भी असर डालती है.
preloadके रिसॉर्स हिंट से, ब्राउज़र को किसी संसाधन को तेज़ी से खोजने में मदद मिलती है. इससे दस्तावेज़ के लोड होने और उसकी प्राथमिकता पर असर पड़ता है.asyncयाdeferस्क्रिप्ट के लिए, प्राथमिकता का हिसाब लगाते हैं.
इस टेबल में बताया गया है कि Chrome में फ़िलहाल ज़्यादातर संसाधनों को किस तरह प्राथमिकता दी जा रही है और किस तरह क्रम से लगाया गया है.
| लेआउट ब्लॉक करने के फ़ेज़ में लोड करें | लेआउट ब्लॉक करने के फ़ेज़ में, एक बार में एक ही बार लोड करें | ||||
|---|---|---|---|---|---|
| ब्लिंक प्राथमिकता |
VeryHigh | ज़्यादा | माध्यम (अभियान ट्रैकिंग) | कम | VeryLow |
| Devटूल प्राथमिकता |
सबसे ज़्यादा रेटिंग वाली | ज़्यादा | माध्यम (अभियान ट्रैकिंग) | कम | सबसे कम रेटिंग वाली |
| मुख्य संसाधन | |||||
| CSS (शुरुआती**) | CSS (देर से**) | सीएसएस (मीडिया मेल नहीं खाता***) | |||
| स्क्रिप्ट (शुरुआती** या प्रीलोड स्कैनर से नहीं) | स्क्रिप्ट (देर से**) | स्क्रिप्ट (एक साथ काम नहीं करने वाली प्रोसेस) | |||
| फ़ॉन्ट | फ़ॉन्ट (rel=preload) | ||||
| इंपोर्ट करें | |||||
| इमेज (व्यूपोर्ट में) | इमेज (पहली पांच इमेज > 10,000 पिक्सल2) | इमेज | |||
| मीडिया | |||||
| SVG दस्तावेज़ | |||||
| प्रीफ़ेच करें | |||||
| एक्सएसएल | |||||
| XHR (सिंक) | XHR/फ़ेच* (एक साथ काम नहीं करने वाली प्रोसेस) | ||||
ब्राउज़र, खोजी जाने के क्रम में एक जैसी प्राथमिकता वाले रिसॉर्स डाउनलोड करता है. Chrome Dev टूल नेटवर्क टैब में जाकर, किसी पेज को लोड करते समय अलग-अलग संसाधनों को असाइन की गई प्राथमिकता देखी जा सकती है. (टेबल की हेडिंग पर राइट क्लिक करके पक्का करें कि आपने प्राथमिकता कॉलम शामिल किया है).
type = "font" की प्राथमिकता
प्राथमिकताएं बदलने पर, शुरुआती और आखिरी, दोनों प्राथमिकता देखने के लिए बड़े अनुरोध वाली लाइनों की सेटिंग का इस्तेमाल किया जा सकता है. अनुरोध की बड़ी लाइनों की सेटिंग पर ध्यान दिए बिना, इस जानकारी को टूलटिप में दिखाया जाता है.
आपको 'फ़ेच प्राथमिकता' की ज़रूरत कब पड़ेगी?
ब्राउज़र की प्राथमिकता तय करने के लॉजिक की जानकारी से, आपको कुछ मौजूदा नॉब उपलब्ध होते हैं. इनकी मदद से, डाउनलोड के क्रम में बदलाव किया जा सकता है. आप:
<script>और<link>जैसे संसाधन टैग उस क्रम के आधार पर लगाएं जिसमें उन्हें डाउनलोड करना है. आम तौर पर, एक जैसी प्राथमिकता वाले रिसॉर्स उसी क्रम में लोड किए जाते हैं जिस क्रम में उन्हें खोजा जाता है.- ज़रूरी संसाधनों को पहले डाउनलोड करने के लिए,
preloadरिसॉर्स संकेत का इस्तेमाल करें. खास तौर पर, ऐसे संसाधनों को डाउनलोड करने के लिए जिन्हें ब्राउज़र आसानी से जल्दी नहीं खोज सकता. - दूसरे संसाधनों को ब्लॉक किए बिना, स्क्रिप्ट डाउनलोड करने के लिए
asyncयाdeferका इस्तेमाल करें. - वेबसाइट में फ़ोल्ड के नीचे लेज़ी-लोड की सुविधा, ताकि ब्राउज़र उपलब्ध बैंडविथ का इस्तेमाल, वेबपेज के ऊपरी हिस्से में मौजूद ज़्यादा ज़रूरी संसाधनों के लिए कर सके.
इन तकनीकों का इस्तेमाल करके, ब्राउज़र की प्राथमिकता का हिसाब आसानी से लगाया जा सकता है. इससे परफ़ॉर्मेंस और वेबसाइट की परफ़ॉर्मेंस की जानकारी बेहतर होती है. उदाहरण के लिए, अगर कोई बैकग्राउंड इमेज पहले से लोड होती है, तो उसे पहले ही खोजा जा सकता है. इससे सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) को बेहतर बनाया जा सकता है.
कभी-कभी ऐसा हो सकता है कि आपके ऐप्लिकेशन के लिए, संसाधनों को प्राथमिकता देने के लिए ये हैंडल काफ़ी न हों. यहां कुछ ऐसे मामले दिए गए हैं जिनमें 'प्राथमिकता' फ़ेच करने से मदद मिल सकती है:
- आपके पास फ़ोल्ड के ऊपर कई इमेज हैं, लेकिन यह ज़रूरी नहीं है कि उन सभी की प्राथमिकता एक जैसी हो. उदाहरण के लिए, किसी इमेज कैरसेल में, पहली बार दिखने वाली इमेज को ही अन्य इमेज की तुलना में ज़्यादा प्राथमिकता दी जानी चाहिए.
- व्यूपोर्ट के अंदर हीरो इमेज आम तौर पर "कम" प्राथमिकता से शुरू होती हैं (ध्यान दें कि Chrome 117 में, पहली पांच बड़ी इमेज "मीडियम" पर सेट हो सकती हैं, लेकिन इसमें आपकी हीरो इमेज शामिल हो सकती है और नहीं भी). लेआउट पूरा होने के बाद, Chrome को पता चलता है कि वे व्यूपोर्ट में हैं और उनकी प्राथमिकता बढ़ा देता है. आम तौर पर, इससे इमेज लोड होने में ज़्यादा समय लगता है. मार्कअप में फे़च प्राथमिकता देने से, इमेज "ज़्यादा" प्राथमिकता से शुरू होती है और काफ़ी पहले लोड हो जाती है.
ध्यान दें कि सीएसएस बैकग्राउंड के तौर पर शामिल एलसीपी इमेज को जल्दी खोजने के लिए, इसे पहले से लोड करना अब भी ज़रूरी है. साथ ही, इसे पहले से लोड किए गए पेज मेंfetchpriority='high'को शामिल करके, फ़ेच प्राथमिकता के साथ जोड़ा जा सकता है. ऐसा न करने पर भी, इमेज की प्राथमिकता "कम" या "सामान्य" प्राथमिकता से शुरू होगी. - स्क्रिप्ट को
asyncयाdeferके तौर पर सेट करने से, ब्राउज़र उन्हें एसिंक्रोनस रूप से लोड होने के लिए कहता है. हालांकि, जैसा कि पिछली टेबल में दिखाया गया है, इन स्क्रिप्ट को भी एक "कम" प्राथमिकता असाइन की गई है. एसिंक्रोनस डाउनलोड सुनिश्चित करते हुए शायद आप उनकी प्राथमिकता बढ़ाना चाहें, विशेष रूप से ऐसी किसी भी स्क्रिप्ट के लिए जो उपयोगकर्ता अनुभव के लिए महत्वपूर्ण है. - एसिंक्रोनस तरीके से संसाधनों या डेटा को फ़ेच करने के लिए, JavaScript
fetch()API का इस्तेमाल किया जा सकता है. ब्राउज़र ने फ़ेच को "ज़्यादा" प्राथमिकता दी है. कुछ मामलों में, हो सकता है कि आप अपने सभी फ़ेच को "ज़्यादा" प्राथमिकता के साथ एक्ज़ीक्यूट न करना चाहें और इसके बजाय, 'फ़ेच प्राथमिकता' का इस्तेमाल करना चाहें. इस सुविधा से, बैकग्राउंड में एपीआई कॉल करने और उन्हें ऐसे एपीआई कॉल के साथ मिलाने में मदद मिल सकती है जो उपयोगकर्ता के इनपुट का जवाब देते हैं, जैसे कि ऑटोकंप्लीट की सुविधा. बैकग्राउंड एपीआई कॉल को "खराब" प्राथमिकता के तौर पर और इंटरैक्टिव एपीआई कॉल को "ज़्यादा" प्राथमिकता के तौर पर टैग किया जा सकता है. - ब्राउज़र, सीएसएस और फ़ॉन्ट को "ज़्यादा" प्राथमिकता देता है. हालांकि, हो सकता है कि ऐसे सभी रिसॉर्स, एलसीपी के लिए एक जैसे ज़रूरी या ज़रूरी न हों. इनमें से कुछ संसाधनों की प्राथमिकता कम करने के लिए, 'प्राथमिकता' का इस्तेमाल किया जा सकता है.
fetchpriority एट्रिब्यूट
आपके पास, fetchpriority एचटीएमएल एट्रिब्यूट का इस्तेमाल करके, 'फ़ेच प्राथमिकता' सेट करने का विकल्प होता है. इस एट्रिब्यूट का इस्तेमाल link, img, और script टैग के साथ किया जा सकता है. इस एट्रिब्यूट की मदद से, सीएसएस, फ़ॉन्ट, स्क्रिप्ट, और इमेज जैसे रिसॉर्स टाइप की प्राथमिकता तय की जा सकती है. ऐसा तब होता है, जब उन्हें साथ काम करने वाले टैग का इस्तेमाल करके डाउनलोड किया जाता है.
fetchpriority एट्रिब्यूट, इन तीन में से किसी एक वैल्यू को स्वीकार करता है:
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) | ⬆ | ◉ | ⬇ | ||
| इमेज | ⬆ | ◉⬇ | |||
| मीडिया (वीडियो/ऑडियो) | ⬆ | ◉⬇ | |||
| SVG दस्तावेज़ | ⬆ | ◉⬇ | |||
| XHR (सिंक) - काम नहीं करता | ◉ | ||||
| XHR/फ़ेच* (एक साथ काम नहीं करने वाली प्रोसेस) | ⬆◉ | ⬇ | |||
| प्रीफ़ेच करें | ◉ | ||||
| एक्सएसएल | ◉ | ||||
ध्यान दें कि fetchpriority तुलना के आधार पर प्राथमिकता सेट करता है. इसका मतलब है कि यह प्राथमिकता को साफ़ तौर पर "ज़्यादा" या "कम" पर सेट करने के बजाय, डिफ़ॉल्ट प्राथमिकता को बढ़ाकर या कम कर देता है. इसके बाद ब्राउज़र मिलती-जुलती प्राथमिकता तय करता है. अक्सर यह "ज़्यादा" या "कम" होता है, लेकिन हमेशा नहीं. उदाहरण के लिए, fetchpriority="high" वाली ज़रूरी सीएसएस अब भी "बहुत ज़्यादा"/"सबसे ज़्यादा" प्राथमिकता बनी रहेगी और इन पर fetchpriority="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'">
स्क्रिप्ट की प्राथमिकता बदलें
पेज के कुछ हिस्सों को इंटरैक्टिव बनाने के लिए, ज़रूरी स्क्रिप्ट होना ज़रूरी है. हालांकि, इनमें दूसरे रिसॉर्स को ब्लॉक नहीं किया जाना चाहिए. इन्हें ज़्यादा प्राथमिकता वाले असिंक के तौर पर मार्क किया जा सकता है.
<script src="async_but_important.js" async fetchpriority="high"></script>
अगर स्क्रिप्ट खास DOM स्थितियों पर निर्भर करती हैं, तो उन्हें एक साथ काम नहीं करने वाली स्क्रिप्ट के रूप में मार्क नहीं किया जा सकता. हालांकि, अगर वे पेज पर नीचे की ओर होते हैं, तो हो सकता है कि उन्हें कम प्राथमिकता के साथ डाउनलोड किया जाए, जैसा कि दिखाया गया है.
<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"का इस्तेमाल करके पहले से लोड करना चाहिए.प्राथमिकता तय करने की वजह से होने वाला फ़ायदा, उन जगहों पर ज़्यादा काम का होगा जहां नेटवर्क की बैंडविड्थ के हिसाब से ज़्यादा संसाधन उपलब्ध होते हैं. यह HTTP/1.x कनेक्शन के लिए आम है, जहां समानांतर डाउनलोड संभव नहीं होते या कम बैंडविड्थ वाले HTTP/2 कनेक्शन में होते हैं. प्राथमिकता तय करने से इन स्थितियों में आने वाली रुकावटों को दूर किया जा सकता है.
सीडीएन, एचटीटीपी/2 की प्राथमिकता को एक ही तरह से लागू नहीं करते. भले ही ब्राउज़र, 'प्राथमिकता' का इस्तेमाल करके सुझाई गई प्राथमिकता के बारे में बताता हो, लेकिन हो सकता है कि सीडीएन, संसाधनों को ज़रूरी क्रम में प्राथमिकता न दे. इससे 'प्राथमिकता' को टेस्ट करना मुश्किल हो जाता है. प्राथमिकताओं को ब्राउज़र में अंदरूनी तौर पर और ऐसे प्रोटोकॉल के साथ लागू किया जाता है जो प्राथमिकता (एचटीटीपी/2 और एचटीटीपी/3) के साथ काम करते हैं. इसे तब भी इस्तेमाल किया जा सकता है, जब ब्राउज़र की प्राथमिकता तय करने की प्रोसेस, सीडीएन या ऑरिजिन सपोर्ट के बिना इस्तेमाल की जा रही हो. ऐसा तब होता है, जब ब्राउज़र, संसाधनों का अनुरोध करता है. उदाहरण के लिए, जब ब्राउज़र ज़रूरी
<head>आइटम प्रोसेस करता है, तब अक्सर कम प्राथमिकता वाले रिसॉर्स, जैसे कि इमेज को अनुरोध किए जाने से रोक देते हैं.हो सकता है कि आपके शुरुआती डिज़ाइन में, 'फ़ेच प्राथमिकता' को सबसे सही तरीके के तौर पर लागू न किया जा सके. यह एक ऑप्टिमाइज़ेशन है, जिसे बाद में डेवलपमेंट साइकल में लागू किया जा सकता है. पेज पर मौजूद अलग-अलग संसाधनों को असाइन की जा रही प्राथमिकताएं देखी जा सकती हैं. साथ ही, अगर वे आपकी उम्मीद के मुताबिक नहीं हैं, तो ज़्यादा ऑप्टिमाइज़ेशन के लिए 'प्राथमिकता' लॉन्च करें.
Chrome 95 के बाद प्रीलोड का इस्तेमाल करना
प्राथमिकता फ़ेच करने की सुविधा, Chrome 73 से लेकर वर्शन 76 तक के वर्शन में आज़माने के लिए उपलब्ध थी. हालांकि, Chrome 95 में पहले से लोड किए गए पेजों को प्राथमिकता देने से जुड़ी समस्याओं की वजह से, इसे रिलीज़ नहीं किया गया. Chrome 95 से पहले के वर्शन में, <link rel=preload> से जारी किए गए अनुरोध, प्रीलोड स्कैनर से देखे जाने वाले अन्य अनुरोधों से पहले ही शुरू हो जाते हैं. भले ही, अन्य अनुरोधों को ज़्यादा प्राथमिकता दी गई हो.
Chrome 95 में सुधार और 'प्राथमिकता' को बेहतर बनाने के बाद, हमें उम्मीद है कि डेवलपर अपने मकसद के लिए प्रीलोड का इस्तेमाल करना शुरू कर देंगे, ताकि पार्सर को पता न चलने वाले संसाधनों (फ़ॉन्ट, इंपोर्ट, बैकग्राउंड एलसीपी इमेज) का पता न चल पाए. संसाधन के पहले से लोड होने पर, preload संकेत के प्लेसमेंट पर असर पड़ेगा. पहले से लोड करने की सुविधा का इस्तेमाल करने के बारे में कुछ खास बातें यहां दी गई हैं:
- एचटीटीपी हेडर में प्रीलोड शामिल करने से यह बाकी सभी चीज़ों से आगे निकल जाएगा.
- आम तौर पर, "मध्यम" प्राथमिकता से ऊपर की किसी भी चीज़ के लिए, पहले से लोड किए गए लोड उसी क्रम में लोड होते हैं जिस क्रम में पार्सर उन तक पहुंचता है. इसलिए, अगर एचटीएमएल की शुरुआत में पहले से लोड किए गए डेटा को शामिल किया जा रहा है, तो सावधानी बरतें.
- पहले से लोड किए गए फ़ॉन्ट, शायद सिर के आखिर या मुख्य हिस्से में बेहतर तरीके से काम करेंगे.
- पहले से लोड किए गए इंपोर्ट (डाइनैमिक
import()याmodulepreload), उस स्क्रिप्ट टैग के बाद किए जाने चाहिए जिसे इंपोर्ट करना ज़रूरी है. इससे, पहले असल स्क्रिप्ट लोड/पार्स हो जाती है. आम तौर पर, अगर स्क्रिप्ट टैग कोई ऐसी स्क्रिप्ट लोड करता है जो डिपेंडेंसी के लोड को ट्रिगर करेगी, तो पक्का करें कि डिपेंडेंसी के लिए<link rel=preload>, पैरंट स्क्रिप्ट टैग के बाद हो. ऐसा न होने पर, डिपेंडेंसी मुख्य स्क्रिप्ट से पहले लोड हो सकती है. डिपेंडेंसी लोड होने के दौरान, सही क्रम में मुख्य स्क्रिप्ट को पार्स/डाउनलोड किया जा सकता है. - इमेज पहले से लोड की गई इमेज की प्राथमिकता "कम" या "मध्यम" होती है (फ़ेच प्राथमिकता के बिना) और इसे एसिंक्रोनस स्क्रिप्ट और कम या सबसे कम प्राथमिकता वाले दूसरे टैग के हिसाब से क्रम में लगाया जाना चाहिए.
इतिहास
फे़च प्रायॉरिटी को सबसे पहले Chrome में ऑरिजिन ट्रायल के तौर पर साल 2018 में और उसके बाद 2021 में importance एट्रिब्यूट का इस्तेमाल करके एक्सपेरिमेंट किया गया था. उस समय, इसे प्राथमिकता संकेत के नाम से जाना जाता था. इसके बाद, इंटरफ़ेस को एचटीएमएल के लिए fetchpriority और JavaScript के फ़ेच एपीआई के लिए priority में बदल दिया गया है. ऐसा वेब स्टैंडर्ड प्रोसेस के तहत किया गया है. भ्रम की स्थिति को कम करने के लिए, अब हम इस एपीआई को 'फ़ेच प्राथमिकता' के तौर पर देखते हैं.
नतीजा
ऐसा हो सकता है कि डेवलपर को 'प्राथमिकता' फ़ेच करने में दिलचस्पी हो. इसमें पेज को पहले से लोड करने के तरीके को ठीक किया गया है. साथ ही, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी और एलसीपी पर हाल ही में फ़ोकस किया गया है. अब इनमें अलग-अलग नॉब उपलब्ध हैं, ताकि कॉन्टेंट लोड होने के क्रम को बेहतर बनाया जा सके.