ڪري سگهو ٿا ويب ڪارڪردگي کي بهتر ڪرڻ جا ڪيترائي طريقا. انهن مان هڪ مواد اڳ لوڊ ڪري رهيو آهي جيڪو بعد ۾ گهربل هوندو. CSS کان اڳ پروسيسنگ، مڪمل صفحو پري رينڊرنگ يا ڊومين جو نالو قرارداد. اسان سڀ ڪجهه اڳ ۾ ڪندا آهيون، ۽ پوء فوري طور تي نتيجو ڏيکاريو! ٿورڙو آواز.

ڇا اڃا به ٿڌو آهي اهو آهي ته اهو بلڪل آسان آهي. پنج ٽيگ شروعاتي ڪمن کي انجام ڏيڻ لاءِ برائوزر کي حڪم ڏيو:

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

اچو ته مختصر طور تي وضاحت ڪريون ته اهي ڇا ڪندا آهن ۽ جڏهن انهن کي استعمال ڪرڻ گهرجي.

ڏانھن وڃو: اڳرائي · اet ۾ پيش ڪرڻ · اڳي ڳنڍڻ · dns-prefetch · اڳڀرائي ڪرڻ

اڳرائي

<link rel= "preload"> برائوزر کي ٻڌائي ٿو ته لوڊ ۽ ڪيش ڪري هڪ وسيلو (جهڙوڪ اسڪرپٽ يا اسٽائل شيٽ) جيترو جلدي ٿي سگهي. اھو مفيد آھي جڏھن ھڪڙي وسيلن جي ضرورت آھي صفحي جي لوڊ ٿيڻ کان ڪجھ سيڪنڊن بعد - ۽ توھان پروسيس کي تيز ڪرڻ چاھيو ٿا.

برائوزر لوڊ ڪرڻ کان پوء وسيلن سان ڪجھ به نه ڪندو آھي. اسڪرپٽ تي عمل نه ڪيو ويو آهي، اسٽائل شيٽ لاڳو نه ڪيا ويا آهن. وسيلن کي صرف محفوظ ڪيو ويو آهي ۽ فوري طور تي درخواست تي دستياب ڪيو ويو آهي.

نحو

<link rel="preload" href="/sd/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 هلندي، جيڪا ڪجهه سيڪنڊن بعد ٿي سگهي ٿي رينڊرنگ. انتظار ڪرڻ بدران JS استعمال ڪريو <link rel= "preload">پهريان ڊائون لوڊ ڪرڻ شروع ڪرڻ لاءِ:

  <style>
  /* Inlined critical styles */
  </style>
  
  <link rel="preload" href="/sd/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. ڪروم برائوزر لاءِ توھان ڏسي سگھوٿا مڪمل ترجيحي جدول.

اet ۾ پيش ڪرڻ

<link rel= "prefetch"> برائوزر کي پس منظر ۾ هڪ وسيلو (جهڙوڪ اسڪرپٽ يا اسٽائل شيٽ) ڊائون لوڊ ۽ ڪيش ڪرڻ لاءِ پڇي ٿو. لوڊشيڊنگ گهٽ ترجيح تي ٿئي ٿي ان ڪري اهو وڌيڪ اهم وسيلن سان مداخلت نٿو ڪري. اهو ڪارائتو آهي جيڪڏهن وسيلن جي ايندڙ صفحي تي ضرورت آهي ۽ توهان ان کي اڳ ۾ ئي ڪيش ڪرڻ چاهيو ٿا.

هتي، پڻ، برائوزر لوڊ ڪرڻ کان پوء وسيلن سان ڪجھ به نه ڪندو آهي. اسڪرپٽ تي عمل نه ڪيو ويو آهي، اسٽائل شيٽ لاڳو نه ڪيا ويا آهن. وسيلن کي صرف محفوظ ڪيو ويو آهي ۽ فوري طور تي درخواست تي دستياب ڪيو ويو آهي.

نحو

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

href وسيلا ڏانهن اشارو ڪيو جيڪو توهان ڊائون لوڊ ڪرڻ چاهيو ٿا.

as ڪجھ به ٿي سگھي ٿو جيڪو برائوزر ۾ ڊائون لوڊ ڪري سگھجي ٿو:

• style اسٽائل شيٽ لاء،
• script اسڪرپٽ لاء،
• font فونٽ لاءِ،
• fetch استعمال ڪندي لوڊ ٿيل وسيلن لاءِ fetch() يا XMLHttpRequest,
• مڪمل فهرست ڏسو MDN تي.

اهو وصف بيان ڪرڻ ضروري آهي as - هي مدد ڪري ٿو برائوزر کي صحيح طور تي ترجيح ڏيڻ ۽ شيڊول ڊائون لوڊ.

