Fetch Priority API की मदद से, संसाधन लोड होने की प्रोसेस को ऑप्टिमाइज़ करें

Fetch Priority API, ब्राउज़र के लिए संसाधनों की प्राथमिकता के बारे में बताता है. इसकी मदद से, पेज बेहतर तरीके से लोड हो सकते हैं. साथ ही, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी भी बेहतर हो सकती है.

Addy Osmani
Addy Osmani
X GitHub
Leena Sohoni
Leena Sohoni
X
Patrick Meenan
Patrick Meenan
X
Barry Pollard

ब्राउज़र सहायता

  • Chrome: 102. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 102. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 17.2. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

जब कोई ब्राउज़र किसी वेब पेज को पार्स करता है और इमेज, स्क्रिप्ट या सीएसएस जैसे संसाधनों को खोजना और डाउनलोड करना शुरू करता है, तो उनके लिए फ़ेच priority असाइन किया जाता है, ताकि यह उन्हें सही क्रम में डाउनलोड कर सके. आम तौर पर, किसी संसाधन की प्राथमिकता इस बात पर निर्भर करती है कि वह क्या है और दस्तावेज़ में वह कहां है. उदाहरण के लिए, इन-व्यूपोर्ट इमेज की प्राथमिकता High हो सकती है और जल्दी लोड होने वाले, रेंडर रोकने वाले सीएसएस की प्राथमिकता <head> में <link>s का इस्तेमाल करके Very High हो सकती है. ब्राउज़र ऐसी प्राथमिकताएं असाइन करने में काफ़ी अच्छे होते हैं जो अच्छी तरह से काम करती हैं. हालांकि, हो सकता है कि वे सभी मामलों में बेहतर न हों.

इस पेज पर, फे़च प्राथमिकता एपीआई और fetchpriority एचटीएमएल एट्रिब्यूट के बारे में बताया गया है. इसकी मदद से, किसी संसाधन (high या low) की प्राथमिकता के बारे में बताया जा सकता है. फ़ेच प्राथमिकता की मदद से, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को ऑप्टिमाइज़ किया जा सकता है.

खास जानकारी

कुछ अहम चीज़ों के बारे में जानें, जहां 'प्राथमिकता' को प्राथमिकता दी जा सकती है:

  • इमेज एलिमेंट पर fetchpriority="high" तय करके, एलसीपी इमेज की प्राथमिकता को बढ़ाया जा रहा है. इससे एलसीपी जल्द ही हो जाएगी.
  • मौजूदा सबसे आम हैक के मुकाबले बेहतर सिमेंटिक्स का इस्तेमाल करके, async स्क्रिप्ट की प्राथमिकता को बढ़ाया जा रहा है. साथ ही, async स्क्रिप्ट के लिए <link rel="preload"> को शामिल किया जा रहा है.
  • लेट-बॉडी स्क्रिप्ट की प्राथमिकता कम करके, इमेज के साथ क्रम को बेहतर बनाया जा सकता है.
फ़िल्मस्ट्रिप व्यू, जिसमें &#39;Google फ़्लाइट&#39; के होम पेज के दो टेस्ट की तुलना की गई है. सबसे नीचे, फे़च प्रायॉरिटी का इस्तेमाल हीरो इमेज की प्राथमिकता को बढ़ाने के लिए किया जाता है. इस वजह से एलसीपी में 0.7 सेकंड की कमी हो जाती है.
'Google फ़्लाइट' की जांच में, 2.6 से 1.9 सेकंड के बीच सबसे बड़े कॉन्टेंटफ़ुल पेंट को बेहतर बनाने की प्राथमिकता फ़ेच करें.

