আছে ওয়েব কর্মক্ষমতা উন্নত করার অনেক উপায়. তাদের মধ্যে একটি হল প্রিলোড করা বিষয়বস্তু যা পরে প্রয়োজন হবে। CSS প্রাক-প্রক্রিয়াকরণ, সম্পূর্ণ পৃষ্ঠা প্রি-রেন্ডারিং বা ডোমেন নাম রেজোলিউশন। আমরা আগাম সবকিছু করি, এবং তারপর অবিলম্বে ফলাফল প্রদর্শন! শান্ত শোনাচ্ছে।

যা আরও শীতল তা হল এটি খুব সহজভাবে প্রয়োগ করা হয়েছে। পাঁচটি ট্যাগ প্রাথমিক ক্রিয়া সম্পাদনের জন্য ব্রাউজারকে একটি কমান্ড দিন:

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

  এই পদ্ধতির সাথে, নন-ক্রিটিকাল স্টাইলগুলি শুধুমাত্র জাভাস্ক্রিপ্ট চালানোর সময় লোড হতে শুরু করবে, যা রেন্ডার করার কয়েক সেকেন্ড পরে ঘটতে পারে। অপেক্ষার পরিবর্তে JS ব্যবহার করুন <link rel= "preload">আগে ডাউনলোড শুরু করতে:

  <style>
  /* Inlined critical styles */
  </style>
  
  <link rel="preload" href="/bn/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="/bn/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 ডোমেন নাম নির্দেশ করে যার জন্য আপনি আইপি ঠিকানা নির্ধারণ করতে চান। একটি উপসর্গ দিয়ে নির্দিষ্ট করা যেতে পারে (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 ফাইল লোড না করা পর্যন্ত আপনার প্রয়োজন হবে, তাই আমরা আগে থেকে শুধুমাত্র একটি প্রাথমিক সংযোগ করতে পারি।

কিছু তৃতীয় পক্ষের স্ক্রিপ্ট বা শৈলী একটু গতি বাড়াতে এই ট্যাগ ব্যবহার করুন পূর্ব-প্রতিষ্ঠিত সংযোগের কারণে।

অতিরিক্ত ব্যবহার করবেন না. একটি সংযোগ স্থাপন এবং বজায় রাখা ক্লায়েন্ট এবং সার্ভার উভয়ের জন্য একটি ব্যয়বহুল অপারেশন। সর্বাধিক 4-6টি ডোমেনের জন্য এই ট্যাগটি ব্যবহার করুন৷

বিস্তারিত দেখুন

ঐচ্ছিক ট্যাগ. ব্রাউজারটির এই নির্দেশনা অনুসরণ করার প্রয়োজন নেই এবং এটি উপেক্ষা করতে পারে, উদাহরণস্বরূপ, যদি অনেকগুলি সংযোগ ইতিমধ্যেই প্রতিষ্ঠিত হয়ে থাকে বা অন্য কোনও ক্ষেত্রে।

সংযোগ প্রক্রিয়া কি অন্তর্ভুক্ত?. প্রতিটি সাইটে সংযোগ করতে, ব্রাউজারকে নিম্নলিখিতগুলি করতে হবে:

• DNS রেজোলিউশন. সার্ভার আইপি ঠিকানা খুঁজুন (216.58.215.78) নির্দিষ্ট ডোমেইন নামের জন্য (google.com).
• টিসিপি হ্যান্ডশেক. সার্ভারের সাথে একটি TCP সংযোগ শুরু করতে প্যাকেটগুলি (ক্লায়েন্ট → সার্ভার → ক্লায়েন্ট) বিনিময় করুন।
• TLS হ্যান্ডশেক (শুধুমাত্র HTTPS সাইট). একটি নিরাপদ TLS সেশন শুরু করতে প্যাকেট এক্সচেঞ্জের দুই রাউন্ড (ক্লায়েন্ট → সার্ভার → ক্লায়েন্ট → সার্ভার → ক্লায়েন্ট)।

দ্রষ্টব্য: HTTP/3 হ্যান্ডশেক পদ্ধতির উন্নতি এবং গতি বাড়াবে, তবে এটি এখনও অনেক দূরে।

dns-প্রিফেচ

<link rel= "dns-prefetch"> আপনি যদি শীঘ্রই এটির সাথে সংযোগ করতে চান এবং প্রাথমিক সংযোগের গতি বাড়াতে চান তবে ব্রাউজারকে আগে থেকেই ডোমেনের জন্য DNS রেজোলিউশন সম্পাদন করতে বলে।

ব্রাউজারটিকে অবশ্যই ডোমেনের আইপি ঠিকানা নির্ধারণ করতে হবে যদি এটি একটি নতুন তৃতীয় পক্ষের ডোমেন থেকে কোনও সংস্থান পুনরুদ্ধার করবে। উদাহরণস্বরূপ, Google ফন্ট লোড করা, একটি CDN থেকে প্রতিক্রিয়া ফন্ট, বা একটি API সার্ভার থেকে একটি JSON প্রতিক্রিয়া অনুরোধ করা।

প্রতিটি নতুন ডোমেনের জন্য, DNS রেকর্ড রেজোলিউশন সাধারণত 20-120 ms লাগে। এটি শুধুমাত্র একটি প্রদত্ত ডোমেন থেকে প্রথম সম্পদের লোডিংকে প্রভাবিত করে, কিন্তু তারপরও একটি বিলম্ব প্রবর্তন করে। আমরা যদি আগে থেকে DNS রেজোলিউশন সঞ্চালন করি, তাহলে আমরা সময় বাঁচাব এবং রিসোর্স দ্রুত লোড করব।

শব্দবিন্যাস

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

href আপনি যে ডোমেন নামটির জন্য আইপি ঠিকানা সেট করতে চান তা নির্দেশ করে। একটি উপসর্গ দিয়ে নির্দিষ্ট করা যেতে পারে (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 আপনি 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"> ক্রোম এবং ফায়ারফক্সে কিছু সময়ের জন্য সমর্থিত ছিল, কিন্তু শুধুমাত্র 11.1 এ সাফারিতে যোগ করা হয়েছিল এবং এখনও IE/Edge এ সমর্থিত নয়. আপনি যদি এই ব্রাউজার সমর্থন করতে চান, ব্যবহার করুন <link rel= "dns-prefetch" /> জন্য একটি ব্যাকআপ বিকল্প হিসাবে <link rel= "preconnect">.
• আপনি 4-6টির বেশি ডোমেনে সংযোগের গতি বাড়াতে চান. ট্যাগ <link rel= "preconnect"> এটি 4-6টির বেশি ডোমেনের সাথে ব্যবহার করার পরামর্শ দেওয়া হয় না, যেহেতু সংযোগ স্থাপন এবং বজায় রাখা একটি ব্যয়বহুল অপারেশন। <link rel= "dns-prefetch" /> কম সম্পদ খরচ করে, তাই প্রয়োজন হলে এটি ব্যবহার করুন।

বিস্তারিত দেখুন

ঐচ্ছিক ট্যাগ. ব্রাউজারটির এই নির্দেশনা অনুসরণ করার প্রয়োজন নেই, তাই এটি DNS রেজোলিউশন সম্পাদন করতে পারে না, উদাহরণস্বরূপ, যদি পৃষ্ঠায় বা অন্য কোনো ক্ষেত্রে এরকম অনেক ট্যাগ থাকে।

DNS কি. ইন্টারনেটের প্রতিটি সার্ভারের একটি অনন্য আইপি ঠিকানা রয়েছে, যা দেখতে কেমন 216.58.215.78. সাইটের নাম সাধারণত ব্রাউজারের ঠিকানা বারে প্রবেশ করা হয় (উদাহরণস্বরূপ, google.com), এবং DNS (ডোমেন নেম সিস্টেম) সার্ভারগুলি সার্ভারের আইপি ঠিকানার সাথে মেলে (216.58.215.78).

একটি আইপি ঠিকানা নির্ধারণ করতে, ব্রাউজারকে অবশ্যই DNS সার্ভারকে জিজ্ঞাসা করতে হবে। একটি নতুন তৃতীয় পক্ষের ডোমেনে সংযোগ করার সময় এটি 20−120 ms লাগে৷

DNS ক্যাশে করা হয়, যদিও খুব নির্ভরযোগ্য নয়. কিছু ওএস এবং ব্রাউজার ডিএনএস কোয়েরি ক্যাশে করে: এটি বারবার কোয়েরিতে সময় বাঁচাবে, কিন্তু ক্যাশিং এর উপর নির্ভর করা যাবে না। লিনাক্সে এটি সাধারণত কাজ করে না। Chrome-এর একটি 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 পৃষ্ঠা এবং এর সমস্ত সংস্থান লোড করে, কিন্তু জাভাস্ক্রিপ্ট রেন্ডার বা চালায় না।

Firefox এবং Safari এই ট্যাগটি মোটেও সমর্থন করে না। এটি স্পেসিফিকেশন লঙ্ঘন করে না, যেহেতু ব্রাউজারদের এই নির্দেশনা অনুসরণ করার প্রয়োজন নেই; কিন্তু এখনও দু: খিত। বাস্তবায়ন বাগ ফায়ারফক্স সাত বছর ধরে খোলা আছে। সাফারি বলে জানা গেছে এই ট্যাগটিও সমর্থন করে না.

সারাংশ

ব্যবহার করুন:

• <link rel= "preload"> - যখন আপনার কয়েক সেকেন্ডের মধ্যে একটি সংস্থান প্রয়োজন
• <link rel= "prefetch"> - যখন আপনার পরবর্তী পৃষ্ঠায় সম্পদের প্রয়োজন হবে
• <link rel= "preconnect"> - যখন আপনি জানেন যে আপনার শীঘ্রই একটি সম্পদের প্রয়োজন হবে, কিন্তু আপনি এখনও এটির সম্পূর্ণ URL জানেন না
• <link rel= "dns-prefetch"> - একইভাবে, যখন আপনি জানেন যে আপনার শীঘ্রই একটি সংস্থানের প্রয়োজন হবে, কিন্তু আপনি এখনও এটির সম্পূর্ণ URL জানেন না (পুরনো ব্রাউজারগুলির জন্য)
• <link rel= "prerender"> — যখন আপনি নিশ্চিত হন যে ব্যবহারকারীরা একটি নির্দিষ্ট পৃষ্ঠায় যাবেন এবং আপনি এর প্রদর্শনের গতি বাড়াতে চান৷

উত্স: www.habr.com