आहेत वेब कार्यप्रदर्शन सुधारण्याचे अनेक मार्ग. त्यापैकी एक सामग्री प्रीलोड करणे आहे जी नंतर आवश्यक असेल. CSS प्री-प्रोसेसिंग, पूर्ण पृष्ठ प्री-रेंडरिंग किंवा डोमेन नेम रिझोल्यूशन. आम्ही सर्व काही आगाऊ करतो आणि नंतर त्वरित परिणाम प्रदर्शित करतो! मस्त वाटतंय.

आणखी छान गोष्ट म्हणजे ती अगदी सोप्या पद्धतीने अंमलात आणली जाते. पाच टॅग ब्राउझरला प्राथमिक क्रिया करण्यासाठी कमांड द्या:

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

ते काय करतात आणि कधी वापरायचे ते थोडक्यात सांगूया.

येथे जा: प्रीलोड · प्रीफेच · पूर्व-कनेक्ट · dns-प्रीफेच · prerender

प्रीलोड

<link rel= "preload"> ब्राउझरला शक्य तितक्या लवकर संसाधन (जसे की स्क्रिप्ट किंवा स्टाइलशीट) लोड आणि कॅशे करण्यास सांगते. जेव्हा पृष्ठ लोड झाल्यानंतर काही सेकंदांनी संसाधनाची आवश्यकता असते तेव्हा हे उपयुक्त ठरते - आणि तुम्हाला प्रक्रियेचा वेग वाढवायचा आहे.

लोड केल्यानंतर ब्राउझर संसाधनासह काहीही करत नाही. स्क्रिप्ट कार्यान्वित केल्या जात नाहीत, शैली पत्रके लागू केली जात नाहीत. संसाधन फक्त कॅश केले जाते आणि विनंती केल्यावर त्वरित उपलब्ध केले जाते.

वाक्यरचना

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

href तुम्ही डाउनलोड करू इच्छित स्त्रोताकडे निर्देश करा.

as ब्राउझरमध्ये डाउनलोड केले जाऊ शकते असे काहीही असू शकते:

• style स्टाइल शीटसाठी,
• script स्क्रिप्टसाठी,
• font फॉन्टसाठी,
• fetch वापरून लोड केलेल्या संसाधनांसाठी fetch() किंवा XMLHttpRequest,
• संपूर्ण यादी पहा MDN वर.

विशेषता निर्दिष्ट करणे महत्वाचे आहे 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" />

• आपण दृष्टिकोनानुसार आपल्या शैली विभक्त केल्यास गंभीर CSS गंभीर (तत्काळ रेंडरिंगसाठी) आणि नॉन-क्रिटिकल, दोन भागांमध्ये:

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

  या पध्दतीने, नॉन-क्रिटिकल स्टाइल्स फक्त JavaScript रन झाल्यावरच लोड होण्यास सुरुवात होतील, जी रेंडरिंगनंतर काही सेकंदात होऊ शकते. प्रतीक्षा करण्याऐवजी जेएस वापरा <link rel= "preload">आधी डाउनलोड करणे सुरू करण्यासाठी:

  <style>
  /* Inlined critical styles */
  </style>
  
  <link rel="preload" href="/mr/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. Chrome ब्राउझरसाठी तुम्ही पाहू शकता पूर्ण प्राधान्य सारणी.

प्रीफेच

<link rel= "prefetch"> ब्राउझरला बॅकग्राउंडमध्ये संसाधन (जसे की स्क्रिप्ट किंवा स्टाइल शीट) डाउनलोड आणि कॅशे करण्यास सांगते. लोडिंग कमी प्राधान्याने होते त्यामुळे ते अधिक महत्त्वाच्या संसाधनांमध्ये व्यत्यय आणत नाही. पुढील पृष्ठावर संसाधन आवश्यक असल्यास आणि आपण ते आगाऊ कॅशे करू इच्छित असल्यास हे उपयुक्त आहे.

येथे देखील, ब्राउझर लोड केल्यानंतर संसाधनासह काहीही करत नाही. स्क्रिप्ट कार्यान्वित केल्या जात नाहीत, शैली पत्रके लागू केली जात नाहीत. संसाधन फक्त कॅश केले जाते आणि विनंती केल्यावर त्वरित उपलब्ध केले जाते.

वाक्यरचना

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

href तुम्ही डाउनलोड करू इच्छित स्त्रोताकडे निर्देश करा.

as ब्राउझरमध्ये डाउनलोड केले जाऊ शकते असे काहीही असू शकते:

• style स्टाइल शीटसाठी,
• script स्क्रिप्टसाठी,
• font फॉन्टसाठी,
• fetch वापरून लोड केलेल्या संसाधनांसाठी fetch() किंवा XMLHttpRequest,
• संपूर्ण यादी पहा MDN वर.

