रिसॉर्स लोड होने की प्रोसेस को ऑप्टिमाइज़ करने के बारे में आखिरी मॉड्यूल में, आपने जाना कि कैसे सीएसएस और JavaScript जैसे पेज के कई रिसॉर्स, पेज लोड होने की स्पीड पर असर डालते हैं और पेज को तेज़ी से रेंडर करने के लिए उन्हें ऑप्टिमाइज़ करने और उनकी डिलीवरी का तरीका क्या है. संसाधन लोड करने के बेहतर तरीके पर जाने का यह सही समय है. इसमें रिसॉर्स संकेतों का इस्तेमाल करके, ब्राउज़र को तेज़ी से लोड करने में मदद करना शामिल है.
'संसाधन से जुड़े संकेतों' से डेवलपर को पेज लोड होने में लगने वाले समय को ऑप्टिमाइज़ करने में मदद मिल सकती है.
यह ब्राउज़र को संसाधनों को लोड करने और प्राथमिकता तय करने के तरीके के बारे में बताता है. संसाधन संकेतों के शुरुआती सेट, जैसे कि preconnect और dns-prefetch को सबसे पहले पेश किया गया था.
हालांकि, समय के साथ preload और Fetch Priority API ने
अतिरिक्त क्षमताएं दी हैं.
रिसॉर्स संकेत, ब्राउज़र को समय से पहले कुछ ऐसी कार्रवाइयां करने का निर्देश देते हैं जिनसे लोडिंग परफ़ॉर्मेंस बेहतर हो सकती है. रिसॉर्स हिंट कई कार्रवाइयां कर सकते हैं. जैसे, शुरुआती डीएनएस लुकअप करना, समय से पहले सर्वर से कनेक्ट करना, और यहां तक कि ब्राउज़र से आम तौर पर उनका पता लगाए जाने से पहले ही रिसॉर्स को फ़ेच करना.
रिसॉर्स से जुड़े संकेत, एचटीएमएल में दिए जा सकते हैं. ये संकेत आम तौर पर, <head> एलिमेंट में शुरुआती तौर पर या एचटीटीपी हेडर के तौर पर सेट में शामिल किए जा सकते हैं. इस मॉड्यूल के स्कोप में,
preconnect, dns-prefetch, और preload के साथ-साथ, अनुमान पर आधारित फ़ेच करने के तरीके के बारे में भी बताया गया है, जो prefetch से मिलता है.
preconnect
preconnect संकेत का इस्तेमाल, ज़रूरी संसाधनों को किसी अन्य ऑरिजिन से कनेक्ट करने के लिए किया जाता है. उदाहरण के लिए, हो सकता है कि सीडीएन या अन्य क्रॉस-ऑरिजिन पर
अपनी इमेज या एसेट होस्ट की जा रही हों:
<link rel="preconnect" href="https://example.com">
preconnect का इस्तेमाल करने का मतलब है कि ब्राउज़र काफ़ी हद तक आने वाले समय में किसी खास क्रॉस-ऑरिजिन सर्वर से कनेक्ट करेगा. साथ ही, ब्राउज़र को जल्द से जल्द उस कनेक्शन को खोलना चाहिए. ऐसा करने के लिए, एचटीएमएल पार्सर या प्रीलोड स्कैनर का इंतज़ार करना बेहतर होगा.
अगर आपके किसी पेज पर बड़ी संख्या में क्रॉस-ऑरिजिन रिसॉर्स हैं, तो उन रिसॉर्स के लिए preconnect का इस्तेमाल करें जो मौजूदा पेज के लिए सबसे ज़्यादा ज़रूरी हैं.
preconnect,
जल्द से जल्द कनेक्शन बनाकर, इसे कम कर सकता है.
preconnect को आम तौर पर Google Fonts में इस्तेमाल किया जाता है. Google Fonts का सुझाव है कि आप
@font-face एलान वाले https://fonts.googleapis.com डोमेन और फ़ॉन्ट फ़ाइलें दिखाने वाले https://fonts.gstatic.com डोमेन पर preconnect करें.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
crossorigin एट्रिब्यूट का इस्तेमाल यह बताने के लिए किया जाता है कि किसी संसाधन को क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग (सीओआरएस) का इस्तेमाल करके फ़ेच किया जाना चाहिए या नहीं. preconnect संकेत का इस्तेमाल करते समय, अगर ऑरिजिन से डाउनलोड किया जा रहा संसाधन सीओआरएस का इस्तेमाल किया जाता है, जैसे कि फ़ॉन्ट फ़ाइलें, तो आपको preconnect संकेत में crossorigin एट्रिब्यूट जोड़ना होगा.
dns-prefetch
क्रॉस-ऑरिजिन सर्वर से जल्दी कनेक्ट होने से, पेज लोड होने में लगने वाले शुरुआती समय में काफ़ी सुधार होता है. हालांकि, एक साथ कई क्रॉस-ऑरिजिन सर्वर से कनेक्ट करना ठीक या संभव नहीं होता. अगर आपको लगता है कि
preconnect का ज़रूरत से ज़्यादा इस्तेमाल किया जा रहा है, तो संसाधन के लिए
dns-prefetch संकेत ही महंगा साबित होता है.
अपने नाम के हिसाब से, dns-prefetch क्रॉस-ऑरिजिन सर्वर से कनेक्शन नहीं बनाता, बल्कि समय से पहले सिर्फ़ डीएनएस लुकअप करता है. डीएनएस लुकअप तब किया जाता है, जब किसी डोमेन नेम को उसके आईपी पते के आधार पर तय किया जाता है.
डिवाइस और नेटवर्क के लेवल पर, डीएनएस कैश मेमोरी की कई लेयर इस प्रोसेस को सामान्य रूप से तेज़ बनाने में मदद करती हैं.
फिर भी इसमें कुछ समय लगता है.
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
डीएनएस लुकअप का इस्तेमाल करना काफ़ी सस्ता होता है. ये काफ़ी कम कीमत की वजह से, कुछ मामलों में preconnect के मुकाबले ज़्यादा बेहतर टूल हो सकते हैं. खास तौर पर, दूसरी वेबसाइटों पर नेविगेट करने वाले लिंक के मामले में, उपयोगकर्ता के लिए दिए गए लिंक का इस्तेमाल करना ज़रूरी हो सकता है. dnstra दर्जus ऐसा टूल है जो JavaScript का इस्तेमाल अपने-आप करता है. साथ ही, अन्य वेबसाइटों के लिंक को उपयोगकर्ता के पोर्ट में स्क्रोल करने पर, मौजूदा पेज के एचटीएमएल में dns-prefetch संकेत डालने के लिए इंटरसेक्शन ऑब्ज़र्वर एपीआई का इस्तेमाल करता है.
preload
preload डायरेक्टिव का इस्तेमाल, पेज को रेंडर करने के लिए ज़रूरी संसाधन के लिए शुरुआती अनुरोध शुरू करने के लिए किया जाता है:
<link rel="preload" href="/lcp-image.jpg" as="image">
preload डायरेक्टिव, देर से खोजे गए अहम संसाधनों तक सीमित होने चाहिए.
सबसे ज़्यादा इस्तेमाल किए जाने वाले मामलों में फ़ॉन्ट फ़ाइलें, @import एलानों के ज़रिए फ़ेच की गई सीएसएस फ़ाइलें या ऐसी सीएसएस background-image संसाधन शामिल हैं जो सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) के कैंडिडेट हो सकते हैं. ऐसे मामलों में, इन फ़ाइलों को प्रीलोड स्कैनर नहीं खोज पाएगा, क्योंकि संसाधन का संदर्भ बाहरी संसाधनों में दिया गया है.
preconnect की तरह ही, अगर किसी सीओआरएस रिसॉर्स, जैसे कि फ़ॉन्ट को पहले से लोड किया जा रहा है, तो preload डायरेक्टिव के लिए crossorigin एट्रिब्यूट की ज़रूरत होती है. अगर crossorigin एट्रिब्यूट नहीं जोड़ा जाता है या बिना सीओआरएस अनुरोधों के लिए इसे जोड़ा जाता है, तो ब्राउज़र उस संसाधन को दो बार डाउनलोड करता है. इससे बैंडविथ का नुकसान होता है, जो दूसरे संसाधनों पर बेहतर तरीके से खर्च किया जा सकता था.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
पिछले एचटीएमएल स्निपेट में, ब्राउज़र को सीओआरएस अनुरोध का इस्तेमाल करके /font.woff2 को पहले से लोड करने का निर्देश दिया गया है—भले ही, /font.woff2 उसी डोमेन पर हो.
prefetch
prefetch डायरेक्टिव का इस्तेमाल, ऐसे संसाधन के लिए कम प्राथमिकता वाले अनुरोध को शुरू करने के लिए किया जाता है जिसका इस्तेमाल आने वाले नेविगेशन में किया जा सकता है:
<link rel="prefetch" href="/next-page.css" as="style">
यह डायरेक्टिव, काफ़ी हद तक preload डायरेक्टिव के फ़ॉर्मैट का ही होता है. हालांकि, सिर्फ़ <link> एलिमेंट का rel एट्रिब्यूट, इसके बजाय "prefetch" की वैल्यू का इस्तेमाल करता है.
preload डायरेक्टिव के उलट, prefetch काफ़ी हद तक अनुमान लगाता है कि आने वाले समय में नेविगेशन के लिए, किसी रिसॉर्स को फ़ेच किया जा रहा है या नहीं.
कई बार prefetch फ़ायदेमंद हो सकता है—उदाहरण के लिए, अगर आपने अपनी वेबसाइट पर किसी ऐसे यूज़र फ़्लो की पहचान की है जिसे ज़्यादातर उपयोगकर्ता फ़ॉलो करते हैं, तो उन पेजों के लिए रेंडर के लिए ज़रूरी संसाधन के लिए prefetch की मदद से, उनके लोड होने में लगने वाले समय को कम करने में मदद मिल सकती है.
फे़च प्रायॉरिटी एपीआई
किसी संसाधन की प्राथमिकता बढ़ाने के लिए, Fetch Priority API को उसके fetchpriority एट्रिब्यूट का इस्तेमाल करके भी इस्तेमाल किया जा सकता है. इस एट्रिब्यूट का इस्तेमाल <link>, <img>, और <script> एलिमेंट के साथ किया जा सकता है.
<div class="gallery">
<div class="poster">
<img src="img/poster-1.jpg" fetchpriority="high">
</div>
<div class="thumbnails">
<img src="img/thumbnail-2.jpg" fetchpriority="low">
<img src="img/thumbnail-3.jpg" fetchpriority="low">
<img src="img/thumbnail-4.jpg" fetchpriority="low">
</div>
</div>
डिफ़ॉल्ट रूप से, इमेज को कम प्राथमिकता पर फ़ेच किया जाता है. लेआउट के बाद, अगर
इमेज शुरुआती व्यूपोर्ट में मिलती है, तो प्राथमिकता को बढ़ाकर ज़्यादा प्राथमिकता कर दिया जाता है. इससे पहले के एचटीएमएल स्निपेट में, fetchpriority ब्राउज़र को तुरंत बताता है कि बड़ी एलसीपी इमेज को ज़्यादा प्राथमिकता पर डाउनलोड किया जाए. वहीं दूसरी ओर, कम ज़रूरी थंबनेल इमेज को कम प्राथमिकता पर डाउनलोड किया जाता है.
मॉडर्न ब्राउज़र, रिसॉर्स को दो चरणों में लोड करते हैं. पहला चरण ज़रूरी संसाधनों के लिए रिज़र्व है. ब्लॉक करने वाली सभी स्क्रिप्ट के डाउनलोड होने और उन्हें लागू करने के बाद, यह चरण खत्म हो जाता है. इस दौरान, कम प्राथमिकता वाले संसाधनों को डाउनलोड करने में देरी हो सकती है. fetchpriority="high" का इस्तेमाल करके, किसी संसाधन की प्राथमिकता बढ़ाई जा सकती है. पहले चरण में ही, ब्राउज़र उस संसाधन को डाउनलोड कर सकता है.
संसाधन से मिले डेमो के बारे में जानकारी
देखें कि आपको कितना ज्ञान है
preconnect रिसॉर्स संकेत क्या करता है?
Fetch Priority API की मदद से क्या-क्या किया जा सकता है?
<link>, <img>, और <script> एलिमेंट के लिए मिलती-जुलती प्राथमिकता तय करें.
आपको prefetch संकेत का इस्तेमाल कब करना चाहिए?
अगला: इमेज की परफ़ॉर्मेंस
ऐसा हो सकता है कि अब से आपको पेज एचटीएमएल, <head> एलिमेंट, और रिसॉर्स से जुड़े संकेतों के बारे में अपनी जानकारी पर भरोसा होने लगा हो. हालांकि, आम तौर पर पेजों को लोड करने वाले अलग-अलग रिसॉर्स टाइप के हिसाब से, कुछ दूसरे ऑप्टिमाइज़ेशन भी होते हैं. इसके बाद,
इमेज की परफ़ॉर्मेंस के बारे में अगले मॉड्यूल में बताया गया है. इससे आपको अपनी वेबसाइट की इमेज को जितनी जल्दी हो सके, तेज़ी से लोड करने में मदद मिलेगी.
उपयोगकर्ता का डिवाइस चाहे जो भी हो.