वेब प्रदर्शन को बेहतर बनाने के कई तरीके हैं। उनमें से एक सामग्री को पहले से लोड करना है जिसकी बाद में आवश्यकता होगी। CSS प्रीफ़ेटिंग, फुल पेज प्रीव्यू रेंडरिंग, या डोमेन नेम रिज़ॉल्यूशन। हम सब कुछ पहले से करते हैं, और फिर तुरंत परिणाम प्रदर्शित करते हैं! यह अच्छा लग रहा है।

यहां तक ​​कि कूलर भी लागू करने के लिए बहुत आसान है। पांच <लिंक rel> टैग ब्राउज़र को प्रारंभिक क्रियाओं के लिए एक कमांड देते हैं:

<link rel="prefetch" href="/style.css" as="style" /> <link rel="preload" href="/style.css" as="style" /> <link rel="preconnect" href="https://example.com" /> <link rel="dns-prefetch" href="https://example.com" /> <link rel="prerender" href="https://example.com/about.html" /> 

संक्षेप में वर्णन करें कि वे क्या करते हैं और उनका उपयोग कब करना है।

यहां जाईयें: प्रीलोड · प्रीफैच · प्रीकनेक्ट · डीएनएस- प्रीफैच · प्रेंडर

प्रीलोड

<link rel= "preload"> जितनी जल्दी हो सके संसाधन को लोड करने और कैश करने के लिए ब्राउज़र को बताता है (उदाहरण के लिए, एक स्क्रिप्ट या स्टाइल शीट)। यह उपयोगी है जब आपको पेज लोड होने के कुछ सेकंड बाद संसाधन की आवश्यकता होती है - और आप इस प्रक्रिया को गति देना चाहते हैं।

लोड करने के बाद ब्राउज़र संसाधन के साथ कुछ भी नहीं करता है। लिपियों को निष्पादित नहीं किया जाता है, स्टाइल शीट लागू नहीं की जाती हैं। संसाधन बस कैश्ड है और अनुरोध पर तुरंत उपलब्ध है।

वाक्य-विन्यास

 <link rel="preload" href="/style.css" as="style" /> 

आप जिस संसाधन को डाउनलोड करना चाहते हैं, उसके लिए href अंक।

as आप एक ब्राउज़र में डाउनलोड कर सकते हैं कुछ भी हो सकता है:

• style पत्रक के लिए शैली,
  
• script लिए स्क्रिप्ट,
  
• font लिए फ़ॉन्ट,
  
• fetch() या XMLHttpRequest का उपयोग करके लोड किए गए संसाधनों के लिए XMLHttpRequest ,
  
• एमडीएन पर पूरी सूची देखें।

विशेषता के as निर्दिष्ट करना महत्वपूर्ण है - यह ब्राउज़र को सही ढंग से प्राथमिकता देने और डाउनलोड की योजना बनाने में मदद करता है।

कब उपयोग करना है

निकट भविष्य में संसाधन की आवश्यकता होने पर प्रीलोड का उपयोग करें। उदाहरण के लिए:

• बाहरी फ़ाइल से कस्टम फ़ॉन्ट:
  
  

   <!-- index.html --> <link rel="stylesheet" href="index.css" /> /* index.css */ @font-face { src: url('comic-sans.woff2') format('woff2'); } 

  
  डिफ़ॉल्ट रूप से, comic-sans.woff2 केवल comic-sans.woff2 लोड और पार्स करने के बाद लोड करना शुरू करेगा। इतने लंबे समय तक इंतजार न करने के लिए, आप पहले <link rel= "preload"> का उपयोग करके फ़ॉन्ट डाउनलोड कर सकते हैं।
  
  

   <link rel="preload" href="comic-sans.woff2" as="font" /> 

• यदि आप क्रिटिकल सीएसएस दृष्टिकोण के अनुसार अपनी शैली को दो भागों में विभाजित करते हैं, तो महत्वपूर्ण (तत्काल प्रतिपादन के लिए) और गैर-महत्वपूर्ण:
  
  

   <style> /* Inlined critical styles */ </style> <script> /* Custom JS that starts downloading non-critical styles */ loadCSS('/app/non-critical.css'); </script> 

  
  इस दृष्टिकोण के साथ, गैर-महत्वपूर्ण शैलियों को केवल जावास्क्रिप्ट शुरू करने पर लोड करना शुरू हो जाएगा, जो प्रतिपादन के कुछ सेकंड बाद हो सकता है। जेएस की प्रतीक्षा करने के बजाय, पहले डाउनलोड शुरू करने के लिए <link rel= "preload"> का उपयोग करें:
  
  

   <style> /* Inlined critical styles */ </style> <link rel="preload" href="/app/non-critical.css" as="style" /> <script> /* Custom JS that starts downloading non-critical styles */ loadCSS('/app/non-critical.css'); </script> 