جڏهن استعمال ڪرڻ

ٻين صفحن مان وسيلن کي لوڊ ڪرڻ لاء، جيڪڏهن توهان کي ڪنهن ٻئي صفحي مان وسيلن جي ضرورت آهي، ۽ توهان ان کي اڳ لوڊ ڪرڻ چاهيو ٿا ته پوءِ انهي صفحي جي رينڊنگ کي تيز ڪريو. مثال طور:

• توھان وٽ ھڪڙو آنلائن اسٽور آھي، ۽ 40٪ صارفين کي پراڊڪٽ جي صفحي لاء گھر واري صفحي کي ڇڏي ڏيو. استعمال ڪريو <link rel= "prefetch">, لوڊ ڪندي CSS ۽ JS فائلون پراڊڪٽ صفحن کي رينڊر ڪرڻ لاءِ.
• توھان وٽ ھڪڙي صفحي جي ايپليڪيشن آھي، ۽ مختلف صفحا مختلف پيڪيجز لوڊ ڪندا آھن. جڏهن هڪ صارف هڪ صفحي جو دورو ڪري ٿو، انهن سڀني صفحن لاء پيڪيجز جيڪي ان سان ڳنڍيندا آهن اڳي لوڊ ڪري سگهجن ٿيون.

امڪان اهو آهي ته هي ٽيگ محفوظ طور تي ڪنهن به حد تائين استعمال ڪري سگهجي ٿو.. برائوزر اڪثر ڪري شيڊول ڪندا آهن prefetch کي گهٽ ۾ گهٽ ترجيح سان، تنهنڪري اهو ڪنهن کي به تنگ نٿو ڪري. بس ذهن ۾ رکو ته اهو صارف جي ٽرئفڪ کي استعمال ڪري ٿو، جيڪو پئسا خرچ ڪري سگهي ٿو.

تڪڙي درخواستن لاءِ نه. استعمال نه ڪيو <link rel= "prefetch">، جڏهن وسيلن جي ضرورت آهي چند سيڪنڊن ۾. هن معاملي ۾، استعمال <link rel= "preload">.

تفصيل ڏسو

اختياري ٽيگ. برائوزر کي هن هدايت جي پيروي ڪرڻ جي ضرورت ناهي؛ اهو شايد ان کي نظر انداز ڪري سگهي ٿو، مثال طور، سست ڪنيڪشن تي.

ڪروم ۾ ترجيح. ڪروم ۾ <link rel= "prefetch"> عام طور تي گهٽ ۾ گهٽ ترجيح سان عمل ڪيو ويندو آهي (ڏسو مڪمل ترجيحي جدول)، اهو آهي، هر شي کي لوڊ ڪرڻ کان پوء.

اڳي ڳنڍڻ

<link rel= "preconnect"> برائوزر کان پڇي ٿو اڳ ۾ ڊومين سان ڳنڍڻ لاءِ جڏهن توهان مستقبل ۾ ڪنيڪشن سيٽ اپ کي تيز ڪرڻ چاهيو ٿا.

برائوزر کي ڪنيڪشن قائم ڪرڻ گھرجي جيڪڏھن اھو ڪنھن وسيلا کي نئين ٽئين پارٽي ڊومين مان حاصل ڪري. مثال طور، جيڪڏهن اهو گوگل فانٽ لوڊ ڪري ٿو، هڪ 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 ۽ گوگل فانٽ استعمال ڪري ٿو. اهي ٻن مرحلن ۾ ڊائون لوڊ ڪيا ويا آهن: پهريون، سي ايس ايس فائل ڊومين مان ڊائون لوڊ ڪيو ويو آهي 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 پتي کي طئي ڪرڻ گهرجي جيڪڏهن اهو ڪنهن به وسيلن کي نئين ٽئين پارٽي ڊومين مان حاصل ڪندو. مثال طور، گوگل فانٽ لوڊ ڪرڻ، CDN کان فانٽ رد ڪرڻ، يا API سرور کان JSON جواب جي درخواست ڪرڻ.

هر نئين ڊومين لاءِ، ڊي اين ايس ريڪارڊ ريزوليوشن عام طور تي لڳ ڀڳ 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، ۽ گوگل فانٽ استعمال ڪري ٿو. اهي ٻن مرحلن ۾ ڊائون لوڊ ڪيا ويا آهن: پهريون، سي ايس ايس فائل ڊومين مان ڊائون لوڊ ڪيو ويو آهي 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"> 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 ڪيش ٿيل آهي، جيتوڻيڪ بلڪل معتبر ناهي. ڪجھ او ايسز ۽ برائوزرز DNS سوالن کي ڪيش ڪن ٿا: ھي بار بار سوالن تي وقت بچائيندو، پر ڪيشنگ تي ڀروسو نٿو ڪري سگھجي. لينڪس تي اهو عام طور تي ڪم نٿو ڪري. ڪروم وٽ هڪ DNS ڪيش آهي، پر اهو صرف هڪ منٽ لاءِ رهي ٿو. ونڊوز پنجن ڏينهن تائين DNS جوابن کي محفوظ ڪري ٿو.

