ভবিষ্যত নেভিগেশন গতি বাড়াতে সম্পদ প্রিফেচ করুন

rel=prefetch রিসোর্স ইঙ্গিত এবং এটি কীভাবে ব্যবহার করবেন সে সম্পর্কে জানুন।

ডেমিয়ান রেনজুলি
Demián Renzulli
X GitHub Glitch
জেরেমি ওয়াগনার
Jeremy Wagner
GitHub LinkedIn

প্রকাশিত: সেপ্টেম্বর 12, 2019, শেষ আপডেট: ফেব্রুয়ারী 8, 2025

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

এই নির্দেশিকাটি ব্যাখ্যা করে যে কিভাবে <link rel=prefetch> এর মাধ্যমে এটি অর্জন করা যায় যা আপনাকে একটি দক্ষ উপায়ে প্রিফেচিং বাস্তবায়ন করতে দেয়।

rel=prefetch এর মাধ্যমে সাইটের কর্মক্ষমতা উন্নত করুন

একটি ওয়েব পৃষ্ঠায় <link rel=prefetch> যোগ করা ব্রাউজারকে কিছু সংস্থান (যেমন স্ক্রিপ্ট বা CSS ফাইল) ডাউনলোড করতে বলে, যা ব্যবহারকারীর ভবিষ্যতে প্রয়োজন হতে পারে:

<link rel="prefetch" href="/css/styles.css">

prefetch ইঙ্গিতটি রিসোর্সগুলির জন্য অতিরিক্ত বাইট ব্যবহার করে যা অবিলম্বে প্রয়োজন হয় না, তাই এই কৌশলটি ভেবেচিন্তে প্রয়োগ করা প্রয়োজন; শুধুমাত্র প্রিফেচ রিসোর্স যখন আপনি নিশ্চিত হন যে ব্যবহারকারীদের তাদের প্রয়োজন হবে। ব্যবহারকারীরা যখন ধীর সংযোগে থাকে তখন প্রিফেচিং না করার কথা বিবেচনা করুন। আপনি নেটওয়ার্ক ইনফরমেশন এপিআই এর মাধ্যমে এটি সনাক্ত করতে পারেন।

কেস ব্যবহার করুন

আগে থেকেই রিসোর্স ডাউনলোড করে ওয়েব পৃষ্ঠার গতি বাড়ানোর জন্য প্রিফেচ-এর অনেকগুলি ব্যবহার আছে।

পরবর্তী পৃষ্ঠাগুলি প্রিফেচ করুন

পরবর্তী পৃষ্ঠাগুলি অনুমানযোগ্য হলে HTML নথিগুলি প্রিফেচ করুন, যাতে একটি লিঙ্কে ক্লিক করা হলে, পৃষ্ঠাটি সঙ্গে সঙ্গে লোড হয়৷

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

প্রিফেচিং রিসোর্স অতিরিক্ত ব্যান্ডউইথ ব্যবহার করে, এটি বেশিরভাগ কর্মক্ষমতা মেট্রিক্স উন্নত করতে পারে। টাইম টু ফার্স্ট বাইট (TTFB) প্রায়শই অনেক কম হবে, কারণ ডকুমেন্ট অনুরোধের ফলে ক্যাশে হিট হয়। যেহেতু TTFB কম হবে, পরবর্তী সময়-ভিত্তিক মেট্রিকগুলিও প্রায়ই কম হবে, যার মধ্যে রয়েছে Largest Contentful Paint (LCP) এবং First Contentful Paint (FCP) ।

স্ট্যাটিক সম্পদ প্রিফেচ করুন

স্ক্রিপ্ট বা স্টাইলশীটের মতো স্ট্যাটিক অ্যাসেটগুলি প্রিফেচ করুন, যখন পরবর্তী বিভাগগুলি ব্যবহারকারী দেখতে পারে তার পূর্বাভাস দেওয়া যেতে পারে। এটি বিশেষভাবে উপযোগী হয় যখন সেই সম্পদগুলো অনেক পৃষ্ঠায় শেয়ার করা হয়।