अब तक, प्रीलोड और प्रीकनेक्ट का इस्तेमाल करके, डेवलपर का संसाधन प्राथमिकता पर सीमित असर हुआ था. पेजों को पहले से लोड करने की सुविधा से, ब्राउज़र को उन अहम रिसॉर्स के बारे में बताया जा सकता है जिन्हें आपको जल्दी लोड करना है. ऐसा करने से, ब्राउज़र अपने-आप इन संसाधनों को खोजेगा. यह खास तौर पर उन संसाधनों के लिए फ़ायदेमंद है जिन्हें खोजना मुश्किल होता है. जैसे, स्टाइलशीट में शामिल फ़ॉन्ट, बैकग्राउंड इमेज या किसी स्क्रिप्ट से लोड किए गए संसाधन. Preconnect, क्रॉस-ऑरिजिन सर्वर के कनेक्शन को वॉर्म अप करने में मदद करता है. साथ ही, पहली बाइट का समय जैसी मेट्रिक को बेहतर बनाने में मदद कर सकता है. यह तब काम आता है, जब आपको ऑरिजिन के बारे में पता हो, लेकिन यह ज़रूरी नहीं है कि वह संसाधन का वही यूआरएल हो जिसकी ज़रूरत है.

फे़च प्राथमिकता इन संसाधन हिंट के साथ काम करती है. यह मार्कअप पर आधारित एक सिग्नल होता है, जिसे fetchpriority एट्रिब्यूट की मदद से उपलब्ध कराया जाता है. इसका इस्तेमाल करके डेवलपर यह बता सकते हैं कि किसी खास संसाधन के लिए, ज़रूरी प्राथमिकता कैसे तय की गई है. डेटा के लिए बनाए गए रिसॉर्स फ़ेच करने की प्राथमिकता को तय करने के लिए, JavaScript और priority प्रॉपर्टी के साथ Get API के ज़रिए भी इन संकेतों का इस्तेमाल किया जा सकता है. 'प्राथमिकता' को पहले से लोड करने की प्रोसेस के साथ भी जोड़ा जा सकता है. सबसे बड़े कॉन्टेंटफ़ुल पेंट वाली इमेज लें, जिसे पहले से लोड किए जाने पर भी कम प्राथमिकता दी जाएगी. अगर इसे कम प्राथमिकता वाले अन्य शुरुआती संसाधनों से वापस भेजा जाता है, तो 'फ़ेच प्राथमिकता' का इस्तेमाल करने से इमेज लोड होने में मदद मिल सकती है.

संसाधन की प्राथमिकता

संसाधन डाउनलोड करने का क्रम, इस बात पर निर्भर करता है कि ब्राउज़र को कौनसी प्राथमिकता असाइन की गई है हर संसाधन मौजूद है. प्रायॉरिटी कंप्यूटेशन पर असर डालने वाली बातें लॉजिक में ये शामिल हैं:

  • संसाधन किस तरह का है, जैसे कि सीएसएस, फ़ॉन्ट, स्क्रिप्ट, इमेज, और तीसरे पक्ष के संसाधन.
  • वह जगह या ऑर्डर जिसमें दस्तावेज़ में संसाधनों का रेफ़रंस दिया गया है.
  • स्क्रिप्ट में async या defer एट्रिब्यूट का इस्तेमाल किया जाता है या नहीं.

इस टेबल में बताया गया है कि Chrome, ज़्यादातर संसाधनों को प्राथमिकता कैसे देता है और उन्हें क्रम से कैसे क्रम में लगाता है:

  लेआउट ब्लॉक करने के फ़ेज़ में लोड करें लेआउट ब्लॉक करने के चरण में, एक बार में एक पेज लोड करें