विशेषता निर्दिष्ट करणे महत्वाचे आहे as - हे ब्राउझरला योग्यरित्या प्राधान्य आणि डाउनलोड शेड्यूल करण्यात मदत करते.

कधी वापरायचं

इतर पृष्ठांवरून संसाधने लोड करण्यासाठी, तुम्हाला दुसर्‍या पृष्‍ठावरील संसाधनाची आवश्‍यकता असल्‍यास, आणि तुम्‍हाला ते प्रीलोड करायचे असल्‍यास, त्‍या पृष्‍ठाच्या रेंडरिंगची गती वाढवा. उदाहरणार्थ:

• आपल्याकडे ऑनलाइन स्टोअर आहे आणि 40% वापरकर्ते उत्पादन पृष्ठासाठी मुख्यपृष्ठ सोडतात. वापरा <link rel= "prefetch">, उत्पादन पृष्ठे रेंडर करण्यासाठी CSS आणि JS फाइल लोड करत आहे.
• तुमच्याकडे एकच पृष्ठ अनुप्रयोग आहे आणि भिन्न पृष्ठे भिन्न पॅकेज लोड करतात. जेव्हा वापरकर्ता पृष्ठास भेट देतो, तेव्हा त्याने लिंक केलेल्या सर्व पृष्ठांचे पॅकेज प्रीलोड केले जाऊ शकतात.

हा टॅग कोणत्याही मर्यादेपर्यंत सुरक्षितपणे वापरला जाऊ शकतो.. ब्राउझर सहसा सर्वात कमी प्राधान्याने प्रीफेच शेड्यूल करतात, त्यामुळे ते कोणालाही त्रास देत नाही. फक्त लक्षात ठेवा की ते वापरकर्ता रहदारी वापरते, ज्यासाठी पैसे खर्च होऊ शकतात.

तातडीच्या विनंतीसाठी नाही. वापरू नका <link rel= "prefetch">, जेव्हा काही सेकंदात संसाधनाची आवश्यकता असते. या प्रकरणात, वापरा <link rel= "preload">.

तपशील

पर्यायी टॅग. ब्राउझरला या सूचनांचे पालन करणे आवश्यक नाही; ते त्याकडे दुर्लक्ष करू शकते, उदाहरणार्थ, धीमे कनेक्शनवर.

Chrome मध्ये प्राधान्य. Chrome मध्ये <link rel= "prefetch"> सहसा किमान प्राधान्याने अंमलात आणले जाते (पहा पूर्ण प्राधान्य सारणी), म्हणजे, सर्व काही लोड केल्यानंतर.

पूर्व-कनेक्ट

<link rel= "preconnect"> तुम्हाला भविष्यात कनेक्शन सेटअपची गती वाढवायची असेल तेव्हा ब्राउझरला आधीपासून डोमेनशी कनेक्ट होण्यास सांगते.

ब्राउझरने नवीन तृतीय-पक्ष डोमेनमधून कोणतीही संसाधने पुनर्प्राप्त केल्यास कनेक्शन स्थापित करणे आवश्यक आहे. उदाहरणार्थ, ते Google फॉन्ट लोड करत असल्यास, CDN वरून प्रतिक्रिया फॉन्ट किंवा API सर्व्हरकडून JSON प्रतिसादाची विनंती करत असल्यास.

नवीन कनेक्शन स्थापित करण्यासाठी सहसा काही शंभर मिलिसेकंद लागतात. हे एकदा केले जाते, परंतु तरीही वेळ लागतो. तुम्ही अगोदर कनेक्शन स्थापित केले असल्यास, तुमचा वेळ वाचेल आणि या डोमेनवरून जलद संसाधने डाउनलोड कराल.

वाक्यरचना

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

