स्क्रिप्ट की प्राथमिकता को ऑप्टिमाइज़ करना

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

इन्हें कैसे लागू करें

1. ज़रूरी स्क्रिप्ट की पहचान करें: यह तय करें कि पेज के मुख्य फ़ंक्शन या उपयोगकर्ता के शुरुआती इंटरैक्शन के लिए कौनसी स्क्रिप्ट ज़रूरी हैं.
2. ज़रूरी एसिंक्रोनस स्क्रिप्ट को प्राथमिकता दें: async या defer के साथ लोड की गई ज़रूरी स्क्रिप्ट के लिए, fetchpriority="high" एट्रिब्यूट जोड़ें. इससे यह पक्का किया जा सकेगा कि डिस्कवरी फ़ेज़ के दौरान उन्हें प्राथमिकता दी जाए.
3. गैर-ज़रूरी स्क्रिप्ट को प्राथमिकता न दें: ऐसी स्क्रिप्ट के लिए जिनकी तुरंत ज़रूरत नहीं है (जैसे, Analytics, विज्ञापन या बिलो-द-फ़ोल्ड विजेट), fetchpriority="low" जोड़ें और पक्का करें कि उनमें async, defer या module एट्रिब्यूट हो, ताकि उन्हें ब्लॉक होने से बचाया जा सके.
4. पार्सर-ब्लॉकिंग स्क्रिप्ट को क्रम से लगाएं: बॉडी के आखिर में मौजूद पार्सर-ब्लॉकिंग स्क्रिप्ट पर fetchpriority="low" का इस्तेमाल करें. इससे उन्हें ज़्यादा ज़रूरी रिसॉर्स के साथ बैंडविड्थ के लिए मुकाबला करने से रोका जा सकता है.

कोड का उदाहरण

<!-- Elevate the priority of the critical app logic -->
<script src="/js/app.js" async fetchpriority="high"></script>

<!-- Deprioritize non-essential tracking scripts -->
<script src="/js/tracker.js" async fetchpriority="low"></script>

<!-- Deprioritize late-body scripts to favor critical images or CSS -->
<script src="/js/legacy-widgets.js" fetchpriority="low"></script>

सबसे सही तरीके

• ज़रूरी: fetchpriority="high" का इस्तेमाल, ज़्यादा से ज़्यादा एक या दो ज़रूरी स्क्रिप्ट पर ही करें. इससे नेटवर्क की समस्या से बचा जा सकता है और प्राथमिकता को कम होने से रोका जा सकता है.
• fetchpriority="high" का इस्तेमाल सिर्फ़ उन async स्क्रिप्ट के लिए करें जो पेज के रिस्पॉन्स में लगने वाले समय (आईएनपी) के लिए ज़रूरी हैं.
• fetchpriority="low" का इस्तेमाल करके, उन स्क्रिप्ट को प्राथमिकता न दें जो उपयोगकर्ता के शुरुआती अनुभव के लिए ज़रूरी नहीं हैं.
• हर स्क्रिप्ट टैग पर fetchpriority का इस्तेमाल न करें. इसका इस्तेमाल सिर्फ़ तब किया जाना चाहिए, जब ब्राउज़र के डिफ़ॉल्ट ह्यूरिस्टिक को बदलना हो. ऐसा तब किया जाता है, जब डिफ़ॉल्ट ह्यूरिस्टिक सही तरीके से काम न कर रहा हो.
• importance एट्रिब्यूट का इस्तेमाल न करें, क्योंकि अब इसका इस्तेमाल नहीं किया जाता. इसकी जगह अब fetchpriority का इस्तेमाल किया जाता है.

फ़ॉलबैक रणनीति

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