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

इससे भी अच्छी बात यह है कि इसे बहुत ही सरलता से लागू किया गया है। पाँच टैग ब्राउज़र को प्रारंभिक कार्रवाई करने का आदेश दें:

<link rel="prefetch" href="/hi/style.css" as="style" />
<link rel="preload" href="/hi/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" />

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

ерейти к: प्रीलोड · प्रीफ़ेच · पूर्व कनेक्ट · डीएनएस-प्रीफ़ेच · prerender

प्रीलोड

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

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

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

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

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

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

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

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

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

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

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

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

  По умолчанию comic-sans.woff2 डाउनलोड और पार्सिंग के बाद ही लोड होना शुरू होगा index.css. इतनी लंबी प्रतीक्षा से बचने के लिए, आप पहले फ़ॉन्ट का उपयोग करके डाउनलोड कर सकते हैं <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>

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

  <style>
  /* Inlined critical styles */
  </style>
  
  <link rel="preload" href="/hi/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">. अन्य मामलों में यह प्रीलोडिंग को अनदेखा कर सकता है, उदाहरण के लिए यदि यह धीमे कनेक्शन पर चल रहा हो।

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

प्रीफ़ेच

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

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

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

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

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

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

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

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

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

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

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

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

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

विवरण

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

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

पूर्व कनेक्ट

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

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

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

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

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

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

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

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

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

किसी तृतीय पक्ष स्क्रिप्ट या शैली को थोड़ा तेज़ करने के लिए इस टैग का उपयोग करें पूर्व-स्थापित कनेक्शन के कारण.

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

विवरण

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

कनेक्शन प्रक्रिया में क्या शामिल है?. प्रत्येक साइट से कनेक्ट करने के लिए, ब्राउज़र को निम्नलिखित कार्य करना होगा:

• डीएनएस संकल्प. सर्वर आईपी पता ढूंढें (216.58.215.78) निर्दिष्ट डोमेन नाम के लिए (google.com).
• टीसीपी हैंडशेक. सर्वर के साथ टीसीपी कनेक्शन शुरू करने के लिए पैकेट (क्लाइंट → सर्वर → क्लाइंट) का आदान-प्रदान करें।
• टीएलएस हैंडशेक (केवल HTTPS साइटें). एक सुरक्षित टीएलएस सत्र शुरू करने के लिए पैकेट एक्सचेंज के दो राउंड (क्लाइंट → सर्वर → क्लाइंट → सर्वर → क्लाइंट)।

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

डीएनएस-प्रीफ़ेच

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

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

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

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

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

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

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

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

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

किसी तृतीय पक्ष स्क्रिप्ट या शैली को थोड़ा तेज़ करने के लिए इस टैग का उपयोग करें पूर्व-स्थापित कनेक्शन के कारण.

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

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

विवरण

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

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

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

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

prerender

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

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

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

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

href उस यूआरएल को इंगित करता है जिसे आप पृष्ठभूमि में प्रस्तुत करना शुरू करना चाहते हैं।

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

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

अति प्रयोग न करें. बैंडविड्थ और मेमोरी के मामले में प्री-रेंडरिंग बेहद महंगी है। उपयोग नहीं करो <link rel= "prerender"> एक से अधिक पेज के लिए.

विवरण

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

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

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

सारांश

उपयोग:

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

स्रोत: www.habr.com