प्रीलोड का दुरुपयोग न करें । यदि आप एक पंक्ति में सब कुछ डाउनलोड करते हैं, तो साइट जादुई रूप से गति नहीं करेगी, बल्कि इसके विपरीत, यह ब्राउज़र को ठीक से नियोजन कार्य से रोक देगा।

प्रीफ़ेटिंग के साथ भ्रमित न करें । जब तक पेज लोड करने के तुरंत बाद आपको संसाधन की आवश्यकता न हो, तब तक <link rel= "preload"> उपयोग न करें। यदि आपको बाद में इसकी आवश्यकता है, उदाहरण के लिए, अगले पृष्ठ के लिए, तो <link rel= "prefetch"> ।

विवरण

यह ब्राउज़र द्वारा निष्पादन के लिए एक आवश्यक टैग है (यदि यह इसका समर्थन करता है), प्रीलोडिंग से जुड़े अन्य सभी <लिंक> टैग के विपरीत। ब्राउज़र को <link rel="preload"> में निर्दिष्ट संसाधन डाउनलोड करना होगा। अन्य मामलों में, यह प्री-लोडिंग को नजरअंदाज कर सकता है, उदाहरण के लिए, यदि धीमी कनेक्शन पर चल रहा है।

प्राथमिकताएं। विभिन्न संसाधनों (शैलियों, स्क्रिप्ट, फोंट, आदि) के लिए, ब्राउज़र आमतौर पर सबसे महत्वपूर्ण संसाधनों को पहले लोड करने के लिए अलग-अलग प्राथमिकताएं प्रदान करते हैं। इस स्थिति में, ब्राउज़र विशेषता के रूप में प्राथमिकता देता है। क्रोम ब्राउज़र के लिए, आप प्राथमिकताओं की पूरी तालिका देख सकते हैं।

प्रीफ़ेच

<link rel= "prefetch"> ब्राउज़र को पृष्ठभूमि में संसाधन (उदाहरण के लिए, एक स्क्रिप्ट या शैली पत्रक) को डाउनलोड करने और कैश करने के लिए कहता है। डाउनलोड करना कम प्राथमिकता के साथ होता है, इसलिए यह अधिक महत्वपूर्ण संसाधनों में हस्तक्षेप नहीं करता है। यह उपयोगी है यदि आपको अगले पृष्ठ पर संसाधन की आवश्यकता है, और आप इसे पहले से कैश करना चाहते हैं।

यहां, लोड करने के बाद भी ब्राउज़र संसाधन के साथ कुछ नहीं करता है। लिपियों को निष्पादित नहीं किया जाता है, स्टाइल शीट लागू नहीं की जाती हैं। संसाधन बस कैश्ड है और अनुरोध पर तुरंत उपलब्ध है।

वाक्य-विन्यास

 <link rel="prefetch" href="/style.css" as="style" /> 

आप जिस संसाधन को डाउनलोड करना चाहते हैं, उसके लिए href अंक।

as आप एक ब्राउज़र में डाउनलोड कर सकते हैं कुछ भी हो सकता है:

• style पत्रक के लिए शैली,
  
• script लिए स्क्रिप्ट,
  
• font लिए फ़ॉन्ट,
  
• fetch() या XMLHttpRequest का उपयोग करके लोड किए गए संसाधनों के लिए XMLHttpRequest ,
  
• एमडीएन पर पूरी सूची देखें।

विशेषता के as निर्दिष्ट करना महत्वपूर्ण है - यह ब्राउज़र को सही ढंग से प्राथमिकता देने और डाउनलोड की योजना बनाने में मदद करता है।

कब उपयोग करना है

अन्य पृष्ठों से संसाधन डाउनलोड करने के लिए , यदि आपको किसी अन्य पृष्ठ से संसाधन की आवश्यकता है, और आप बाद में इस पृष्ठ के प्रतिपादन को गति देने के लिए इसे पूर्व लोड करना चाहते हैं। उदाहरण के लिए:

• आपके पास एक ऑनलाइन स्टोर है, और 40% उपयोगकर्ता मुख्य पृष्ठ से उत्पाद पृष्ठ पर जाते हैं। उत्पाद पृष्ठों को रेंडर करने के लिए CSS और JS फ़ाइलों को लोड करते समय <link rel= "prefetch"> उपयोग करें।
  
• आपके पास एक-पृष्ठ का अनुप्रयोग है, और विभिन्न पृष्ठ विभिन्न पैकेजों को लोड करते हैं। जब कोई उपयोगकर्ता किसी पृष्ठ पर जाता है, तो आप उन सभी पृष्ठों के लिए पैकेज प्रीलोड कर सकते हैं, जिन्हें वह संदर्भित करता है।

संभवतः, यह टैग किसी भी वॉल्यूम में सुरक्षित रूप से उपयोग किया जा सकता है । आमतौर पर ब्राउज़र सबसे कम प्राथमिकता के साथ प्रीफैच की योजना बनाते हैं, इसलिए यह किसी को परेशान नहीं करता है। बस ध्यान रखें कि यह उपयोगकर्ता ट्रैफ़िक का उपभोग करता है, जिसमें पैसा खर्च हो सकता है।

तत्काल अनुरोधों के लिए नहीं । जब कुछ ही सेकंड में संसाधन की आवश्यकता हो तो <link rel= "prefetch"> उपयोग न करें। इस स्थिति में, <link rel= "preload"> ।

विवरण

वैकल्पिक टैग । ब्राउज़र को इस निर्देश का पालन करने की आवश्यकता नहीं है, यह इसे अनदेखा कर सकता है, उदाहरण के लिए, धीमे कनेक्शन पर।

क्रोम में प्राथमिकता । क्रोम में, <link rel= "prefetch"> आमतौर पर एक न्यूनतम प्राथमिकता ( पूर्ण प्राथमिकता तालिका देखें ) के साथ निष्पादित किया जाता है, अर्थात, बाकी सब कुछ डाउनलोड करने के बाद।

प्रीकनेक्ट

<link rel= "preconnect"> ब्राउज़र को डोमेन से पूर्व-कनेक्ट करने के लिए कहता है जब आप भविष्य में कनेक्शन को गति देना चाहते हैं।

यदि यह किसी नए तृतीय-पक्ष डोमेन से कुछ संसाधन पुनर्प्राप्त करता है, तो ब्राउज़र को एक कनेक्शन स्थापित करना होगा। उदाहरण के लिए, यदि आप Google फोंट डाउनलोड करते हैं, तो CDN से फोंट रिक्ट करें, या एपीआई सर्वर से JSON प्रतिक्रिया का अनुरोध करें।

एक नया कनेक्शन स्थापित करने में आमतौर पर कई सौ मिलीसेकंड लगते हैं। यह एक बार किया जाता है, लेकिन इसमें अभी भी समय लगता है। यदि आपने पहले से एक कनेक्शन स्थापित किया है, तो समय बचाएं और इस डोमेन से संसाधनों को तेजी से डाउनलोड करें।

वाक्य-विन्यास

 <link rel= "preconnect" href="https://api.my-app.com" /> 