ब्लिंक
प्राथमिकता		 VeryHigh ज़्यादा ठीक-ठाक कम VeryLow
DevTools
Priority		 सबसे ज़्यादा रेटिंग ज़्यादा ठीक-ठाक कम सबसे कम रेटिंग
मुख्य संसाधन
सीएसएस (तय समय से पहले**) सीएसएस (देर से**) सीएसएस (मीडिया मेल नहीं खाता***)
स्क्रिप्ट (शुरुआती** या प्रीलोड स्कैनर से नहीं) स्क्रिप्ट (देर से**) स्क्रिप्ट (एक साथ काम नहीं करने वाली प्रोसेस)
फ़ॉन्ट फ़ॉन्ट (rel=preload)
इंपोर्ट करें
इमेज (व्यूपोर्ट में) इमेज (पहली पांच इमेज > 10,000 पिक्सल2) इमेज
मीडिया (वीडियो/ऑडियो)
प्रीफ़ेच करें
XSL
XHR (सिंक करने की सुविधा) XHR/फ़ेच* (एक साथ काम नहीं करने वाली प्रोसेस)

ब्राउज़र, संसाधनों को उसी क्रम में डाउनलोड करता है जिस क्रम में वे खोजे जाते हैं. इसके लिए, उन्हें उसी क्रम में प्राथमिकता दी जाती है जिस क्रम में वे खोजे जाते हैं. Chrome Dev Tools नेटवर्क टैब में किसी पेज को लोड करते समय, अलग-अलग संसाधनों को असाइन की गई प्राथमिकता देखी जा सकती है. (टेबल के हेडिंग पर राइट क्लिक करके और उस पर सही का निशान लगाकर, प्राथमिकता कॉलम शामिल करना न भूलें).

Chrome के DevTools के नेटवर्क टैब में, कई फ़ॉन्ट रिसॉर्स की सूची मौजूद है. ये सभी सबसे बड़ी प्राथमिकता हैं.
बीबीसी की खबरों की ज़्यादा जानकारी वाले पेज पर, संसाधन type = "font" को प्राथमिकता देना
Chrome के DevTools के नेटवर्क टैब में, कई फ़ॉन्ट रिसॉर्स की सूची मौजूद है. ये कम और ज़्यादा प्राथमिकता, दोनों का मिला-जुला रूप हैं.
बीबीसी के खबरों की ज़्यादा जानकारी वाले पेज पर सुझाए गए संसाधन type = "script" को प्राथमिकता दें.

प्राथमिकताएं बदलने पर, बड़े अनुरोध वाली लाइनों की सेटिंग या टूलटिप में, शुरुआती और आखिरी, दोनों प्राथमिकता देखी जा सकती है.

Chrome के DevTools का नेटवर्क टैब. &#39;ज़्यादा अनुरोध वाली पंक्तियां&#39; सेटिंग पर सही का निशान लगा होता है और प्राथमिकता कॉलम में, पहली इमेज की प्राथमिकता को &#39;ज़्यादा&#39; के तौर पर दिखाया जाता है. साथ ही, नीचे दिए गए मीडियम की शुरुआती प्राथमिकता दिखती है. यह जानकारी टूलटिप में भी दिखती है.
DevTools में अहम बदलाव.

आपको फ़ेच प्राथमिकता की ज़रूरत कब पड़ सकती है?

अब आपको ब्राउज़र की प्राथमिकता के बारे में पता चल गया है. इसलिए, अब अपने पेज की परफ़ॉर्मेंस और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को बेहतर बनाने के लिए, पेज के डाउनलोड क्रम में बदलाव किया जा सकता है. यहां कुछ ऐसी चीज़ों के उदाहरण दिए गए हैं जिनमें बदलाव करके, संसाधन डाउनलोड करने की प्राथमिकता को बदला जा सकता है:

  • <script> और <link> जैसे संसाधन टैग को उस क्रम में रखें जिसमें आप ब्राउज़र को डाउनलोड करना चाहते हैं. एक जैसी प्राथमिकता वाले संसाधन आम तौर पर उसी क्रम में लोड होते हैं जिस क्रम में वे खोजे जाते हैं.
  • ज़रूरी संसाधनों को पहले डाउनलोड करने के लिए, preload संसाधन संकेत का इस्तेमाल करें. खास तौर पर, उन संसाधनों के लिए जिन्हें ब्राउज़र शुरुआत में आसानी से नहीं खोज पाते.
  • अन्य संसाधनों को ब्लॉक किए बिना, स्क्रिप्ट डाउनलोड करने के लिए async या defer का इस्तेमाल करें.
  • फ़ोल्ड के नीचे लेज़ी-लोड कॉन्टेंट, ताकि ब्राउज़र, पेज के ऊपरी हिस्से पर मौजूद ज़्यादा अहम संसाधनों के लिए उपलब्ध बैंडविथ का इस्तेमाल कर सके.

