ਹਨ ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਦੇ ਕਈ ਤਰੀਕੇ. ਉਹਨਾਂ ਵਿੱਚੋਂ ਇੱਕ ਸਮੱਗਰੀ ਨੂੰ ਪਹਿਲਾਂ ਤੋਂ ਲੋਡ ਕਰਨਾ ਹੈ ਜਿਸਦੀ ਬਾਅਦ ਵਿੱਚ ਲੋੜ ਹੋਵੇਗੀ। CSS ਪ੍ਰੀ-ਪ੍ਰੋਸੈਸਿੰਗ, ਪੂਰੇ ਪੰਨੇ ਦੀ ਪ੍ਰੀ-ਰੈਂਡਰਿੰਗ ਜਾਂ ਡੋਮੇਨ ਨਾਮ ਰੈਜ਼ੋਲਿਊਸ਼ਨ। ਅਸੀਂ ਸਭ ਕੁਝ ਪਹਿਲਾਂ ਤੋਂ ਕਰਦੇ ਹਾਂ, ਅਤੇ ਫਿਰ ਤੁਰੰਤ ਨਤੀਜਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹਾਂ! ਠੰਡਾ ਲੱਗਦਾ ਹੈ।

ਇਸ ਤੋਂ ਵੀ ਵਧੀਆ ਗੱਲ ਇਹ ਹੈ ਕਿ ਇਹ ਬਹੁਤ ਹੀ ਅਸਾਨੀ ਨਾਲ ਲਾਗੂ ਕੀਤਾ ਗਿਆ ਹੈ। ਪੰਜ ਟੈਗ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਸ਼ੁਰੂਆਤੀ ਕਾਰਵਾਈਆਂ ਕਰਨ ਲਈ ਇੱਕ ਕਮਾਂਡ ਦਿਓ:

<link rel="prefetch" href="/pa/style.css" as="style" />
<link rel="preload" href="/pa/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 · ਪ੍ਰੀ-ਰੈਂਡਰ

ਪ੍ਰੀਲੋਡ

<link rel= "preload"> ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਇੱਕ ਸਰੋਤ (ਜਿਵੇਂ ਕਿ ਸਕ੍ਰਿਪਟ ਜਾਂ ਸਟਾਈਲਸ਼ੀਟ) ਨੂੰ ਜਿੰਨੀ ਜਲਦੀ ਹੋ ਸਕੇ ਲੋਡ ਅਤੇ ਕੈਸ਼ ਕਰਨ ਲਈ ਕਹਿੰਦਾ ਹੈ। ਇਹ ਉਦੋਂ ਲਾਭਦਾਇਕ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਪੰਨਾ ਲੋਡ ਹੋਣ ਤੋਂ ਕੁਝ ਸਕਿੰਟਾਂ ਬਾਅਦ ਇੱਕ ਸਰੋਤ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ - ਅਤੇ ਤੁਸੀਂ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਤੇਜ਼ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ।

ਬਰਾਊਜ਼ਰ ਲੋਡ ਕਰਨ ਤੋਂ ਬਾਅਦ ਸਰੋਤ ਨਾਲ ਕੁਝ ਨਹੀਂ ਕਰਦਾ। ਸਕ੍ਰਿਪਟਾਂ ਨੂੰ ਲਾਗੂ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ, ਸਟਾਈਲ ਸ਼ੀਟਾਂ ਲਾਗੂ ਨਹੀਂ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ। ਸਰੋਤ ਨੂੰ ਸਿਰਫ਼ ਕੈਸ਼ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਅਤੇ ਬੇਨਤੀ ਕਰਨ 'ਤੇ ਤੁਰੰਤ ਉਪਲਬਧ ਕਰਾਇਆ ਜਾਂਦਾ ਹੈ।

ਸੰਟੈਕਸ

<link rel="preload" href="/pa/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="/pa/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="/pa/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 ਵਿੱਚ ਤਰਜੀਹ. ਕਰੋਮ ਵਿੱਚ <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 ਰੈਜ਼ੋਲਿਊਸ਼ਨ. ਸਰਵਰ IP ਪਤਾ ਲੱਭੋ (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 ਅਤੇ Safari 5 ਤੋਂ. <link rel= "preconnect"> Chrome ਅਤੇ Firefox ਵਿੱਚ ਕੁਝ ਸਮੇਂ ਲਈ ਸਮਰਥਿਤ ਸੀ, ਪਰ ਸਿਰਫ਼ 11.1 ਵਿੱਚ Safari ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਸੀ ਅਤੇ ਅਜੇ ਵੀ 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 ਜਵਾਬਾਂ ਨੂੰ ਕੈਸ਼ ਕਰਦਾ ਹੈ।

ਪ੍ਰੀ-ਰੈਂਡਰ

<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