href उस डोमेन नाम को इंगित करता है जिसके लिए आप IP पता निर्धारित करना चाहते हैं। आप एक उपसर्ग ( https://domain.com ) या इसके बिना ( //domain.com ) के साथ निर्दिष्ट कर सकते हैं।

कब उपयोग करना है

उन डोमेन के लिए उपयोग करें जिन्हें आपको जल्द ही एक महत्वपूर्ण शैली, स्क्रिप्ट या छवि डाउनलोड करनी होगी , लेकिन आप संसाधन URL अभी तक नहीं जानते हैं। उदाहरण के लिए:

• आपके आवेदन को my-app.com पर होस्ट किया my-app.com और यह AJAX को api.my-app.com लिए अनुरोध करता है: आपको अग्रिम में विशिष्ट अनुरोध नहीं पता हैं, क्योंकि वे JS से गतिशील रूप से बनाए गए हैं। यहां एक डोमेन के लिए प्रारंभिक कनेक्शन के लिए टैग का उपयोग करना काफी उपयुक्त है।
  
• आपका एप्लिकेशन my-app.com पर होस्ट किया my-app.com और Google फ़ॉन्ट्स का उपयोग करता है। उन्हें दो चरणों में डाउनलोड किया जाता है: सबसे पहले, CSS फ़ाइल डोमेन fonts.googleapis.com से डाउनलोड की जाती है fonts.googleapis.com , फिर यह फ़ाइल fonts.gstatic.com से फ़ॉन्ट का अनुरोध fonts.gstatic.com । आपको पता नहीं चल सकता है कि fonts.gstatic.com कौन सी विशिष्ट फॉन्ट फाइलें आपको सीएसएस फाइल लोड करने तक की आवश्यकता होगी, इसलिए हम केवल पहले से प्रारंभिक कनेक्शन स्थापित कर सकते हैं।

कनेक्शन को पूर्व-निर्धारित करके कुछ तृतीय-पक्ष स्क्रिप्ट या शैली को थोड़ा गति देने के लिए इस टैग का उपयोग करें ।

गाली मत दो । कनेक्शन स्थापित करना और बनाए रखना क्लाइंट और सर्वर दोनों के लिए एक महंगा ऑपरेशन है। अधिकतम 4-6 डोमेन के लिए इस टैग का उपयोग करें।

विवरण

वैकल्पिक टैग । ब्राउज़र को इस निर्देश का पालन करने की आवश्यकता नहीं है और इसे अनदेखा कर सकते हैं, उदाहरण के लिए, यदि कई कनेक्शन पहले से ही स्थापित हैं या किसी अन्य मामले में हैं।

जिसमें कनेक्शन प्रक्रिया शामिल है । प्रत्येक साइट से कनेक्ट करने के लिए, ब्राउज़र को निम्न चरणों का पालन करना चाहिए:

• DNS का समाधान । निर्दिष्ट डोमेन नाम ( google.com ) के लिए सर्वर ( 216.58.215.78 ) का आईपी पता खोजें।
• हैंडशेक टीसीपी । पैकेट विनिमय (क्लाइंट → सर्वर → क्लाइंट) सर्वर से एक टीसीपी कनेक्शन शुरू करने के लिए।
• टीएलएस हैंडशेक (केवल HTTPS साइट्स) । एक सुरक्षित TLS सत्र आरंभ करने के लिए पैकेट एक्सचेंज के दो दौर (क्लाइंट → सर्वर → क्लाइंट → सर्वर → क्लाइंट)।

नोट: HTTP / 3 हैंडशेक तंत्र में सुधार और गति देगा, लेकिन यह अभी भी एक लंबा रास्ता तय कर रहा है।

DNS-प्रीफ़ेच

<link rel= "dns-prefetch"> ब्राउज़र को डोमेन के लिए DNS को पूर्व-समाधान करने के लिए अग्रिम में पूछता है यदि आप जल्द ही इससे जुड़ जाएंगे और प्रारंभिक कनेक्शन को गति देना चाहते हैं।

यदि यह नए तृतीय-पक्ष डोमेन से कुछ संसाधन पुनर्प्राप्त करेगा, तो ब्राउज़र को डोमेन का आईपी पता निर्धारित करना चाहिए। उदाहरण के लिए, Google फ़ॉन्ट्स डाउनलोड करें, CDN से प्रतिक्रियाएं फोंट, या एपीआई सर्वर से JSON प्रतिक्रिया का अनुरोध करें।

प्रत्येक नए डोमेन के लिए, DNS रिज़ॉल्यूशन आमतौर पर लगभग 20-120 एमएस होता है। यह केवल दिए गए डोमेन से पहले संसाधन को लोड करने को प्रभावित करता है, लेकिन फिर भी देरी का प्रतिनिधित्व करता है। यदि आप DNS रिज़ॉल्यूशन को पहले से लागू करते हैं, तो हम समय की बचत करेंगे और संसाधन को तेज़ी से लोड करेंगे।

वाक्य-विन्यास

 <link rel= "dns-prefetch" href="https://api.my-app.com" /> 

href उस डोमेन नाम को इंगित करता है जिसके लिए एक IP पता सेट करना है। आप एक उपसर्ग ( https://domain.com ) या इसके बिना ( //domain.com ) के साथ निर्दिष्ट कर सकते हैं।

कब उपयोग करना है

उन डोमेन के लिए उपयोग करें जिन्हें जल्द ही वहां से संसाधन डाउनलोड करने की आवश्यकता होगी जो ब्राउज़र को पहले से पता नहीं है। उदाहरण के लिए:

• आपके आवेदन को my-app.com पर होस्ट किया my-app.com और यह AJAX को api.my-app.com लिए अनुरोध करता है: आपको अग्रिम में विशिष्ट अनुरोध नहीं पता हैं, क्योंकि वे JS से गतिशील रूप से बनाए गए हैं। यहां एक डोमेन के लिए प्रारंभिक कनेक्शन के लिए टैग का उपयोग करना काफी उपयुक्त है।
  
• आपके एप्लिकेशन को my-app.com पर होस्ट किया my-app.com , और Google फ़ॉन्ट्स का उपयोग करता है। उन्हें दो चरणों में डाउनलोड किया जाता है: सबसे पहले, CSS फ़ाइल डोमेन fonts.googleapis.com से डाउनलोड की जाती है fonts.googleapis.com , फिर यह फ़ाइल fonts.gstatic.com से फ़ॉन्ट का अनुरोध fonts.gstatic.com । आप नहीं जान सकते हैं कि fonts.gstatic.com कौन सी विशिष्ट फॉन्ट फाइलें आपको सीएसएस फाइल डाउनलोड करने तक की आवश्यकता होगी, इसलिए हम केवल पहले से प्रारंभिक कनेक्शन स्थापित कर सकते हैं।

कनेक्शन को पूर्व-निर्धारित करके कुछ तृतीय-पक्ष स्क्रिप्ट या शैली को थोड़ा गति देने के लिए इस टैग का उपयोग करें ।

<link rel= "preconnect"> <link rel= "dns-prefetch"/> और <link rel= "preconnect"> पर समान विशिष्टताओं पर ध्यान दें। एक ही डोमेन के लिए उन्हें एक साथ उपयोग करने से आमतौर पर कोई मतलब नहीं होता है: <link rel= "preconnect"> पहले से ही <link rel= "dns-prefetch"/> और बहुत कुछ शामिल है। यह दो मामलों में उचित हो सकता है:

• आप पुराने ब्राउज़रों का समर्थन करना चाहते हैं । IE10 और Safari 5 के बाद से <link rel= "dns-prefetch" /> का समर्थन किया गया है । क्रोम और फ़ायरफ़ॉक्स में कुछ समय के लिए <link rel= "preconnect"> का समर्थन किया गया था, लेकिन केवल 11.1 में सफारी में जोड़ा गया था और अभी भी IE / एज में समर्थित नहीं है । यदि आपको इन ब्राउज़रों का समर्थन करने की आवश्यकता है, तो <link rel= "preconnect"> रूप में <link rel= "dns-prefetch" /> <link rel= "preconnect"> ।
• आप 4-6 से अधिक डोमेन के लिए अपने कनेक्शन को गति देना चाहते हैं । <link rel= "preconnect"> 4-6 से अधिक डोमेन के साथ उपयोग के लिए अनुशंसित नहीं है, क्योंकि कनेक्शन स्थापित करना और बनाए रखना एक महंगा ऑपरेशन है। <link rel= "dns-prefetch" /> कम संसाधनों का उपभोग करता है, इसलिए यदि आवश्यक हो तो इसका उपयोग करें।

विवरण

वैकल्पिक टैग । ब्राउज़र को इस निर्देश का पालन करने की आवश्यकता नहीं है, इसलिए, यह DNS समाधान का प्रदर्शन नहीं कर सकता है, उदाहरण के लिए, यदि पृष्ठ पर या किसी अन्य मामले में ऐसे कई टैग हैं।

डीएनएस क्या है ? इंटरनेट पर प्रत्येक सर्वर का एक अनूठा आईपी पता होता है जो 216.58.215.78 जैसा 216.58.215.78 । साइट का नाम (उदाहरण के लिए, google.com ) आमतौर पर ब्राउज़र के एड्रेस बार में दर्ज किया जाता है, और DNS (डोमेन नाम सिस्टम) सर्वर इसे सर्वर के आईपी पते ( 216.58.215.78 ) पर मैप करता है।

आईपी ​​पते को निर्धारित करने के लिए, ब्राउज़र को DNS सर्वर को क्वेरी करना होगा। नए तृतीय-पक्ष डोमेन से कनेक्ट होने पर 20-120 ms लगते हैं।

डीएनएस कैश किया जाता है, हालांकि बहुत विश्वसनीय नहीं है । कुछ ऑपरेटिंग सिस्टम और ब्राउज़र DNS प्रश्नों को कैश करते हैं: इससे बार-बार पूछे जाने वाले प्रश्नों पर समय की बचत होगी, लेकिन आप कैशिंग पर भरोसा नहीं कर सकते। लिनक्स पर, यह आमतौर पर बिल्कुल काम नहीं करता है। Chrome में DNS कैश है, लेकिन यह केवल एक मिनट तक चलता है। विंडोज पांच दिनों के लिए डीएनएस प्रतिक्रियाओं को कैश करता है।

prerender

<link rel= "prerender"> ब्राउज़र को URL डाउनलोड करने और इसे एक अदृश्य टैब पर प्रदर्शित करने के लिए कहता है। जब उपयोगकर्ता लिंक पर क्लिक करता है, तो पृष्ठ को तुरंत प्रदर्शित किया जाना चाहिए। यह उपयोगी है यदि आप सुनिश्चित हैं कि उपयोगकर्ता एक विशिष्ट पृष्ठ पर जाएगा और अपने प्रदर्शन को गति देना चाहता है।

इस टैग की असाधारण प्रभावशीलता (या इसके कारण) के बावजूद, 2019 में <link rel= "prerender"> प्रमुख ब्राउज़रों द्वारा खराब रूप से समर्थित है। अधिक जानकारी के लिए नीचे देखें।

वाक्य-विन्यास

 <link rel="prerender" href="https://my-app.com/pricing" /> 

href उस URL की ओर इशारा करता है जिसके लिए आप बैकग्राउंड में रेंडरिंग चलाना चाहते हैं।

कब उपयोग करना है

जब आप वास्तव में निश्चित होते हैं कि उपयोगकर्ता एक विशिष्ट पृष्ठ पर जाएगा । यदि आपके पास एक "सुरंग" है जिसके माध्यम से पृष्ठ A पर जाने वाले 70% आगंतुक पृष्ठ B पर जाते हैं, तो पृष्ठ A पर <link rel= "prerender"> पृष्ठ B को बहुत जल्दी प्रदर्शित करने में मदद करेगा।

गाली मत दो । ट्रैफ़िक और मेमोरी के मामले में प्री-रेंडरिंग बेहद महंगी है। एक से अधिक पृष्ठ के <link rel= "prerender"> उपयोग न करें।

विवरण

वैकल्पिक टैग । ब्राउज़र को इस निर्देश का पालन करने की आवश्यकता नहीं है और इसे अनदेखा कर सकते हैं, उदाहरण के लिए, धीमे कनेक्शन पर या जब पर्याप्त मुक्त मेमोरी नहीं है।

मेमोरी को बचाने के लिए, Chrome पूर्ण रेंडरिंग नहीं करता है , लेकिन केवल NoState को लोड करता है । इसका मतलब यह है कि क्रोम पेज और उसके सभी संसाधनों को लोड करता है, लेकिन यह रेंडर नहीं करता है और जावास्क्रिप्ट को निष्पादित नहीं करता है।

फ़ायरफ़ॉक्स और सफारी इस टैग का समर्थन नहीं करते हैं। यह विनिर्देश का उल्लंघन नहीं करता है, क्योंकि ब्राउज़र को इस निर्देश का पालन करने की आवश्यकता नहीं है; लेकिन वैसे भी दुखी। फ़ायरफ़ॉक्स में कार्यान्वयन बग सात साल के लिए खुला है। ऐसी खबरें हैं कि सफारी भी इस टैग का समर्थन नहीं करता है ।

सारांश

का उपयोग करें:

• <link rel= "preload"> - जब आपको कुछ सेकंड में संसाधन की आवश्यकता होती है
  
• <link rel= "prefetch"> - जब आपको अगले पृष्ठ पर संसाधन की आवश्यकता हो
  
• <link rel= "preconnect"> - जब आप जानते हैं कि आपको जल्द ही एक संसाधन की आवश्यकता होगी, लेकिन आप अभी तक इसके <link rel= "preconnect"> URL को नहीं जानते हैं
  
• <link rel= "dns-prefetch"> - इसी तरह, जब आप जानते हैं कि आपको जल्द ही एक संसाधन की आवश्यकता होगी, लेकिन आप अभी भी इसके पूर्ण URL (पुराने ब्राउज़रों के लिए) नहीं जानते हैं
  
• <link rel= "prerender"> - जब आप सुनिश्चित हों कि उपयोगकर्ता किसी विशिष्ट पृष्ठ पर जाएंगे और इसके प्रदर्शन को गति देना चाहते हैं