ہے ویب کی کارکردگی کو بہتر بنانے کے بہت سے طریقے. ان میں سے ایک مواد پہلے سے لوڈ کرنا ہے جس کی بعد میں ضرورت ہوگی۔ سی ایس ایس پری پروسیسنگ، مکمل صفحہ پری رینڈرنگ یا ڈومین نام کی ریزولوشن۔ ہم سب کچھ پہلے سے کرتے ہیں، اور پھر فوری طور پر نتیجہ ظاہر کرتے ہیں! ٹھنڈا لگتا ہے۔

اس سے بھی ٹھنڈی بات یہ ہے کہ اسے بہت آسانی سے نافذ کیا گیا ہے۔ پانچ ٹیگز براؤزر کو ابتدائی کارروائیاں کرنے کا حکم دیں:

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

آئیے مختصراً بتاتے ہیں کہ وہ کیا کرتے ہیں اور انہیں کب استعمال کرنا ہے۔

к: preload · پری فچ · پہلے سے جڑنا · dns-prefetch · پری رینڈر

preload

<link rel= "preload"> براؤزر سے کہتا ہے کہ جتنی جلدی ممکن ہو کسی وسائل (جیسے اسکرپٹ یا اسٹائل شیٹ) کو لوڈ اور کیش کرے۔ یہ اس وقت مفید ہے جب صفحہ لوڈ ہونے کے چند سیکنڈ بعد کسی وسائل کی ضرورت ہو - اور آپ اس عمل کو تیز کرنا چاہتے ہیں۔

براؤزر لوڈ کرنے کے بعد وسائل کے ساتھ کچھ نہیں کرتا ہے۔ اسکرپٹس پر عمل نہیں کیا جاتا ہے، اسٹائل شیٹس لاگو نہیں ہوتے ہیں۔ وسائل کو آسانی سے کیش کیا جاتا ہے اور درخواست پر فوری طور پر دستیاب کر دیا جاتا ہے۔

نحو

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

• اگر آپ اپنے انداز کو نقطہ نظر کے مطابق الگ کرتے ہیں۔ تنقیدی سی ایس ایس دو حصوں میں، اہم (فوری طور پر پیش کرنے کے لیے) اور غیر تنقیدی:

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

  اس نقطہ نظر کے ساتھ، غیر اہم طرزیں صرف اس وقت لوڈ ہونا شروع ہوں گی جب جاوا اسکرپٹ چلتا ہے، جو رینڈرنگ کے چند سیکنڈ بعد ہو سکتا ہے۔ انتظار کرنے کے بجائے جے ایس استعمال کریں۔ <link rel= "preload">پہلے ڈاؤن لوڈ شروع کرنے کے لیے:

  <style>
  /* Inlined critical styles */
  </style>
  
  <link rel="preload" href="/ur/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="/ur/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">.

تفصیل

اختیاری ٹیگ. براؤزر کو اس ہدایت پر عمل کرنے کی ضرورت نہیں ہے؛ یہ اسے نظر انداز کر سکتا ہے، مثال کے طور پر، سست کنکشن پر۔

کروم میں ترجیح. کروم میں <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"> براؤزر سے ڈومین کے لیے ڈی این ایس ریزولوشن پیشگی انجام دینے کے لیے کہتا ہے اگر آپ جلد ہی اس سے منسلک ہوں گے اور ابتدائی کنکشن کو تیز کرنا چاہتے ہیں۔

براؤزر کو ڈومین کے آئی پی ایڈریس کا تعین کرنا چاہیے اگر وہ کسی نئے تھرڈ پارٹی ڈومین سے کوئی وسائل بازیافت کرے گا۔ مثال کے طور پر، گوگل فونٹس لوڈ کرنا، CDN سے ری ایکٹ فونٹس، یا API سرور سے JSON جواب کی درخواست کرنا۔