উদাহরণস্বরূপ, Netflix ব্যবহারকারীরা লগ-আউট পৃষ্ঠাগুলিতে যে সময় ব্যয় করে তার সদ্ব্যবহার করে প্রতিক্রিয়া প্রিফেচ করতে, যা ব্যবহারকারীরা সাইন ইন করার পরে ব্যবহার করা হবে। এর জন্য ধন্যবাদ, তারা ভবিষ্যতে নেভিগেশনের জন্য ইন্টারেক্টিভের সময় 30% কমিয়েছে ।

পারফরম্যান্স মেট্রিক্সে স্ট্যাটিক অ্যাসেট প্রিফেচ করার প্রভাব প্রিফেচ করা রিসোর্সের উপর নির্ভর করে:

  • প্রিফেচিং ইমেজ এলসিপি ইমেজ এলিমেন্টের জন্য উল্লেখযোগ্যভাবে LCP বার কমিয়ে দিতে পারে।
  • স্টাইলশীট প্রিফেচ করা FCP এবং LCP উভয়ের উন্নতি করতে পারে, কারণ স্টাইল শীট ডাউনলোড করার জন্য নেটওয়ার্ক সময় শেষ হয়ে যাবে। যেহেতু স্টাইলশীট রেন্ডার ব্লকিং, তাই প্রিফেচ করা হলে তারা LCP কমাতে পারে। যে ক্ষেত্রে পরবর্তী পৃষ্ঠার LCP উপাদান হল একটি CSS ব্যাকগ্রাউন্ড ইমেজ যা background-image প্রপার্টি ব্যবহার করে অনুরোধ করা হয়েছে, সেই ক্ষেত্রে ইমেজটি প্রিফেচ করা স্টাইল শীটের নির্ভরশীল সম্পদ হিসেবেও প্রিফেচ করা হবে।
  • জাভাস্ক্রিপ্টের প্রিফেচিং প্রিফেচড স্ক্রিপ্টের প্রক্রিয়াকরণকে নেভিগেশনের সময় প্রথমে নেটওয়ার্ক দ্বারা আনার প্রয়োজন হলে তার চেয়ে অনেক তাড়াতাড়ি ঘটতে দেয়৷ এটি একটি পৃষ্ঠার ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) এর উপর প্রভাব ফেলতে পারে। যেসব ক্ষেত্রে জাভাস্ক্রিপ্ট ব্যবহার করে ক্লায়েন্টে মার্কআপ রেন্ডার করা হয়, সেখানে রিসোর্স লোড বিলম্বের মাধ্যমে LCP উন্নত করা যেতে পারে এবং পৃষ্ঠার LCP উপাদান ধারণকারী মার্কআপের ক্লায়েন্ট-সাইড রেন্ডারিং তাড়াতাড়ি ঘটতে পারে।
  • বর্তমান পৃষ্ঠার দ্বারা ইতিমধ্যে ব্যবহৃত নয় এমন ওয়েব ফন্টগুলিকে প্রিফেচ করা লেআউট পরিবর্তনগুলিকে বাদ দিতে পারে৷ ক্ষেত্রে যেখানে font-display: swap; ব্যবহার করা হয় , ফন্টের অদলবদল সময়কাল বাদ দেওয়া হয়, যার ফলে টেক্সট দ্রুত রেন্ডারিং হয় এবং লেআউট পরিবর্তনগুলি বাদ দেওয়া হয়। যদি ভবিষ্যতের পৃষ্ঠাটি প্রিফেচড ফন্ট ব্যবহার করে এবং পৃষ্ঠার LCP উপাদানটি একটি ওয়েব ফন্ট ব্যবহার করে পাঠ্যের একটি ব্লক হয়, তাহলে সেই উপাদানটির জন্য LCPও দ্রুত হবে৷

অন-ডিমান্ড জাভাস্ক্রিপ্ট খণ্ড প্রিফেচ করুন