ये तकनीकें, ब्राउज़र की प्रायॉरिटी कंप्यूटेशन को कंट्रोल करने में मदद करती हैं. इससे परफ़ॉर्मेंस और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी में सुधार होता है. उदाहरण के लिए, जब बैकग्राउंड की किसी अहम इमेज को पहले से लोड किया जाता है, तो उसे काफ़ी पहले ही खोज लिया जा सकता है. इससे सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (LCP) को बेहतर बनाया जा सकता है.

कभी-कभी हो सकता है कि ये हैंडल, आपके ऐप्लिकेशन के लिए संसाधनों को सही तरीके से प्राथमिकता देने के लिए काफ़ी न हों. यहां कुछ ऐसे मामले दिए गए हैं जिनमें 'प्राथमिकता करें' से मदद मिल सकती है:

  • आपके पास फ़ोल्ड के ऊपर कई इमेज हैं, लेकिन सभी की प्राथमिकता एक जैसी नहीं होनी चाहिए. उदाहरण के लिए, किसी इमेज कैरसेल में, पहली बार दिखने वाली इमेज के लिए ज़्यादा प्राथमिकता की ज़रूरत होती है. वहीं, दूसरी इमेज को आम तौर पर ऑफ़स्क्रीन की प्राथमिकता के लिए सेट किया जा सकता है.
  • आम तौर पर, व्यूपोर्ट में मौजूद इमेज Low प्राथमिकता से शुरू होती हैं. लेआउट पूरा हो जाने के बाद, Chrome को पता चलता है कि वे व्यूपोर्ट में मौजूद हैं और उनकी प्राथमिकता को बढ़ा देता है. इस वजह से, अहम इमेज लोड होने में ज़्यादा समय लगता है, जैसे कि हीरो इमेज. मार्कअप में फे़च प्राथमिकता देने से इमेज, High प्राथमिकता से शुरू हो जाती है और बहुत जल्द लोड हो जाती है. इसे कुछ हद तक ऑटोमेट करने के लिए, Chrome ने पहली पांच बड़ी इमेज को Medium प्राथमिकता पर सेट किया है. इससे हमें मदद मिलेगी. हालांकि, अश्लील fetchpriority="high" इमेज और भी बेहतर होगी.

    सीएसएस बैकग्राउंड के तौर पर शामिल एलसीपी इमेज को जल्दी खोजने के लिए, पेजों को पहले से लोड करना ज़रूरी है. बैकग्राउंड इमेज को बूस्ट करने के लिए' प्राथमिकता तय करते हैं, तो प्रीलोड में fetchpriority='high' को शामिल करें.
  • स्क्रिप्ट को async या defer के तौर पर तय करने पर, ब्राउज़र को उन्हें एसिंक्रोनस रूप से लोड करने के लिए कहा जाता है. हालांकि, जैसा कि प्राथमिकता वाली टेबल में दिखाया गया है, इन स्क्रिप्ट को "कम" वैल्यू भी असाइन की गई है प्राथमिकता तय करें. एसिंक्रोनस डाउनलोड को पक्का करते समय, हो सकता है कि आप इनकी प्राथमिकता बढ़ाना चाहें. खास तौर पर, उन स्क्रिप्ट के लिए जो उपयोगकर्ता अनुभव के लिए ज़रूरी हैं.
  • अगर एसिंक्रोनस रूप से संसाधनों या डेटा को फ़ेच करने के लिए, JavaScript fetch() API का इस्तेमाल किया जाता है, तो ब्राउज़र इसे High प्राथमिकता असाइन करता है. ऐसा हो सकता है कि आप फ़ेच करने की कुछ सुविधाएं कम प्राथमिकता के साथ चलाएं. खास तौर पर तब, जब बैकग्राउंड के एपीआई कॉल को एपीआई कॉल के साथ मिलाया जा रहा हो, जो उपयोगकर्ता के इनपुट का जवाब देते हैं. बैकग्राउंड के एपीआई कॉल को Low प्राथमिकता और इंटरैक्टिव एपीआई कॉल को High प्राथमिकता के तौर पर मार्क करें.
  • ब्राउज़र, सीएसएस और फ़ॉन्ट को High प्राथमिकता असाइन करता है. हालांकि, उनमें से कुछ रिसॉर्स दूसरों की तुलना में ज़्यादा अहम हो सकते हैं. गैर-ज़रूरी रिसॉर्स की प्राथमिकता कम करने के लिए, 'फ़ेच प्राथमिकता' का इस्तेमाल किया जा सकता है (ध्यान दें कि शुरुआती सीएसएस, रेंडर को ब्लॉक करता है. इसलिए, आम तौर पर इसे High प्राथमिकता दी जानी चाहिए).

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
DevTools
Priority		 सबसे ज़्यादा रेटिंग ज़्यादा ठीक-ठाक कम सबसे कम
मुख्य संसाधन ◉
सीएसएस (तय समय से पहले**) ⬆◉ ⬇
सीएसएस (लेट**) ⬆ ◉ ⬇
सीएसएस (मीडिया मेल नहीं खाता***) ⬆*** ◉⬇
स्क्रिप्ट (शुरुआती** या प्रीलोड स्कैनर से नहीं) ⬆◉ ⬇
स्क्रिप्ट (देर से**) ⬆ ◉ ⬇
स्क्रिप्ट (एसिंक्रोनस/डिफ़र) ⬆ ◉⬇
फ़ॉन्ट ◉
फ़ॉन्ट (rel=preload) ⬆◉ ⬇
इंपोर्ट करें ◉
इमेज (व्यूपोर्ट में - लेआउट के बाद) ⬆◉ ⬇
इमेज (पहली पांच इमेज > 10,000 पिक्सल2) ⬆ ◉ ⬇
इमेज ⬆ ◉⬇
मीडिया (वीडियो/ऑडियो) ◉
XHR (सिंक करें) - अब काम नहीं करता ◉
XHR/फ़ेच* (एक साथ काम नहीं करने वाली प्रोसेस) ⬆◉ ⬇
प्रीफ़ेच करें ◉
XSL ◉

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.9 हो गया.