href डोमेन नाव सूचित करते ज्यासाठी तुम्ही IP पत्ता निर्धारित करू इच्छिता. उपसर्ग सह निर्दिष्ट केले जाऊ शकते (https://domain.com) किंवा त्याशिवाय (//domain.com).

कधी वापरायचं

लवकरच आवश्यक असलेल्या डोमेनसाठी वापरा तिथून एक महत्त्वाची शैली, स्क्रिप्ट किंवा प्रतिमा डाउनलोड करण्यासाठी, परंतु तुम्हाला अद्याप संसाधन URL माहित नाही. उदाहरणार्थ:

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

काही तृतीय पक्ष स्क्रिप्ट किंवा शैली थोडीशी गती देण्यासाठी हा टॅग वापरा पूर्व-स्थापित कनेक्शनमुळे.

अति वापर करू नका. क्लायंट आणि सर्व्हर या दोघांसाठी कनेक्शन स्थापित करणे आणि राखणे हे एक महाग ऑपरेशन आहे. हा टॅग जास्तीत जास्त ४-६ डोमेनसाठी वापरा.

तपशील

पर्यायी टॅग. ब्राउझरला या सूचनांचे पालन करण्याची आवश्यकता नाही आणि त्याकडे दुर्लक्ष करू शकते, उदाहरणार्थ, जर अनेक कनेक्शन आधीच स्थापित केले गेले असतील किंवा इतर काही बाबतीत.

कनेक्शन प्रक्रियेमध्ये काय समाविष्ट आहे?. प्रत्येक साइटशी कनेक्ट करण्यासाठी, ब्राउझरने पुढील गोष्टी करणे आवश्यक आहे:

• DNS रिझोल्यूशन. सर्व्हर IP पत्ता शोधा (216.58.215.78) निर्दिष्ट डोमेन नावासाठी (google.com).
• TCP हँडशेक. सर्व्हरसह TCP कनेक्शन सुरू करण्यासाठी पॅकेट्स (क्लायंट → सर्व्हर → क्लायंट) एक्सचेंज करा.
• TLS हँडशेक (केवळ HTTPS साइट). सुरक्षित TLS सत्र सुरू करण्यासाठी पॅकेट एक्सचेंजच्या दोन फेऱ्या (क्लायंट → सर्व्हर → क्लायंट → सर्व्हर → क्लायंट)

टीप: HTTP/3 हँडशेक यंत्रणा सुधारेल आणि वेगवान करेल, परंतु ते अद्याप खूप दूर आहे.

dns-प्रीफेच

<link rel= "dns-prefetch"> जर तुम्ही लवकरच त्याच्याशी कनेक्ट होत असाल आणि प्रारंभिक कनेक्शनची गती वाढवू इच्छित असाल तर ब्राउझरला आधीपासून डोमेनसाठी DNS रिझोल्यूशन करण्यास सांगते.

ब्राउझरने डोमेनचा IP पत्ता निश्चित करणे आवश्यक आहे जर ते नवीन तृतीय-पक्ष डोमेनमधून कोणतीही संसाधने पुनर्प्राप्त करेल. उदाहरणार्थ, Google फॉन्ट लोड करणे, CDN वरून प्रतिक्रिया फॉन्ट किंवा API सर्व्हरकडून JSON प्रतिसादाची विनंती करणे.

प्रत्येक नवीन डोमेनसाठी, DNS रेकॉर्ड रिझोल्यूशन साधारणतः 20-120 ms घेते. हे केवळ दिलेल्या डोमेनवरून पहिल्या संसाधनाच्या लोडिंगवर परिणाम करते, परंतु तरीही विलंब होतो. आम्ही आगाऊ DNS रिझोल्यूशन केल्यास, आम्ही वेळ वाचवू आणि संसाधन जलद लोड करू.

वाक्यरचना

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

href डोमेन नाव सूचित करते ज्यासाठी तुम्ही IP पत्ता सेट करू इच्छिता. उपसर्ग सह निर्दिष्ट केले जाऊ शकते (https://domain.com) किंवा त्याशिवाय (//domain.com).

कधी वापरायचं

लवकरच आवश्यक असलेल्या डोमेनसाठी वापरा तेथून संसाधने डाउनलोड करण्यासाठी ज्याबद्दल ब्राउझरला आगाऊ माहिती नसते. उदाहरणार्थ:

• तुमचा अर्ज होस्ट केला आहे my-app.com आणि AJAX ला विनंत्या करते api.my-app.com: तुम्हाला विशिष्‍ट क्‍वेरी अगोदरच माहीत नसतात कारण त्या JS वरून डायनॅमिकली बनवल्या जातात. डोमेनशी पूर्व-कनेक्ट करण्यासाठी टॅग वापरणे येथे योग्य आहे.
• तुमचा अर्ज होस्ट केला आहे my-app.com, आणि Google फॉन्ट वापरते. ते दोन चरणांमध्ये डाउनलोड केले जातात: प्रथम, CSS फाइल डोमेनवरून डाउनलोड केली जाते 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 आणि सफारी 5 पासून. <link rel= "preconnect"> Chrome आणि Firefox मध्ये काही काळासाठी समर्थित होते, परंतु केवळ 11.1 मध्ये सफारीमध्ये जोडले गेले होते आणि IE/Edge मध्ये अद्याप समर्थित नाही. तुम्हाला या ब्राउझरचे समर्थन करायचे असल्यास, वापरा <link rel= "dns-prefetch" /> साठी बॅकअप पर्याय म्हणून <link rel= "preconnect">.
• तुम्हाला 4-6 पेक्षा जास्त डोमेनशी कनेक्शनची गती वाढवायची आहे. टॅग करा <link rel= "preconnect"> 4-6 पेक्षा जास्त डोमेन वापरण्याची शिफारस केलेली नाही, कारण कनेक्शन स्थापित करणे आणि राखणे हे एक महाग ऑपरेशन आहे. <link rel= "dns-prefetch" /> कमी संसाधने वापरतात, म्हणून आवश्यक असल्यास ते वापरा.

तपशील

पर्यायी टॅग. ब्राउझरला या सूचनांचे पालन करणे आवश्यक नाही, त्यामुळे ते कदाचित DNS रिझोल्यूशन करू शकत नाही, उदाहरणार्थ, पृष्ठावर किंवा इतर काही बाबतीत असे अनेक टॅग असल्यास.

DNS म्हणजे काय. इंटरनेटवरील प्रत्येक सर्व्हरमध्ये एक अद्वितीय IP पत्ता असतो, जो दिसतो 216.58.215.78. साइटचे नाव सहसा ब्राउझरच्या अॅड्रेस बारमध्ये प्रविष्ट केले जाते (उदाहरणार्थ, google.com), आणि DNS (डोमेन नेम सिस्टम) सर्व्हर सर्व्हरच्या IP पत्त्याशी जुळतात (216.58.215.78).

IP पत्ता निश्चित करण्यासाठी, ब्राउझरने DNS सर्व्हरला क्वेरी करणे आवश्यक आहे. नवीन तृतीय-पक्ष डोमेनशी कनेक्ट करताना 20−120 ms लागतात.

DNS कॅशे केलेले आहे, जरी खूप विश्वासार्ह नाही. काही OS आणि ब्राउझर DNS क्वेरी कॅशे करतात: यामुळे वारंवार क्वेरीवर वेळ वाचेल, परंतु कॅशिंगवर अवलंबून राहू शकत नाही. लिनक्सवर ते सहसा अजिबात कार्य करत नाही. Chrome मध्ये DNS कॅशे आहे, परंतु ते फक्त एक मिनिट टिकते. विंडोज पाच दिवसांसाठी DNS प्रतिसाद कॅश करते.

prerender

<link rel= "prerender"> ब्राउझरला URL डाउनलोड करण्यास आणि अदृश्य टॅबमध्ये प्रदर्शित करण्यास सांगते. जेव्हा वापरकर्ता दुव्यावर क्लिक करतो तेव्हा पृष्ठ त्वरित प्रदर्शित केले जावे. जर तुम्हाला खात्री असेल की वापरकर्ता विशिष्ट पृष्ठास भेट देईल आणि त्याच्या प्रदर्शनाची गती वाढवू इच्छित असेल तर हे उपयुक्त आहे.

2019 मध्ये या टॅगची अपवादात्मक परिणामकारकता असूनही (किंवा यामुळे). <link rel= "prerender"> प्रमुख ब्राउझरमध्ये असमाधानकारकपणे समर्थित. अधिक तपशील पहा. खाली.

वाक्यरचना

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

href तुम्ही पार्श्वभूमीत रेंडरिंग सुरू करू इच्छित URL कडे निर्देश करा.

कधी वापरायचं

जेव्हा तुम्हाला खात्री असेल की वापरकर्ता एका विशिष्ट पृष्ठावर जाईल. जर तुमच्याकडे "बोगदा" असेल ज्याद्वारे पृष्ठ A वर 70% अभ्यागत पृष्ठ B वर जातात <link rel= "prerender"> पृष्ठ A वर पृष्ठ B त्वरीत प्रदर्शित करण्यास मदत करेल.

अति वापर करू नका. बँडविड्थ आणि मेमरीच्या बाबतीत प्री-रेंडरिंग अत्यंत महाग आहे. वापरू नका <link rel= "prerender"> एकापेक्षा जास्त पृष्ठांसाठी.

तपशील

पर्यायी टॅग. ब्राउझरला या सूचनांचे पालन करणे आवश्यक नाही आणि त्याकडे दुर्लक्ष करू शकते, उदाहरणार्थ, स्लो कनेक्शनवर किंवा अपुरी फ्री मेमरी असताना.

मेमरी जतन करण्यासाठी Chrome पूर्ण रेंडरिंग करत नाहीआणि फक्त NoState प्रीलोड करा. याचा अर्थ Chrome पृष्ठ आणि त्याची सर्व संसाधने लोड करते, परंतु JavaScript रेंडर किंवा कार्यान्वित करत नाही.

फायरफॉक्स आणि सफारी या टॅगला अजिबात सपोर्ट करत नाहीत. हे निर्देशांचे उल्लंघन करत नाही, कारण ब्राउझरने या सूचनांचे पालन करणे आवश्यक नाही; पण तरीही उदास. अंमलबजावणी बग फायरफॉक्स सात वर्षांपासून सुरू आहे. सफारी असे वृत्त आहे या टॅगलाही सपोर्ट करत नाही.

सारांश

वापरा:

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

स्त्रोत: www.habr.com