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

अझ राम्रो कुरा के छ कि यो धेरै सरल रूपमा लागू गरिएको छ। पाँच ट्यागहरू ब्राउजरलाई प्रारम्भिक कार्यहरू गर्न आदेश दिनुहोस्:

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

पूर्व-लोड

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

ब्राउजरले लोड गरेपछि स्रोतसँग केही गर्दैन। लिपिहरू कार्यान्वयन गरिएका छैनन्, शैली पानाहरू लागू गरिएका छैनन्। स्रोत केवल क्यास गरिएको छ र तुरुन्तै अनुरोधमा उपलब्ध गराइन्छ।

विन्यास

<link rel="preload" href="/ne/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>

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

  <style>
  /* Inlined critical styles */
  </style>
  
  <link rel="preload" href="/ne/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="/ne/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 र गुगल फन्टहरू प्रयोग गर्दछ। तिनीहरू दुई चरणहरूमा डाउनलोड हुन्छन्: पहिलो, CSS फाइल डोमेनबाट डाउनलोड गरिन्छ fonts.googleapis.com, त्यसपछि यो फाइलले फन्टहरू अनुरोध गर्दछ fonts.gstatic.com। तपाइँ कुन विशिष्ट फन्ट फाइलहरूबाट हो भनेर थाहा पाउन सक्नुहुन्न fonts.gstatic.com तपाईंले CSS फाइल लोड नगरुन्जेल तपाईंलाई आवश्यक पर्दछ, त्यसैले हामी पहिले नै प्रारम्भिक जडान गर्न सक्छौं।

यो ट्याग प्रयोग गर्नुहोस् केहि तेस्रो पक्ष स्क्रिप्ट वा थोरै शैली को गति को लागी पूर्व-स्थापित जडानको कारण।

अति प्रयोग नगर्नुहोस्। जडान स्थापना र कायम राख्नु दुबै ग्राहक र सर्भरको लागि महँगो कार्य हो। अधिकतम 4-6 डोमेनहरूको लागि यो ट्याग प्रयोग गर्नुहोस्।

Подробности

वैकल्पिक ट्याग। ब्राउजरले यो निर्देशन पालना गर्न आवश्यक छैन र यसलाई बेवास्ता गर्न सक्छ, उदाहरणका लागि, यदि धेरै जडानहरू पहिले नै स्थापित भइसकेका छन् वा कुनै अन्य अवस्थामा।

जडान प्रक्रिया के समावेश छ?। प्रत्येक साइटमा जडान गर्न, ब्राउजरले निम्न गर्नुपर्छ:

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

नोट: HTTP/3 ले ह्यान्डशेक मेकानिजमलाई सुधार र गति दिनेछ, तर यो अझै धेरै टाढा छ।

dns-prefetch

<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, र गुगल फन्टहरू प्रयोग गर्दछ। तिनीहरू दुई चरणहरूमा डाउनलोड हुन्छन्: पहिलो, CSS फाइल डोमेनबाट डाउनलोड गरिन्छ fonts.googleapis.com, त्यसपछि यो फाइलले फन्टहरू अनुरोध गर्दछ fonts.gstatic.com। तपाइँ कुन विशिष्ट फन्ट फाइलहरूबाट हो भनेर थाहा पाउन सक्नुहुन्न fonts.gstatic.com तपाईंले CSS फाइल लोड नगरेसम्म तपाईंलाई यसको आवश्यकता पर्नेछ, त्यसैले हामी अग्रिम जडान मात्र गर्न सक्छौं।

यो ट्याग प्रयोग गर्नुहोस् केहि तेस्रो पक्ष स्क्रिप्ट वा थोरै शैली को गति को लागी पूर्व-स्थापित जडानको कारण।

कृपया समान विशेषताहरू नोट गर्नुहोस् <link rel= "dns-prefetch"/> и <link rel= "preconnect">। यो सामान्यतया एक डोमेन को लागी एक साथ प्रयोग गर्न को लागी मतलब छैन: <link rel= "preconnect"> पहिले नै समावेश छ <link rel= "dns-prefetch"/> र धेरै धेरै। यो दुई अवस्थामा जायज हुन सक्छ:

• के तपाईं पुराना ब्राउजरहरूलाई समर्थन गर्न चाहनुहुन्छ?. <link rel= "dns-prefetch" /> द्वारा समर्थित IE10 र सफारी 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 रिजोल्युसन प्रदर्शन नगर्न सक्छ, उदाहरणका लागि, यदि पृष्ठमा वा कुनै अन्य अवस्थामा त्यस्ता धेरै ट्यागहरू छन्।

DNS के हो। इन्टरनेटमा प्रत्येक सर्भरमा एक अद्वितीय IP ठेगाना छ, जुन जस्तो देखिन्छ 216.58.215.78। साइटको नाम सामान्यतया ब्राउजरको ठेगाना पट्टीमा प्रविष्ट गरिन्छ (उदाहरणका लागि, google.com), र DNS (डोमेन नाम प्रणाली) सर्भरहरूले यसलाई सर्भरको आईपी ठेगानासँग मेल खान्छ (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