फ़ेच प्रायॉरिटी का इस्तेमाल करके Google Flights के पेज को दोबारा लिखने के लिए, Cloudflare के वर्कर का इस्तेमाल करके एक प्रयोग किया गया.

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 सेकंड कम हो गया.

Oodle ऐप्लिकेशन के इमेज कैरसेल पर इस्तेमाल किए जाने पर, फ़ेच करने की प्राथमिकता की तुलना. बाईं ओर, ब्राउज़र कैरसेल इमेज के लिए डिफ़ॉल्ट प्राथमिकताएं सेट करता है. हालांकि, दाईं ओर दिए गए उदाहरण की तुलना में, उन इमेज को करीब दो सेकंड धीरे डाउनलोड और पेंट करता है. इससे, सिर्फ़ पहली कैरसेल इमेज को प्राथमिकता दी जाती है.
सिर्फ़ पहली कैरसेल इमेज के लिए ज़्यादा प्राथमिकता का इस्तेमाल करने से, पेज तेज़ी से लोड होता है.

पहले से लोड किए गए संसाधनों की प्राथमिकता कम करें

पहले से लोड किए गए संसाधनों को अन्य अहम संसाधनों के साथ मुकाबला करने से रोकने के लिए, उनकी प्राथमिकता कम की जा सकती है. इमेज, स्क्रिप्ट, और सीएसएस के साथ इस तकनीक का इस्तेमाल करें.