আপনার জাভাস্ক্রিপ্ট বান্ডিলগুলিকে কোড-বিভক্ত করার ফলে আপনি প্রাথমিকভাবে একটি অ্যাপের শুধুমাত্র কিছু অংশ লোড করতে পারবেন এবং বাকি অংশগুলি অলসভাবে লোড করতে পারবেন। আপনি যদি এই কৌশলটি ব্যবহার করেন তবে আপনি এমন রুট বা উপাদানগুলিতে প্রিফেচ প্রয়োগ করতে পারেন যা অবিলম্বে প্রয়োজনীয় নয় তবে সম্ভবত শীঘ্রই অনুরোধ করা হবে।

উদাহরণস্বরূপ, আপনার যদি এমন একটি পৃষ্ঠা থাকে যেখানে একটি বোতাম রয়েছে যা একটি ডায়ালগ খোলে যেখানে একটি ইমোজি পিকার রয়েছে, আপনি এটিকে তিনটি জাভাস্ক্রিপ্ট খণ্ডে ভাগ করতে পারেন—হোম, ডায়ালগ এবং পিকার৷ হোম এবং ডায়ালগ প্রাথমিকভাবে লোড করা যেতে পারে, যখন পিকার চাহিদা অনুযায়ী লোড করা যেতে পারে। ওয়েবপ্যাকের মতো সরঞ্জামগুলি আপনাকে এই অন-ডিমান্ড অংশগুলি প্রিফেচ করার জন্য ব্রাউজারকে নির্দেশ দেওয়ার অনুমতি দেয়।

কিভাবে rel=prefetch বাস্তবায়ন করবেন

prefetch বাস্তবায়নের সবচেয়ে সহজ উপায় হল নথির <head> এ একটি <link> ট্যাগ যোগ করা:

<head>
  ...
  <link rel="prefetch" href="//css/styles.css">
  ...
</head>

আপনি Link HTTP শিরোনাম দিয়ে প্রিফেচিং শুরু করতে পারেন:

Link: </css/style.css>; rel=prefetch

HTTP শিরোনামে একটি প্রিফেচ ইঙ্গিত নির্দিষ্ট করার একটি সুবিধা হল যে সংস্থান ইঙ্গিত খুঁজে পেতে ব্রাউজারকে নথিটি পার্স করার প্রয়োজন নেই, যা কিছু ক্ষেত্রে ছোট উন্নতি করতে পারে।

ওয়েবপ্যাক ম্যাজিক মন্তব্য সহ জাভাস্ক্রিপ্ট মডিউল প্রিফেচ করুন

ওয়েবপ্যাক আপনাকে এমন রুট বা ফাংশনগুলির জন্য স্ক্রিপ্টগুলি প্রিফেচ করতে দেয় যা আপনি যুক্তিসঙ্গতভাবে নির্দিষ্ট ব্যবহারকারীরা দেখতে পাবেন বা শীঘ্রই ব্যবহার করবেন৷

নিম্নলিখিত কোড স্নিপেট অলস- লোডশ লাইব্রেরি থেকে একটি বাছাই ফাংশন লোড করে একটি ফর্মের মাধ্যমে জমা দেওয়া সংখ্যার একটি গ্রুপ সাজানোর জন্য:

