लाइटहाउस रिपोर्ट के ऑपर्च्यूनिटी सेक्शन में सभी मुख्य अनुरोधों की सूची होती है
जो अभी तक <link rel=preconnect> के साथ फ़ेच अनुरोधों को प्राथमिकता नहीं दे रहे हैं:
ब्राउज़र के साथ काम करना
<link rel=preconnect> ज़्यादातर ब्राउज़र पर काम करता है. यहां जाएं:
ब्राउज़र के साथ काम करना.
पहले से कनेक्ट करने की सुविधा की मदद से, पेज लोड होने की स्पीड को बेहतर बनाएं
preconnect या dns-prefetch संसाधन संकेत जोड़ें
अहम तीसरे पक्ष के साथ जल्दी कनेक्शन बनाने के लिए.
<link rel="preconnect">, ब्राउज़र को बताता है कि आपका पेज
अन्य ऑरिजिन से कनेक्शन बनाने के लिए,
और यह कि आप यह प्रक्रिया जल्द से जल्द शुरू करना चाहते हैं.
कनेक्शन स्थापित करने में अक्सर धीमे नेटवर्क में महत्वपूर्ण समय लगता है, खास तौर पर, सुरक्षित कनेक्शन की बात करें, क्योंकि इसमें डीएनएस लुकअप, और उपयोगकर्ता के अनुरोध को हैंडल करने वाले फ़ाइनल सर्वर पर कई राउंड ट्रिप के लिए बने निर्देशों का पालन करता है.
समय से पहले इन सभी का ध्यान रखने से आपका ऐप्लिकेशन बहुत तेज़ लग सकता है बैंडविथ के इस्तेमाल पर बुरा असर डाले बिना. कनेक्शन बनाने में ज़्यादातर समय डेटा शेयर करने के बजाय इंतज़ार करना पड़ता है.
ब्राउज़र को अपने मकसद के बारे में जानकारी देना, अपने पेज पर लिंक टैग जोड़ने जितना आसान है:
<link rel="preconnect" href="https://example.com">
इससे ब्राउज़र को पता चलता है कि पेज
example.com से कनेक्ट करने और वहां से कॉन्टेंट वापस पाने के लिए.
ध्यान रखें कि भले ही <link rel="preconnect"> बहुत सस्ता है,
यह अब भी सीपीयू का समय ले सकता है. खास तौर पर, सुरक्षित कनेक्शन पर.
यह विशेष रूप से तब खराब होता है, जब कनेक्शन 10 सेकंड के भीतर उपयोग न किया गया हो,
क्योंकि ब्राउज़र इसे बंद कर देता है, जिससे कनेक्शन के सभी शुरुआती काम बर्बाद हो जाते हैं.
सामान्य तौर पर,
<link rel="preload"> का इस्तेमाल करके देखें,
क्योंकि यह ज़्यादा बेहतर परफ़ॉर्मेंस वाला ट्वीट है,
लेकिन <link rel="preconnect"> को अपने टूल बेल्ट में किनारे के इन केस के लिए रखें:
- इस्तेमाल का उदाहरण: यह जानना कि कहां से है, लेकिन यह नहीं कि आपको क्या फ़ेच करना है
- इस्तेमाल का उदाहरण: स्ट्रीमिंग मीडिया
<link rel="dns-prefetch">, कनेक्शन से जुड़ा एक और <link> टाइप है.
यह सिर्फ़ डीएनएस लुकअप को हैंडल करता है.
लेकिन इसे ब्राउज़र के लिए ज़्यादा सपोर्ट मिला है. इसलिए, यह एक अच्छा फ़ॉलबैक के तौर पर काम कर सकता है.
आप इसे ठीक इसी तरह से इस्तेमाल करेंगे:
<link rel="dns-prefetch" href="https://example.com" />.
स्टैक के लिए सलाह
Drupal
ऐसे मॉड्यूल का इस्तेमाल करें जो उपयोगकर्ता एजेंट संसाधन संकेत के साथ काम करता हो ताकि आप प्रीकनेक्ट या डीएनएस प्रीफ़ेच संसाधन संकेतों को इंस्टॉल और कॉन्फ़िगर कर सकें.
Magento
अपनी थीम के लेआउट में बदलाव करना और प्री-कनेक्ट या डीएनएस प्रीफ़ेच संसाधन संकेत जोड़ें.