संसाधन लोड होने की प्रोसेस को ऑप्टिमाइज़ करने के बारे में आखिरी मॉड्यूल में, आपने जाना कि किस तरह कई सीएसएस और 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 का सुझाव
जिसे आपने सेवा देने वाले https://fonts.googleapis.com डोमेन के लिए preconnect किया है
@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 संकेत, अगर ऑरिजिन से डाउनलोड किए जा रहे संसाधन का इस्तेमाल किया जाता है
सीओआरएस—जैसे कि फ़ॉन्ट फ़ाइलें—तो आपको crossorigin एट्रिब्यूट को
preconnect संकेत.
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 के मुकाबले ज़्यादा बेहतर टूल हो सकते हैं. तय सीमा में
खास तौर पर, यह एक मनचाहा संसाधन संकेत हो सकता है, जिसका इस्तेमाल ऐसे लिंक के मामलों में किया जाए
उन वेबसाइटों पर जाते हैं जिन्हें आपको लगता है कि उपयोगकर्ता फ़ॉलो कर सकते हैं.
dnstraiamus एक ऐसा टूल है जो JavaScript का इस्तेमाल करके, अपने-आप काम करता है.
औरdns-prefetch
जब अन्य वेबसाइटों के लिंक उपयोगकर्ता के
व्यूपोर्ट.
preload
preload डायरेक्टिव का इस्तेमाल, किसी संसाधन के रिलीज़ होने से पहले अनुरोध करने के लिए किया जाता है
पेज रेंडर करने के लिए ज़रूरी है:
<link rel="preload" href="/lcp-image.jpg" as="image">
preload डायरेक्टिव, देर से खोजे गए ज़रूरी संसाधनों तक सीमित होने चाहिए.
फ़ॉन्ट फ़ाइलें, @import से फ़ेच की गई सीएसएस फ़ाइलें सबसे ज़्यादा इस्तेमाल की जाती हैं
एलान या सीएसएस background-image रिसॉर्स, जो सबसे बड़े
कॉन्टेंटफ़ुल पेंट (एलसीपी) के लिए सुझाव. ऐसे मामलों में, ये फ़ाइलें नहीं
को प्रीलोड स्कैनर से खोजा जाता है, क्योंकि संसाधन का रेफ़रंस एक्सटर्नल में दिया गया है
संसाधन.
preconnect की तरह ही, preload डायरेक्टिव के लिए, crossorigin की ज़रूरत है
एट्रिब्यूट की वैल्यू सबमिट करें. अगर आप Google को
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> की परफ़ॉर्मेंस को ध्यान में रखना ज़रूरी है
और संसाधन संकेत मिलते हैं. हालांकि, ऐसे अतिरिक्त ऑप्टिमाइज़ेशन हैं जो
अलग-अलग तरह के रिसॉर्स के लिए बने होते हैं, जिन्हें पेज आम तौर पर लोड करते हैं. अगला अवॉर्ड,
इमेज की परफ़ॉर्मेंस की जानकारी अगले मॉड्यूल में दी गई है. इससे आपको यह जानने में मदद मिल सकती है कि
आपकी वेबसाइट पर जितनी जल्दी हो सके उतनी तेज़ी से लोड हो रही होगी, भले ही
उपयोगकर्ता के डिवाइस पर.