form.addEventListener("submit", e => {
  e.preventDefault()
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

এই ফাংশনটি লোড করার জন্য 'জমা দিন' ইভেন্ট হওয়ার জন্য অপেক্ষা করার পরিবর্তে, আপনি এই সংস্থানটি প্রিফেচ করতে পারেন যাতে ব্যবহারকারী ফর্মটি জমা দেওয়ার সময় ক্যাশে এটি উপলব্ধ হওয়ার সম্ভাবনা বাড়ায়। webpack import() ভিতরে যাদু মন্তব্য ব্যবহার করার অনুমতি দেয়:

form.addEventListener("submit", e => {
   e.preventDefault()
   import(/* webpackPrefetch: true */ 'lodash.sortby')
         .then(module => module.default)
         .then(sortInput())
         .catch(err => { alert(err) });
});

এটি ওয়েবপ্যাককে HTML নথিতে <link rel="prefetch"> ট্যাগ ইনজেক্ট করতে বলে:

<link rel="prefetch" href="1.bundle.js">

অন-ডিমান্ড অংশগুলি প্রিফেচ করার কার্যকারিতা সুবিধাগুলি কিছুটা সংক্ষিপ্ত, তবে সাধারণভাবে বলতে গেলে, আপনি মিথস্ক্রিয়াগুলিতে দ্রুত প্রতিক্রিয়া দেখতে আশা করতে পারেন যা সেই চাহিদার অংশগুলির উপর নির্ভর করে, কারণ সেগুলি অবিলম্বে উপলব্ধ হবে৷ মিথস্ক্রিয়া প্রকৃতির উপর নির্ভর করে, এটি একটি পৃষ্ঠার INP-এ একটি সুবিধা প্রদান করতে পারে।

সাধারণভাবে প্রিফেচিং সামগ্রিক সম্পদ অগ্রাধিকারের কারণও করে। যখন একটি সংস্থান প্রিফেচ করা হয়, এটি সর্বনিম্ন সম্ভাব্য অগ্রাধিকারে করা হয়। সুতরাং, বর্তমান পৃষ্ঠার জন্য প্রয়োজনীয় সংস্থানগুলির জন্য যেকোন প্রিফেচ করা সংস্থানগুলি ব্যান্ডউইথের জন্য বিরোধ করবে না৷

আপনি হুডের নীচে prefetch ব্যবহার করে এমন লাইব্রেরিগুলির সাথে আরও স্মার্ট প্রিফেচিং প্রয়োগ করতে পারেন:

Quicklink এবং Guess.js উভয়ই নেটওয়ার্ক ইনফরমেশন API ব্যবহার করে যদি কোনো ব্যবহারকারী ধীরগতির নেটওয়ার্কে থাকে বা Save-Data চালু থাকে তাহলে প্রিফেচিং এড়াতে।

হুড অধীনে প্রিফেচ

রিসোর্স ইঙ্গিতগুলি বাধ্যতামূলক নির্দেশাবলী নয় এবং এটি ব্রাউজারের উপর নির্ভর করে যে সেগুলি কার্যকর করা হবে কিনা এবং কখন।

আপনি একই পৃষ্ঠায় একাধিকবার প্রিফেচ ব্যবহার করতে পারেন। ব্রাউজারটি সমস্ত ইঙ্গিত সারিবদ্ধ করে এবং প্রতিটি সংস্থান যখন নিষ্ক্রিয় থাকে তখন অনুরোধ করে৷ Chrome-এ, যদি একটি প্রিফেচ লোডিং শেষ না করে এবং ব্যবহারকারী নির্ধারিত প্রিফেচ রিসোর্সে নেভিগেট করে, তবে ইন-ফ্লাইট লোড ব্রাউজার দ্বারা নেভিগেশন হিসাবে তোলা হয় (অন্যান্য ব্রাউজার বিক্রেতারা এটি ভিন্নভাবে প্রয়োগ করতে পারে)।

প্রিফেচিং 'সর্বনিম্ন' অগ্রাধিকারে সঞ্চালিত হয়, তাই প্রিফেচ করা সংস্থানগুলি বর্তমান পৃষ্ঠায় প্রয়োজনীয় সংস্থানগুলির সাথে ব্যান্ডউইথের জন্য প্রতিযোগিতা করে না৷

প্রিফেচ করা ফাইলগুলি HTTP ক্যাশে সংরক্ষণ করা হয় যদি সম্পদ ক্যাশেযোগ্য হয়, অন্যথায় এটি বাতিল করা হবে এবং ব্যবহার করা হবে না।

উপসংহার

prefetch ব্যবহার করে ভবিষ্যতে প্রয়োজনীয় রিসোর্স আগে থেকে ডাউনলোড করে একটি সাইটের ওয়েব পারফরম্যান্সের ব্যাপক উন্নতি ঘটাতে পারে। prefetch বেশিরভাগ আধুনিক ব্রাউজারে সমর্থিত। এই কৌশলটির জন্য অতিরিক্ত বাইট লোড করা প্রয়োজন যা ব্যবহার করা যাবে না, তাই আপনি এটি ব্যবহার করার সময় সতর্ক থাকুন; শুধুমাত্র প্রয়োজন হলেই এটি করুন, এবং আদর্শভাবে, শুধুমাত্র দ্রুত নেটওয়ার্কে।