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

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

Demián Renzulli

Jeremy Wagner

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

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

rel=prefetch দিয়ে নেভিগেশন উন্নত করুন

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

<link rel="prefetch" href="/articles/" as="document">

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="/articles/" as="document">
  ...
</head>

as বৈশিষ্ট্যটি ব্রাউজারকে সঠিক শিরোনাম সেট করতে এবং সংস্থানটি ইতিমধ্যে ক্যাশে রয়েছে কিনা তা নির্ধারণ করতে সহায়তা করে। এই বৈশিষ্ট্যের উদাহরণ মানগুলির মধ্যে রয়েছে: document , script , style , font , image এবং অন্যান্য ।

আপনি 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" as="script" href="1.bundle.js">

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

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

Quicklink এবং Guess.js সহ স্মার্ট প্রিফেচিং

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

• ভিউপোর্টে কখন লিঙ্কগুলি আসে এবং নিষ্ক্রিয় সময়ে লিঙ্কযুক্ত সংস্থানগুলি প্রিফেচ করে তা সনাক্ত করতে Quicklink ইন্টারসেকশন অবজারভার API ব্যবহার করে। বোনাস: কুইকলিংকের ওজন 1 KB এর কম!
• Guess.js একটি ভবিষ্যদ্বাণীমূলক মডেল তৈরি করতে বিশ্লেষণ প্রতিবেদনগুলি ব্যবহার করে যা ব্যবহারকারীর সম্ভবত যা প্রয়োজন তা স্মার্টভাবে প্রিফেচ করতে ব্যবহৃত হয়।

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

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

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

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

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

প্রিফেচ করা ফাইলগুলি HTTP ক্যাশে , বা মেমরি ক্যাশে (সম্পদ ক্যাশেযোগ্য কিনা তার উপর নির্ভর করে), ব্রাউজার দ্বারা পরিবর্তিত সময়ের জন্য সংরক্ষণ করা হয়। উদাহরণস্বরূপ, ক্রোমে সংস্থানগুলি প্রায় পাঁচ মিনিটের জন্য রাখা হয়, এর পরে সংস্থানের জন্য সাধারণ Cache-Control নিয়মগুলি প্রযোজ্য হয়৷

উপসংহার

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