ہر نئے ڈومین کے لیے، DNS ریکارڈ ریزولوشن میں عام طور پر تقریباً 20-120 ms لگتے ہیں۔ یہ صرف ایک دیے گئے ڈومین سے پہلے وسیلہ کی لوڈنگ کو متاثر کرتا ہے، لیکن پھر بھی تاخیر کا آغاز کرتا ہے۔ اگر ہم ڈی این ایس ریزولوشن پہلے سے انجام دیتے ہیں، تو ہم وقت کی بچت کریں گے اور وسائل کو تیزی سے لوڈ کریں گے۔

نحو

<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"> کروم اور فائر فاکس میں تھوڑی دیر کے لیے سپورٹ کیا گیا تھا، لیکن صرف 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 استفسارات کو کیش کرتے ہیں: اس سے بار بار کی جانے والی استفسارات پر وقت بچ جائے گا، لیکن کیشنگ پر بھروسہ نہیں کیا جا سکتا۔ لینکس پر یہ عام طور پر بالکل کام نہیں کرتا ہے۔ کروم میں DNS کیش ہے، لیکن یہ صرف ایک منٹ تک رہتا ہے۔ ونڈوز ڈی این ایس کے جوابات کو پانچ دنوں تک محفوظ کرتی ہے۔

پری رینڈر

<link rel= "prerender"> براؤزر سے یو آر ایل ڈاؤن لوڈ کرنے اور اسے غیر مرئی ٹیب میں ڈسپلے کرنے کو کہتا ہے۔ جب صارف لنک پر کلک کرتا ہے، تو صفحہ فوراً ظاہر ہونا چاہیے۔ یہ مفید ہے اگر آپ کو یقین ہے کہ صارف کسی مخصوص صفحہ پر جائے گا اور اس کے ڈسپلے کو تیز کرنا چاہتا ہے۔

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"> ایک سے زیادہ صفحات کے لیے۔

تفصیل

اختیاری ٹیگ. براؤزر کو اس ہدایت پر عمل کرنے کی ضرورت نہیں ہے اور وہ اسے نظر انداز کر سکتا ہے، مثال کے طور پر، سست کنکشن پر یا جب مفت میموری ناکافی ہو۔

میموری کو بچانے کے لیے کروم مکمل رینڈرنگ نہیں کرتا ہے۔اور صرف NoState کو پہلے سے لوڈ کریں۔. اس کا مطلب ہے کہ کروم صفحہ اور اس کے تمام وسائل کو لوڈ کرتا ہے، لیکن JavaScript کو رینڈر یا اس پر عمل نہیں کرتا ہے۔

Firefox اور Safari اس ٹیگ کو بالکل بھی سپورٹ نہیں کرتے ہیں۔ یہ تصریح کی خلاف ورزی نہیں کرتا، کیونکہ براؤزرز کو اس ہدایت پر عمل کرنے کی ضرورت نہیں ہے۔ لیکن پھر بھی اداس. نفاذ کی خرابی۔ فائر فاکس سات سال سے کھلا ہے۔ اطلاعات ہیں کہ سفاری اس ٹیگ کو بھی سپورٹ نہیں کرتا.

خلاصہ

استعمال کریں:

• <link rel= "preload"> - جب آپ کو چند سیکنڈ میں وسائل کی ضرورت ہو۔
• <link rel= "prefetch"> - جب آپ کو اگلے صفحے پر وسائل کی ضرورت ہو۔
• <link rel= "preconnect"> - جب آپ جانتے ہیں کہ آپ کو جلد ہی ایک وسائل کی ضرورت ہوگی، لیکن آپ کو ابھی تک اس کا پورا URL معلوم نہیں ہے۔
• <link rel= "dns-prefetch"> - اسی طرح، جب آپ جانتے ہیں کہ آپ کو جلد ہی ایک وسائل کی ضرورت ہوگی، لیکن آپ ابھی تک اس کا مکمل URL نہیں جانتے ہیں (پرانے براؤزرز کے لیے)
• <link rel= "prerender"> - جب آپ کو یقین ہو کہ صارفین ایک مخصوص صفحہ پر جائیں گے، اور آپ اس کے ڈسپلے کو تیز کرنا چاہتے ہیں۔

ماخذ: www.habr.com