<!-- 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>

अगर कोई स्क्रिप्ट खास डीओएम स्थितियों पर निर्भर करती है, तो उसे async के तौर पर मार्क नहीं किया जा सकता. हालांकि, अगर वे बाद में पेज पर चलते हैं, तो उन्हें कम प्राथमिकता के साथ लोड किया जा सकता है:

<script src="blocking_but_unimportant.js" fetchpriority="low"></script>

ऐसा करने से, इस स्क्रिप्ट तक पहुंचने पर पार्सर अब भी ब्लॉक हो जाएगा. हालांकि, कॉन्टेंट को प्राथमिकता देने से पहले, उसे ब्लॉक कर दिया जाएगा.

अगर पूरे किए गए डीओएम की ज़रूरत है, तो दूसरा विकल्प यह है कि आप 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" का इस्तेमाल करके पहले से लोड करें.

  • प्राथमिकता के आधार पर, कॉन्टेंट लोड होने में लगने वाले समय में सुधार करना उन जगहों पर ज़्यादा काम का होता है जहां उपलब्ध नेटवर्क बैंडविथ के लिए ज़्यादा संसाधन प्रतिस्पर्धा करते हैं. ऐसा उन एचटीटीपी/1.x कनेक्शन के लिए आम बात है जहां पैरलल डाउनलोड नहीं हो सकते या कम बैंडविथ वाले एचटीटीपी/2 या एचटीटीपी/3 कनेक्शन पर. ऐसे मामलों में, प्राथमिकता तय करने से अड़चनों को दूर करने में मदद मिल सकती है.

  • सीडीएन समान रूप से एचटीटीपी/2 प्राथमिकता लागू नहीं करते हैं. इसी तरह एचटीटीपी/3 के लिए भी ऐसा ही होता है. ब्राउज़र, 'फ़ेच प्रायॉरिटी' की प्राथमिकता के बारे में भी बताता हो, लेकिन हो सकता है कि सीडीएन, बताए गए क्रम में रिसॉर्स को फिर से प्राथमिकता न दे. इससे 'फ़ेच प्राथमिकता' को जांचना मुश्किल हो जाता है. प्राथमिकताएं, ब्राउज़र में अंदरूनी तौर पर और प्राथमिकता के साथ काम करने वाले प्रोटोकॉल (एचटीटीपी/2 और एचटीटीपी/3) पर लागू की जाती हैं. सीडीएन या ऑरिजिन सपोर्ट से अलग, सिर्फ़ अंदरूनी ब्राउज़र की प्राथमिकता के लिए फ़ेच प्राथमिकता का इस्तेमाल करना अब भी फ़ायदेमंद है. ऐसा इसलिए, क्योंकि जब ब्राउज़र संसाधनों का अनुरोध करता है, तब अक्सर प्राथमिकताएं बदल जाती हैं. उदाहरण के लिए, जब ब्राउज़र ज़रूरी <head> आइटम को प्रोसेस करता है, तब अक्सर इमेज जैसे कम प्राथमिकता वाले रिसॉर्स को अनुरोध नहीं किया जाता.

  • ऐसा हो सकता है कि आप अपने शुरुआती डिज़ाइन में, 'फ़ेच प्राथमिकता' को सबसे सही तरीके के तौर पर शामिल न कर पाएं. बाद में, अपने डेवलपमेंट साइकल में, पेज पर अलग-अलग संसाधनों को असाइन की जा रही प्राथमिकताएं लागू की जा सकती हैं. अगर वे आपकी उम्मीदों के मुताबिक नहीं हैं, तो बेहतर बनाने के लिए 'फ़ेच प्राथमिकता' शामिल की जा सकती है.

