Lighthouse रिपोर्ट के 'मौके' सेक्शन में, उन सभी मुख्य अनुरोधों की सूची दी जाती है जो अब तक <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
Preconnect या dns-prefetch रिसॉर्स हिंट को, ऐसे मॉड्यूल को इंस्टॉल और कॉन्फ़िगर करके जोड़ा जा सकता है जो उपयोगकर्ता एजेंट के रिसॉर्स हिंट के लिए सुविधाएं उपलब्ध कराता हो.
Magento
अपनी थीम के लेआउट में बदलाव करें और प्रीकनेक्ट या डीएनएस प्रीफ़ेच संसाधन संकेत जोड़ें.