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