रिसॉर्स लोड करने की प्रोसेस को ऑप्टिमाइज़ करने के बारे में पिछले मॉड्यूल में, आपको यह जानकारी मिली थी कि सीएसएस और JavaScript जैसे अलग-अलग पेज रिसॉर्स, पेज लोड होने की स्पीड पर कैसे असर डाल सकते हैं. साथ ही, पेज को तेज़ी से रेंडर करने के लिए, इन रिसॉर्स और उनकी डिलीवरी को ऑप्टिमाइज़ करने का तरीका भी बताया गया था. अब संसाधन लोड करने के बेहतर तरीके अपनाने का समय आ गया है. इसमें, संसाधन के संकेत का इस्तेमाल करके ब्राउज़र को तेज़ी से लोड करने में मदद करना शामिल है.
संसाधन के सुझावों से, डेवलपर को पेज लोड होने में लगने वाले समय को ऑप्टिमाइज़ करने में मदद मिल सकती है. इसके लिए, ब्राउज़र को संसाधनों को लोड करने और उनकी प्राथमिकता तय करने का तरीका बताया जाता है. preconnect और dns-prefetch जैसे संसाधन के सुझावों का शुरुआती सेट सबसे पहले लॉन्च किया गया था.
हालांकि, समय के साथ preload और फ़ेच प्रायॉरिटी एपीआई ने अन्य सुविधाएं देने के लिए काम किया है.
संसाधन के सुझाव, ब्राउज़र को समय से पहले कुछ कार्रवाइयां करने का निर्देश देते हैं. इससे, पेज लोड होने की परफ़ॉर्मेंस बेहतर हो सकती है. संसाधन के संकेत, कई कार्रवाइयां कर सकते हैं. जैसे, डीएनएस लुकअप को पहले से करना, समय से पहले सर्वर से कनेक्ट करना, और ब्राउज़र के सामान्य तरीके से संसाधनों को ढूंढने से पहले उन्हें फ़ेच करना.
रिसॉर्स के बारे में अहम जानकारी, एचटीएमएल में दी जा सकती है. आम तौर पर, <head> एलिमेंट में सबसे पहले यह जानकारी दी जाती है. इसके अलावा, एचटीटीपी हेडर के तौर पर भी यह जानकारी सेट की जा सकती है. इस मॉड्यूल के दायरे में,
preconnect, dns-prefetch, और preload शामिल हैं. साथ ही, इसमें prefetch से मिलने वाले अनुमानित फ़ेचिंग व्यवहार भी शामिल हैं.
preconnect
preconnect हिंट का इस्तेमाल, किसी ऐसे ऑरिजिन से कनेक्शन बनाने के लिए किया जाता है जहां से ज़रूरी संसाधन फ़ेच किए जा रहे हैं. उदाहरण के लिए, हो सकता है कि आपने अपनी इमेज या एसेट को सीडीएन या किसी दूसरे क्रॉस-ऑरिजिन पर होस्ट किया हो:
<link rel="preconnect" href="https://example.com">
preconnect का इस्तेमाल करके, यह अनुमान लगाया जाता है कि ब्राउज़र बहुत जल्द किसी खास क्रॉस-ऑरिजिन सर्वर से कनेक्ट करने वाला है. साथ ही, यह भी अनुमान लगाया जाता है कि ब्राउज़र को उस कनेक्शन को जल्द से जल्द खोलना चाहिए. आम तौर पर, ऐसा एचटीएमएल पार्सर या प्रीलोड स्कैनर के ऐसा करने का इंतज़ार करने से पहले किया जाना चाहिए.
अगर आपके किसी पेज पर, क्रॉस-ऑरिजिन रिसॉर्स की संख्या ज़्यादा है, तो उन रिसॉर्स के लिए preconnect का इस्तेमाल करें जो मौजूदा पेज के लिए सबसे ज़रूरी हैं.
preconnect, क्रॉस-ऑरिजिन संसाधन का पता चलने के समय के बजाय, पहले से कनेक्शन सेट अप करके इस समय को कम कर सकता है.
preconnect का इस्तेमाल आम तौर पर Google Fonts में किया जाता है. Google Fonts का सुझाव है कि आप preconnect को https://fonts.googleapis.com डोमेन पर @font-face एलान और https://fonts.gstatic.com डोमेन पर फ़ॉन्ट फ़ाइलें दिखाएं.
<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 के मुकाबले, ये ज़्यादा सही टूल हो सकते हैं. खास तौर पर, यह उन लिंक के लिए एक बेहतरीन रिसोर्स हिंट हो सकता है जो ऐसी अन्य वेबसाइटों पर ले जाते हैं जिन पर आपके हिसाब से उपयोगकर्ता जाने की संभावना है. dnstradamus एक ऐसा टूल है जो JavaScript का इस्तेमाल करके, यह काम अपने-आप करता है. साथ ही, जब उपयोगकर्ता के व्यूपोर्ट में अन्य वेबसाइटों के लिंक स्क्रोल किए जाते हैं, तो मौजूदा पेज के एचटीएमएल में dns-prefetch हिंट इंजेक्ट करने के लिए, Intersection Observer API का इस्तेमाल करता है.
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 एट्रिब्यूट की मदद से Fetch Priority API का इस्तेमाल किया जा सकता है. इस एट्रिब्यूट का इस्तेमाल <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 संसाधन के बारे में दिया गया हिंट क्या करता है?
फ़ेच प्रायॉरिटी एपीआई की मदद से क्या-क्या किया जा सकता है?
<link>,
<img>, और <script> एलिमेंट के लिए, आपस में उनकी प्राथमिकता बताएं.
prefetch हिंट का इस्तेमाल कब करना चाहिए?
अगला लेख: इमेज की परफ़ॉर्मेंस
अब तक, आपको पेज के एचटीएमएल, <head> एलिमेंट, और संसाधन के सुझावों के बारे में, परफ़ॉर्मेंस से जुड़ी सामान्य बातों की जानकारी हो गई होगी. हालांकि, ऐसे और भी ऑप्टिमाइज़ेशन हैं जो आम तौर पर पेजों पर लोड होने वाले अलग-अलग रिसॉर्स टाइप के हिसाब से होते हैं. अगले मॉड्यूल में, इमेज की परफ़ॉर्मेंस के बारे में बताया गया है. इससे आपको अपनी वेबसाइट की इमेज को तेज़ी से लोड करने में मदद मिल सकती है. भले ही, उपयोगकर्ता का डिवाइस कुछ भी हो.