डेवलपर को इसके मकसद के लिए, पहले से लोड करने की सुविधा का इस्तेमाल करना चाहिए, ताकि पार्सर के पास जिन रिसॉर्स का पता नहीं चला है उन्हें पहले से लोड कर लें. जैसे, फ़ॉन्ट, इंपोर्ट, बैकग्राउंड की एलसीपी इमेज. preload संकेत के प्लेसमेंट का असर, संसाधन को पहले से लोड किए जाने के समय पर पड़ेगा.

फ़ेच करने की प्राथमिकता का मतलब है कि संसाधन को फ़ेच करने के बाद, उसे किस तरह फ़ेच किया जाना चाहिए.

पहले से लोड किए गए डेटा को इस्तेमाल करने से जुड़ी सलाह

पहले से लोड किए गए डेटा का इस्तेमाल करते समय इन बातों का ध्यान रखें:

  • एचटीटीपी हेडर में पहले से लोड की गई वैल्यू शामिल करने पर, वह बाकी सभी पेजों के पहले लोड हो जाती है.
  • आम तौर पर, पहले से लोड उस क्रम में लोड होते हैं जिस क्रम में पार्सर उन्हें Medium या इससे ज़्यादा प्राथमिकता वाली क्वेरी के लिए मिलता है. अगर आप अपने एचटीएमएल की शुरुआत में प्रीलोड शामिल कर रहे हैं, तो सावधान रहें.
  • फ़ॉन्ट को पहले से लोड करने की सुविधा, शायद सिर के आखिर या शरीर की शुरुआत में सबसे अच्छी तरह काम करती है.
  • इंपोर्ट के प्रीलोड (डाइनैमिक import() या modulepreload) को उस स्क्रिप्ट टैग के बाद चलाया जाना चाहिए जिसे इंपोर्ट करने की ज़रूरत है. इसलिए, पक्का करें कि स्क्रिप्ट पहले लोड या पार्स हो जाए, ताकि इसकी डिपेंडेंसी लोड होने के दौरान इसका आकलन किया जा सके.
  • इमेज को पहले से लोड करने के लिए, डिफ़ॉल्ट रूप से Low या Medium प्राथमिकता तय की जाती है. उन्हें एसिंक स्क्रिप्ट और अन्य कम या सबसे कम प्राथमिकता वाले टैग के हिसाब से क्रम में लगाएं.

इतिहास

फ़ेच प्राथमिकता की सुविधा को सबसे पहले 2018 में, ऑरिजिन ट्रायल के तौर पर Chrome में आज़माया गया था. इसके बाद, 2021 में इसे importance एट्रिब्यूट का इस्तेमाल करके भी आज़माया गया था. उस समय, इसे प्रायॉरिटी हिंट कहा जाता था. उसके बाद से, वेब मानकों से जुड़ी प्रोसेस के हिस्से के तौर पर, इंटरफ़ेस को एचटीएमएल के लिए fetchpriority और JavaScript के फे़च एपीआई के लिए priority में बदल दिया गया. भ्रम की स्थिति को कम करने के लिए, अब हम इस एपीआई को फ़ेच करने की प्राथमिकता कहते हैं.

नतीजा

इस बात की संभावना ज़्यादा है कि डेवलपर, 'फ़ेच की प्राथमिकता' में शामिल हों. इसके लिए, वे पहले से लोड किए जाने वाले डेटा को ठीक कर सकते हैं. साथ ही, वे वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी और एलसीपी पर हाल ही में फ़ोकस कर सकते हैं. अब उनके पास ज़्यादा नॉब उपलब्ध हैं. इनकी मदद से, वे लोड होने का अपना पसंदीदा क्रम बना सकते हैं.