اڳڀرائي ڪرڻ

<link rel= "prerender"> برائوزر کان پڇي ٿو URL ڊائون لوڊ ڪري ۽ ان کي پوشيده ٽيب ۾ ڏيکاري. جڏهن صارف لنڪ تي ڪلڪ ڪري، صفحي کي فوري طور تي ظاهر ڪيو وڃي. اهو ڪارائتو آهي جيڪڏهن توهان کي پڪ آهي ته صارف هڪ خاص صفحي جو دورو ڪندو ۽ ان جي ڊسپلي کي تيز ڪرڻ چاهيندو.

باوجود (يا ان جي ڪري) هن ٽيگ جي غير معمولي اثرائتي، 2019 ۾ <link rel= "prerender"> وڏن برائوزرن ۾ ناقص سپورٽ. وڌيڪ تفصيل ڏسو. هيٺان.

نحو

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

href URL ڏانهن اشارو ڪيو جيڪو توهان پس منظر ۾ رينجر شروع ڪرڻ چاهيو ٿا.

جڏهن استعمال ڪرڻ

جڏهن توهان واقعي پڪ آهيو ته صارف هڪ خاص صفحي ڏانهن ويندا. جيڪڏهن توهان وٽ ”سرنگ“ آهي جنهن جي ذريعي 70٪ سياحن جو صفحو A ڏانهن وڃو پيج B تي، پوءِ <link rel= "prerender"> صفحي تي A صفحو B کي تمام جلدي ڏيکارڻ ۾ مدد ڪندو.

وڌيڪ استعمال نه ڪريو. بينڊوڊٿ ۽ ميموري جي لحاظ کان پري رينڊرنگ تمام مهانگو آهي. استعمال نه ڪيو <link rel= "prerender"> هڪ کان وڌيڪ صفحن لاءِ.

تفصيل ڏسو

اختياري ٽيگ. برائوزر کي هن هدايت جي پيروي ڪرڻ جي ضرورت ناهي ۽ شايد ان کي نظر انداز ڪري سگھي ٿو، مثال طور، سست ڪنيڪشن تي يا جڏهن ڪافي مفت ياداشت نه آهي.

ياداشت کي بچائڻ لاء ڪروم مڪمل رينڊرنگ نٿو ڪري۽ صرف اڳ لوڊ NoState. هن جو مطلب آهي ته ڪروم صفحي ۽ ان جي سڀني وسيلن کي لوڊ ڪري ٿو، پر JavaScript کي رينجر يا عمل نٿو ڪري.

فائر فاڪس ۽ سفاري هن ٽيگ کي سپورٽ نه ڪندا آهن. هي وضاحتن جي ڀڃڪڙي نٿو ڪري، ڇاڪاڻ ته برائوزرن کي هن هدايت جي پيروي ڪرڻ جي ضرورت ناهي؛ پر اڃا تائين اداس. پليجو بگ فائر فاڪس ست سالن کان کليل آهي. رپورٽون آهن ته سفاري هن ٽيگ کي به سپورٽ نٿو ڪري.

خلاصو

استعمال ڪريو:

• <link rel= "preload"> - جڏهن توهان کي ڪجهه سيڪنڊن ۾ وسيلن جي ضرورت آهي
• <link rel= "prefetch"> - جڏهن توهان کي ايندڙ صفحي تي وسيلن جي ضرورت آهي
• <link rel= "preconnect"> - جڏهن توهان ڄاڻو ٿا ته توهان کي جلدي وسيلن جي ضرورت پوندي، پر توهان اڃا تائين ان جو پورو URL نه ڄاڻندا آهيو
• <link rel= "dns-prefetch"> - ساڳئي طرح، جڏهن توهان ڄاڻو ٿا ته توهان کي جلدي وسيلن جي ضرورت پوندي، پر توهان اڃا تائين ان جو پورو URL نه ڄاڻندا آهيو (پراڻن برائوزرن لاء)
• <link rel= "prerender"> - جڏهن توهان کي پڪ آهي ته صارف هڪ خاص صفحي تي ويندا، ۽ توهان ان جي ڊسپلي کي تيز ڪرڻ چاهيو ٿا

جو ذريعو: www.habr.com