এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

Fetch Priority API-এর মাধ্যমে রিসোর্স লোডিং অপ্টিমাইজ করা হচ্ছে

ফেচ অগ্রাধিকার API ব্রাউজারে সম্পদের আপেক্ষিক অগ্রাধিকার নির্দেশ করে। এটি সর্বোত্তম লোডিং সক্ষম করতে পারে এবং কোর ওয়েব ভাইটালগুলি উন্নত করতে পারে।

Addy Osmani

Leena Sohoni

Patrick Meenan

Barry Pollard

ব্রাউজার সমর্থন

102
102
এক্স
17.2

উৎস

যখন একটি ব্রাউজার একটি ওয়েব পৃষ্ঠা পার্স করে এবং ছবি, স্ক্রিপ্ট বা CSS এর মতো সংস্থানগুলি আবিষ্কার এবং ডাউনলোড করতে শুরু করে, তখন এটি একটি সর্বোত্তম ক্রমে সংস্থানগুলি ডাউনলোড করার প্রয়াসে তাদের একটি priority প্রদান করে৷ এই অগ্রাধিকারগুলি সম্পদের ধরণের উপর নির্ভর করতে পারে এবং এটি নথিতে কোথায় রয়েছে। উদাহরণস্বরূপ, ইন-ভিউপোর্ট ইমেজগুলির একটি High অগ্রাধিকার থাকতে পারে যখন প্রথম দিকে লোড হওয়া, রেন্ডার-ব্লকিং CSS-এর <head> -এ <link> s এর মাধ্যমে অগ্রাধিকার Very High হতে পারে। ব্রাউজারগুলি অগ্রাধিকারগুলি বরাদ্দ করতে বেশ ভাল যা ভাল কাজ করে তবে সব ক্ষেত্রে সর্বোত্তম নাও হতে পারে।

এই নিবন্ধে, আমরা Fetch Priority API এবং fetchpriority HTML অ্যাট্রিবিউট নিয়ে আলোচনা করব, যা আপনাকে একটি রিসোর্সের আপেক্ষিক অগ্রাধিকার ( high বা low ) নির্দেশ করতে দেয়। ফেচ প্রায়োরিটি কোর ওয়েব ভাইটাল অপ্টিমাইজ করতে সাহায্য করতে পারে।

সারসংক্ষেপ

কয়েকটি মূল ক্ষেত্র যেখানে আনয়ন অগ্রাধিকার সাহায্য করতে পারে:

ইমেজ এলিমেন্টে fetchpriority="high" উল্লেখ করে LCP ছবির অগ্রাধিকার বাড়ান, যার ফলে LCP তাড়াতাড়ি ঘটতে পারে।
সাধারণভাবে ব্যবহৃত বর্তমান হ্যাকের চেয়ে ভালো শব্দার্থবিদ্যা ব্যবহার করে async স্ক্রিপ্টের অগ্রাধিকার বাড়ান ( async স্ক্রিপ্টের জন্য একটি <link rel="preload"> সন্নিবেশ করানো)।
লেট-বডি স্ক্রিপ্টগুলির অগ্রাধিকার হ্রাস করুন যাতে ছবিগুলির সাথে আরও ভাল সিকোয়েন্সিং করা যায়।

Google Flights হোমপেজের দুটি পরীক্ষার তুলনা করে একটি ফিল্মস্ট্রিপ ভিউ। নীচে, হিরো ইমেজের অগ্রাধিকার বাড়াতে Fetch Priority ব্যবহার করা হয়, যার ফলে LCP 0.7 সেকেন্ড কমে যায়। — Google Flights-এর পরীক্ষায় 2.6 s থেকে 1.9 s পর্যন্ত সবচেয়ে বড় কন্টেন্টফুল পেইন্টের উন্নতি করে অগ্রাধিকার আনুন

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

ফেচ অগ্রাধিকার হল একটি মার্কআপ-ভিত্তিক সংকেত ( fetchpriority অ্যাট্রিবিউটের মাধ্যমে উপলব্ধ) যা ডেভেলপাররা একটি নির্দিষ্ট সংস্থানের আপেক্ষিক অগ্রাধিকার নির্দেশ করতে ব্যবহার করতে পারেন। আপনি এই ইঙ্গিতগুলি JavaScript এবং Fetch API-এর মাধ্যমে ডেটার জন্য তৈরি রিসোর্স ফেচের অগ্রাধিকারকে প্রভাবিত করতে priority সম্পত্তি সহ ব্যবহার করতে পারেন। আনয়ন অগ্রাধিকার এছাড়াও প্রিলোড পরিপূরক হতে পারে. একটি বৃহৎ কন্টেন্টফুল পেইন্ট ইমেজ নিন, যা প্রিলোড হয়ে গেলেও কম অগ্রাধিকার পাবে। যদি এটিকে অন্যান্য প্রাথমিক নিম্ন-অগ্রাধিকার সংস্থান দ্বারা পিছনে ঠেলে দেওয়া হয়, তবে ফেচ অগ্রাধিকার ব্যবহার করে কত তাড়াতাড়ি ছবি লোড হবে তা সাহায্য করতে পারে৷

আনয়ন অগ্রাধিকার Chrome 101 বা তার পরে উপলব্ধ ।

সম্পদ অগ্রাধিকার

রিসোর্স ডাউনলোড সিকোয়েন্স পৃষ্ঠার প্রতিটি রিসোর্সের জন্য ব্রাউজারের নির্ধারিত অগ্রাধিকারের উপর নির্ভর করে। বিভিন্ন কারণ অগ্রাধিকার গণনা যুক্তি প্রভাবিত করতে পারে. উদাহরণ স্বরূপ,

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

নিম্নলিখিত সারণীতে এই ধরনের বিষয়গুলিকে দেখানো হয়েছে যেগুলি দেখাতে যে কীভাবে বেশিরভাগ সংস্থানগুলি বর্তমানে Chrome-এ অগ্রাধিকার এবং ক্রমানুসারে রয়েছে৷

এই টেবিলটি কিভাবে পড়তে হয় তার উদাহরণ:

প্রারম্ভিক CSS (অর্থাৎ <head> এ CSS) ডিফল্টভাবে highest এবং বিন্যাস ব্লক করে।
দেরীতে CSS (অর্থাৎ <body> এর মাঝখানে CSS), প্রাথমিক লেআউটটিকে ব্লক করে না, ব্রাউজারটি এই লেআউট-ব্লকিং পর্যায়ে থাকাকালীন সমস্ত লোড হয় না এবং পরিবর্তে অন্যের সাথে শুধুমাত্র একবারে লোড হয় রিসোর্স যতক্ষণ না ব্রাউজার লেআউট-ব্লকিং ফেজ থেকে বেরিয়ে আসে—ব্রাউজারকে আরও গুরুত্বপূর্ণ রিসোর্সে মনোনিবেশ করার অনুমতি দিতে।
নন-ম্যাচিং CSS (যেমন media="print" স্টাইলশীট স্ক্রিন ব্যবহার করার সময়) lowest অগ্রাধিকার দিয়ে লোড করা হয়।

টেবিল পাদটীকা আরো ব্যাখ্যা আছে.

	লেআউট-ব্লকিং পর্বে লোড করুন		লেআউট-ব্লকিং পর্যায়ে এক-এক সময়ে লোড করুন
পলক অগ্রাধিকার	সুউচ্চ	উচ্চ	মধ্যম	কম	খুবই নিন্ম
DevTools অগ্রাধিকার	সর্বোচ্চ	উচ্চ	মধ্যম	কম	সর্বনিম্ন
	প্রধান সম্পদ
	CSS (প্রাথমিক**)		CSS (দেরিতে**)		CSS (মিডিয়া অমিল**)
		স্ক্রিপ্ট (প্রিলিতে** বা প্রিলোড স্ক্যানার থেকে নয়)	স্ক্রিপ্ট (দেরিতে**)	স্ক্রিপ্ট (অসিঙ্ক)
	হরফ	হরফ (rel=preload)
		আমদানি
		ছবি (ভিউপোর্টে)	ছবি (প্রথম 5টি ছবি > 10,000px2)	ছবি
				মিডিয়া (ভিডিও/অডিও)
					প্রিফেচ
		এক্সএসএল
	XHR (সিঙ্ক)	এক্সএইচআর/ফেচ* (অসিঙ্ক)

মন্তব্য:
* "as" ব্যবহার করে প্রিলোড করুন বা একটি নির্দিষ্ট "destination" ব্যবহার করে আনুন তাদের অনুরোধ করা গন্তব্যের অগ্রাধিকার ব্যবহার করুন। উদাহরণস্বরূপ, preload as="style" সর্বোচ্চ অগ্রাধিকার ব্যবহার করবে। কোনো সুস্পষ্ট গন্তব্য ছাড়াই, আনয়নকে একটি async XHR এর মতো অগ্রাধিকার দেওয়া হবে।
** "প্রাথমিক" কোনো অ-প্রিলোড করা ছবি অনুরোধ করার আগে অনুরোধ করা হিসাবে সংজ্ঞায়িত করা হয় ("দেরী" পরে)।
*** CSS যেখানে মিডিয়া টাইপ মেলে না তা প্রিলোড স্ক্যানার দ্বারা আনা হয় না এবং শুধুমাত্র তখনই প্রক্রিয়া করা হয় যখন মূল পার্সার এটিতে পৌঁছায়, যার মানে সাধারণত এটি খুব দেরিতে আনা হবে।

ডিফল্টভাবে ছবিগুলি "নিম্ন" অগ্রাধিকার থেকে শুরু হয় এবং তারপরে লেআউটের সময় ভিউপোর্টের মধ্যে থাকলে "উচ্চ" এ বুস্ট করা হয়। ক্রোম 117-এর হিসাবে, প্রথম 5টি বড় ছবিকে "মাঝারি" এ সেট করা হয়েছে এটিকে গতি বাড়ানোর জন্য এবং এর মধ্যে দুটি প্রাথমিক "টাইট মোড" চলাকালীন সমান্তরালভাবে আনা যেতে পারে। fetchpriority="high" ব্যবহার করে মার্কআপে গুরুত্বপূর্ণ ছবি ট্যাগ করার মাধ্যমে, তারা অবিলম্বে "High" এ শুরু করতে পারে এবং অনেক দ্রুত লোড হতে পারে।

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

Chrome-এর DevTools-এর নেটওয়ার্ক ট্যাবে তালিকাভুক্ত সম্পদগুলির একটি স্ক্রিনশট৷ কলামগুলি পড়ে, বাম থেকে ডানে: নাম, স্থিতি, প্রকার, সূচনাকারী, আকার, সময় এবং অগ্রাধিকার৷ — বিবিসি নিউজ ডিটেইল পেজে রিসোর্স `type = "font"` এর জন্য অগ্রাধিকার

যেখানে অগ্রাধিকার পরিবর্তন হয়, আপনি প্রাথমিক এবং চূড়ান্ত উভয় অগ্রাধিকার দেখতে বড় অনুরোধ সারি সেটিং ব্যবহার করতে পারেন। বড় অনুরোধ সারি সেটিং নির্বিশেষে একটি টুলটিপে একই দেখানো হয়।

Chrome-এর DevTools-এর নেটওয়ার্ক ট্যাবে তালিকাভুক্ত সম্পদগুলির একটি স্ক্রিনশট৷ 'বড় অনুরোধের সারি' সেটিংটিতে টিক দেওয়া হয়েছে এবং অগ্রাধিকার কলামটি প্রথম চিত্রটিকে উচ্চ অগ্রাধিকারের সাথে এবং নীচের মধ্যমটির একটি ভিন্ন প্রাথমিক অগ্রাধিকার দেখায়। একই টুলটিপে দেখানো হয়েছে। — DevTools-এ প্রাথমিক এবং চূড়ান্ত উভয় অগ্রাধিকার দেখা হচ্ছে

আপনি কখন আনয়ন অগ্রাধিকার প্রয়োজন হবে?

ব্রাউজারের অগ্রাধিকারের যুক্তির জ্ঞান আপনাকে ডাউনলোডের ক্রম পরিবর্তন করতে কয়েকটি বিদ্যমান নব প্রদান করে। তুমি পারবে

আপনি যে অর্ডারটি ডাউনলোড করতে চান তার উপর নির্ভর করে রিসোর্স ট্যাগ রাখুন যেমন <script> এবং <link> । একই অগ্রাধিকার সহ সম্পদগুলি সাধারণত লোড করা হয় যে ক্রমে সেগুলি আবিষ্কৃত হয়।
প্রয়োজনীয় রিসোর্স আগে ডাউনলোড করতে preload রিসোর্স হিন্ট ব্যবহার করুন , বিশেষ করে এমন রিসোর্সগুলির জন্য যা ব্রাউজার দ্বারা সহজে আবিষ্কৃত হয় না।
অন্যান্য সংস্থানগুলিকে ব্লক না করে স্ক্রিপ্টগুলি ডাউনলোড করতে async ব্যবহার করুন বা defer ৷
ভাঁজের নিচের বিষয়বস্তু অলস-লোড করুন যাতে ব্রাউজারটি ভাঁজের উপরে-উপরের সম্পদের জন্য আরও গুরুত্বপূর্ণ ব্যান্ডউইথ ব্যবহার করতে পারে।

এই কৌশলগুলি ব্রাউজারের অগ্রাধিকার গণনা নিয়ন্ত্রণ করতে সাহায্য করে, যার ফলে কর্মক্ষমতা এবং কোর ওয়েব ভাইটালগুলি উন্নত হয়। উদাহরণস্বরূপ, যখন একটি সমালোচনামূলক ব্যাকগ্রাউন্ড ইমেজ প্রিলোড করা হয়, তখন এটি অনেক আগে আবিষ্কার করা যেতে পারে, যা সবচেয়ে বড় কন্টেন্টফুল পেইন্ট ( LCP ) উন্নত করে।

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

আপনার কাছে অনেকগুলি উপরের-ভাঁজের চিত্র রয়েছে, তবে সেগুলির সবকটিরই একই অগ্রাধিকারের প্রয়োজন নেই৷ উদাহরণস্বরূপ, একটি ইমেজ ক্যারাউজেলে, শুধুমাত্র প্রথম দৃশ্যমান ইমেজটিকে অন্যদের তুলনায় উচ্চ অগ্রাধিকার প্রয়োজন।
ভিউপোর্টের অভ্যন্তরে হিরো ছবিগুলি সাধারণত "নিম্ন" অগ্রাধিকারে শুরু হয় (মনে রাখবেন Chrome 117-এ একটি পরিবর্তন প্রথম পাঁচটি বড় ছবিকে "মাঝারি" তে সেট করে তবে এতে আপনার নায়কের ছবি অন্তর্ভুক্ত হতে পারে বা নাও থাকতে পারে)। লেআউট সম্পূর্ণ হওয়ার পরে, Chrome আবিষ্কার করে যে তারা ভিউপোর্টে রয়েছে এবং তাদের অগ্রাধিকার বাড়ায়। এটি সাধারণত ইমেজ লোড করতে একটি উল্লেখযোগ্য বিলম্ব যোগ করে। মার্কআপে আনয়ন অগ্রাধিকার প্রদান করলে ছবিকে "উচ্চ" অগ্রাধিকারে শুরু হতে দেয় এবং অনেক আগে লোড করা শুরু হয়৷

মনে রাখবেন যে CSS ব্যাকগ্রাউন্ড হিসাবে অন্তর্ভুক্ত LCP চিত্রগুলির প্রাথমিক আবিষ্কারের জন্য প্রিলোড এখনও প্রয়োজন এবং প্রিলোডে fetchpriority='high' অন্তর্ভুক্ত করে ফেচ অগ্রাধিকারের সাথে একত্রিত করা যেতে পারে, অন্যথায় এটি এখনও "নিম্ন" বা "মাঝারি" দিয়ে শুরু হবে ছবির জন্য অগ্রাধিকার।
স্ক্রিপ্টগুলিকে async বা defer হিসাবে ঘোষণা করা ব্রাউজারকে তাদের অ্যাসিঙ্ক্রোনাসভাবে লোড করতে বলে৷ যাইহোক, আগের সারণীতে যেমন দেখা গেছে, এই স্ক্রিপ্টগুলিকেও "নিম্ন" অগ্রাধিকার দেওয়া হয়েছে৷ অ্যাসিঙ্ক্রোনাস ডাউনলোড নিশ্চিত করার সময় আপনি তাদের অগ্রাধিকার বাড়াতে চাইতে পারেন, বিশেষত ব্যবহারকারীর অভিজ্ঞতার জন্য গুরুত্বপূর্ণ যে কোনো স্ক্রিপ্টের জন্য।
আপনি জাভাস্ক্রিপ্ট fetch() API ব্যবহার করতে পারেন অসিঙ্ক্রোনাসভাবে সম্পদ বা ডেটা আনতে। আনয়ন ব্রাউজার দ্বারা একটি "উচ্চ" অগ্রাধিকার বরাদ্দ করা হয়েছে৷ এমন পরিস্থিতি হতে পারে যেখানে আপনি চান না যে আপনার সমস্ত ফেচগুলি "উচ্চ" অগ্রাধিকারের সাথে কার্যকর করা হোক এবং পরিবর্তে ভিন্ন আনয়ন অগ্রাধিকার ব্যবহার করা পছন্দ করুন৷ ব্যাকগ্রাউন্ড এপিআই কল চালানোর সময় এবং স্বয়ংসম্পূর্ণের মতো ব্যবহারকারীর ইনপুটে সাড়া দেয় এমন API কলগুলির সাথে মিশ্রিত করার সময় এটি সহায়ক হতে পারে। ব্যাকগ্রাউন্ড API কলগুলিকে "নিম্ন" অগ্রাধিকার হিসাবে ট্যাগ করা যেতে পারে এবং ইন্টারেক্টিভ API কলগুলিকে "উচ্চ" অগ্রাধিকার হিসাবে চিহ্নিত করা যেতে পারে।
ব্রাউজার CSS এবং ফন্টকে একটি "উচ্চ" অগ্রাধিকার প্রদান করে, কিন্তু এই ধরনের সমস্ত সংস্থান LCP-এর জন্য সমান গুরুত্বপূর্ণ বা প্রয়োজনীয় নাও হতে পারে। আপনি এই সম্পদগুলির কিছুর অগ্রাধিকার কমাতে ফেচ অগ্রাধিকার ব্যবহার করতে পারেন।

`fetchpriority` বৈশিষ্ট্য

আপনি fetchpriority HTML অ্যাট্রিবিউট ব্যবহার করে একটি ফেচ অগ্রাধিকার প্রদান করতে পারেন। আপনি link , img এবং script ট্যাগ সহ বৈশিষ্ট্যটি ব্যবহার করতে পারেন। সমর্থিত ট্যাগগুলি ব্যবহার করে ডাউনলোড করার সময় বৈশিষ্ট্যটি আপনাকে CSS, ফন্ট, স্ক্রিপ্ট এবং চিত্রগুলির মতো সংস্থানগুলির জন্য অগ্রাধিকার নির্দিষ্ট করতে দেয়৷ fetchpriority বৈশিষ্ট্য তিনটি মানগুলির মধ্যে একটি গ্রহণ করে:

high : আপনি সংস্থানটিকে একটি উচ্চ অগ্রাধিকার বিবেচনা করেন এবং ব্রাউজারটিকে এটিকে অগ্রাধিকার দিতে চান যতক্ষণ না ব্রাউজারের হিউরিস্টিকস এটি ঘটতে বাধা দেয় না।
low : আপনি সম্পদটিকে একটি কম অগ্রাধিকার বিবেচনা করেন এবং ব্রাউজার এটিকে বঞ্চিত করতে চান যদি তার হিউরিস্টিক অনুমতি দেয়।
auto : এটি হল ডিফল্ট মান যেখানে আপনার কোন পছন্দ নেই এবং ব্রাউজারকে উপযুক্ত অগ্রাধিকার নির্ধারণ করতে দিন।

এখানে মার্কআপে fetchpriority বৈশিষ্ট্য এবং স্ক্রিপ্ট-সমতুল priority বৈশিষ্ট্য ব্যবহার করার কয়েকটি উদাহরণ রয়েছে।

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">

<script>
  fetch('https://example.com/', {priority: 'low'})
  .then(data => {
    // Trigger a low priority fetch
  });
</script>

ব্রাউজার অগ্রাধিকার এবং `fetchpriority`

আপনি তাদের গণনাকৃত অগ্রাধিকার সম্ভাব্যভাবে বাড়াতে বা কমাতে নিম্নলিখিত চিত্রে দেখানো বিভিন্ন সংস্থানে fetchpriority বৈশিষ্ট্য প্রয়োগ করতে পারেন। প্রতিটি সারিতে fetchpriority="auto" (◉) সেই ধরনের সম্পদের জন্য ডিফল্ট অগ্রাধিকার নির্দেশ করে ( একটি Google ডক হিসাবেও উপলব্ধ)।

এই টেবিলটি কিভাবে পড়তে হয় তার উদাহরণ:

প্রারম্ভিক CSS (অর্থাৎ <head> এ CSS) ডিফল্টভাবে highest (◉)। এমনকি যদি আপনি fetchpriority=high (⬆) ব্যবহার করেন তবে এটি এটিকে আর বাম্প করবে না কারণ এটি যতটা যেতে পারে তত বেশি। এবং যদি আপনি এটিকে fetchpriority=low (⬇) দিয়ে কমিয়ে দেন তবে এটি শুধুমাত্র high থেকে কম হয় —কোনও কম নয়। উভয় ক্ষেত্রেই লেআউট-ব্লকিং পর্বে থাকাকালীন এটি লোড করার যোগ্য।

টেবিল পাদটীকা আরো ব্যাখ্যা আছে.

	লেআউট-ব্লকিং পর্বে লোড করুন		লেআউট-ব্লকিং পর্যায়ে এক-এক সময়ে লোড করুন
পলক অগ্রাধিকার	সুউচ্চ	উচ্চ	মধ্যম	কম	খুবই নিন্ম
DevTools অগ্রাধিকার	সর্বোচ্চ	উচ্চ	মধ্যম	কম	সর্বনিম্ন
প্রধান সম্পদ	◉
CSS (প্রাথমিক**)	⬆◉	⬇
CSS (দেরিতে**)		⬆	◉	⬇
CSS (মিডিয়া অমিল**)		⬆***			◉⬇
স্ক্রিপ্ট (প্রিলিতে** বা প্রিলোড স্ক্যানার থেকে নয়)		⬆◉		⬇
স্ক্রিপ্ট (দেরিতে**)		⬆	◉	⬇
স্ক্রিপ্ট (async/defer)		⬆		◉⬇
হরফ	◉
হরফ (rel=preload)		⬆◉		⬇
আমদানি		◉
ছবি (ভিউপোর্টে - লেআউটের পরে)		⬆◉		⬇
ছবি (প্রথম 5টি ছবি > 10,000px2)		⬆	◉	⬇
ছবি		⬆		◉⬇
মিডিয়া (ভিডিও/অডিও)				◉
XHR (সিঙ্ক) - অবহেলিত	◉
এক্সএইচআর/ফেচ* (অসিঙ্ক)		⬆◉		⬇
প্রিফেচ					◉
এক্সএসএল		◉

বিঃদ্রঃ:
* "as" ব্যবহার করে প্রিলোড করুন বা একটি নির্দিষ্ট "destination" ব্যবহার করে আনুন তাদের অনুরোধ করা গন্তব্যের অগ্রাধিকার ব্যবহার করুন। উদাহরণস্বরূপ, preload as="style" সর্বোচ্চ অগ্রাধিকার ব্যবহার করবে। কোনো সুস্পষ্ট গন্তব্য ছাড়াই, আনয়নকে একটি async XHR এর মতো অগ্রাধিকার দেওয়া হবে।
** "প্রাথমিক" কোনো অ-প্রিলোড করা ছবি অনুরোধ করার আগে অনুরোধ করা হিসাবে সংজ্ঞায়িত করা হয় ("দেরী" পরে)।
*** CSS যেখানে মিডিয়া টাইপ মেলে না তা প্রিলোড স্ক্যানার দ্বারা আনা হয় না এবং শুধুমাত্র তখনই প্রক্রিয়া করা হয় যখন প্রধান পার্সার এটিতে পৌঁছায়, যার মানে সাধারণত এটি খুব দেরিতে আনা হবে, এমনকি fetchpriority="high" দিয়েও।

ডিফল্টভাবে ছবিগুলি "নিম্ন" অগ্রাধিকার থেকে শুরু হয় এবং তারপরে লেআউটের সময় ভিউপোর্টের মধ্যে থাকলে "উচ্চ" এ বুস্ট করা হয়। ক্রোম 117-এর হিসাবে, প্রথম 5টি বড় ছবিকে "মাঝারি" এ সেট করা হয়েছে এটিকে গতি বাড়ানোর জন্য এবং এর মধ্যে দুটি প্রাথমিক "টাইট মোড" চলাকালীন সমান্তরালভাবে আনা যেতে পারে। fetchpriority="high" ব্যবহার করে মার্কআপে গুরুত্বপূর্ণ ছবি ট্যাগ করার মাধ্যমে, তারা অবিলম্বে "High" এ শুরু করতে পারে এবং অনেক দ্রুত লোড হতে পারে।

মনে রাখবেন যে fetchpriority আপেক্ষিক অগ্রাধিকার সেট করে — অর্থাৎ এটি একটি উপযুক্ত পরিমাণে ডিফল্ট অগ্রাধিকার বাড়ায় বা কম করে, স্পষ্টভাবে "উচ্চ" বা "নিম্ন" এ অগ্রাধিকার সেট করার পরিবর্তে এবং ব্রাউজার আপেক্ষিক অগ্রাধিকার নির্ধারণ করে। প্রায়শই এটি "উচ্চ" বা "নিম্ন" হয়, তবে সবসময় নয়। উদাহরণ স্বরূপ, fetchpriority="high" সহ সমালোচনামূলক CSS এখনও "VeryHigh"/"Highest" অগ্রাধিকার বজায় রাখবে এবং এর উপর fetchpriority="low" ব্যবহার করলে এখনও "উচ্চ" অগ্রাধিকার বজায় থাকবে—কোন ক্ষেত্রেই অগ্রাধিকার স্পষ্টভাবে সেট করা নেই "উচ্চ" বা "নিম্ন" থেকে।

ব্যবহারের ক্ষেত্রে

আপনি এমন পরিস্থিতিতে মোকাবেলা করতে fetchpriority বৈশিষ্ট্য ব্যবহার করতে পারেন যেখানে আপনি কোন সংস্থান নিয়ে আসার অগ্রাধিকারের জন্য ব্রাউজারকে অতিরিক্ত ইঙ্গিত দিতে চান।

LCP চিত্রের অগ্রাধিকার বাড়ান

আপনি এলসিপি বা অন্যান্য সমালোচনামূলক চিত্রগুলির অগ্রাধিকার বাড়াতে fetchpriority="high" নির্দিষ্ট করতে পারেন।

<img src="lcp-image.jpg" fetchpriority="high">

নিম্নোক্ত তুলনা Google Flights পৃষ্ঠাটি দেখায় যেখানে একটি LCP ব্যাকগ্রাউন্ড ইমেজ লোড করা হয়েছে এবং ফেচ অগ্রাধিকার ছাড়াই। অগ্রাধিকার উচ্চ সেট করার সাথে সাথে, LCP 2.6s থেকে 1.9s এ উন্নীত হয়েছে ।

ফেচ অগ্রাধিকার ব্যবহার করার জন্য Google ফ্লাইট পৃষ্ঠাটি পুনরায় লেখার জন্য Cloudflare কর্মীদের ব্যবহার করে পরিচালিত একটি পরীক্ষা৷

ভাঁজের উপরের চিত্রগুলির অগ্রাধিকার কম করুন৷

আপনি fetchpriority="low" ব্যবহার করতে পারেন উপরের-ভাঁজ চিত্রগুলির অগ্রাধিকার কমাতে যা প্রাথমিকভাবে গুরুত্বপূর্ণ নাও হতে পারে, উদাহরণস্বরূপ একটি চিত্র ক্যারোজেলে৷

<ul class="carousel">
  <img src="img/carousel-1.jpg" fetchpriority="high">
  <img src="img/carousel-2.jpg" fetchpriority="low">
  <img src="img/carousel-3.jpg" fetchpriority="low">
  <img src="img/carousel-4.jpg" fetchpriority="low">
</ul>

Oodle অ্যাপের সাথে একটি পূর্বের পরীক্ষায়, আমরা লোডের সময় প্রদর্শিত নয় এমন চিত্রগুলির অগ্রাধিকার কমাতে এটি ব্যবহার করেছি৷ এটি লোডের সময় 2 সেকেন্ড কমাতে সাহায্য করেছে।

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

প্রিলোড করা সম্পদের অগ্রাধিকার কম করুন

অন্যান্য গুরুত্বপূর্ণ সংস্থানগুলির সাথে প্রতিদ্বন্দ্বিতা করা থেকে প্রিলোড করা সংস্থানগুলি বন্ধ করতে, আপনি তাদের অগ্রাধিকার কমানোর জন্য একটি ইঙ্গিত দিতে পারেন। আপনি চিত্র, স্ক্রিপ্ট এবং CSS এর সাথে এই কৌশলটি ব্যবহার করতে পারেন।

<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">

<!-- Preload CSS without blocking other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">

স্ক্রিপ্টগুলিকে পুনরায় অগ্রাধিকার দিন

পৃষ্ঠার কিছু অংশকে ইন্টারেক্টিভ করার জন্য প্রয়োজনীয় স্ক্রিপ্টগুলি অপরিহার্য কিন্তু অন্যান্য সংস্থানগুলিকে ব্লক করা উচিত নয়৷ আপনি উচ্চ অগ্রাধিকার দিয়ে এগুলিকে অ্যাসিঙ্ক হিসাবে চিহ্নিত করতে পারেন৷

<script src="async_but_important.js" async fetchpriority="high"></script>

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

<script src="blocking_but_unimportant.js" fetchpriority="low"></script>

অ-গুরুত্বপূর্ণ ডেটা আনার জন্য অগ্রাধিকার কম করুন

ব্রাউজারটি একটি উচ্চ অগ্রাধিকার দিয়ে fetch সম্পাদন করে। আপনার যদি একাধিক আনয়ন থাকে যা একই সাথে ফায়ার করা হতে পারে, আপনি আরও জটিল ডেটা আনার জন্য উচ্চ ডিফল্ট অগ্রাধিকার ব্যবহার করতে পারেন এবং কম গুরুত্বপূর্ণ ডেটার জন্য এটি কমিয়ে দিতে পারেন।

// Important validation data (high by default)
let authenticate = await fetch('/user');

// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});

অগ্রাধিকার বাস্তবায়ন নোট আনুন

আনয়ন অগ্রাধিকার নির্দিষ্ট ব্যবহারের ক্ষেত্রে কর্মক্ষমতা উন্নত করতে পারে, যেমন উপরে আলোচনা করা হয়েছে। কিছু জিনিস সম্পর্কে সচেতন হতে হবে:

fetchpriority অ্যাট্রিবিউটটি একটি ইঙ্গিত এবং নির্দেশনা নয়। ব্রাউজার বিকাশকারীর পছন্দকে সম্মান করার চেষ্টা করবে। এটাও সম্ভব যে ব্রাউজার দ্বন্দ্বের ক্ষেত্রে প্রয়োজনীয় হিসাবে বিবেচিত সম্পদ অগ্রাধিকারের জন্য তার পছন্দগুলি প্রয়োগ করবে।
আনয়ন অগ্রাধিকার একটি প্রিলোড সঙ্গে বিভ্রান্ত করা উচিত নয়. তারা উভয়ই আলাদা কারণ:
- প্রিলোড একটি বাধ্যতামূলক আনয়ন এবং একটি ইঙ্গিত নয়৷
- প্রিলোড ব্রাউজারকে প্রাথমিকভাবে রিসোর্স আবিষ্কার করার অনুমতি দেয়, কিন্তু এটি এখনও এটিকে ডিফল্ট অগ্রাধিকার দিয়ে আনবে। বিপরীতভাবে, ফেচ অগ্রাধিকার আবিষ্কারযোগ্যতাকে সহায়তা করে না, তবে আপনাকে আনার অগ্রাধিকার বাড়াতে বা হ্রাস করতে দেয়।
- প্রিলোডের প্রভাব পর্যবেক্ষণ এবং পরিমাপ করা সহজ।
অগ্রাধিকারের গ্রানুলারিটি বাড়িয়ে প্রিলোডের পরিপূরক হতে পারে। আপনি যদি একটি LCP চিত্রের জন্য <head> এর প্রথম আইটেমগুলির মধ্যে একটি হিসাবে একটি প্রিলোড উল্লেখ করে থাকেন, তাহলে একটি high আনয়ন অগ্রাধিকার উল্লেখযোগ্য লাভ নাও হতে পারে। যাইহোক, যদি প্রিলোড অন্যান্য রিসোর্সের পরে হয়, তাহলে একটি high আনয়ন অগ্রাধিকার LCP উন্নত করতে পারে। যদি একটি সমালোচনামূলক ছবি একটি CSS ব্যাকগ্রাউন্ড ইমেজ হয়, তাহলে আপনার এটিকে fetchpriority = "high" দিয়ে প্রিলোড করা উচিত।
অগ্রাধিকারের কারণে লক্ষণীয় লাভগুলি এমন পরিবেশে আরও প্রাসঙ্গিক হবে যেখানে উপলব্ধ নেটওয়ার্ক ব্যান্ডউইথের জন্য আরও সংস্থান লড়াই করে। এটি HTTP/1.x সংযোগগুলির জন্য সাধারণ যেখানে সমান্তরাল ডাউনলোডগুলি সম্ভব নয় বা কম ব্যান্ডউইথ HTTP/2 সংযোগগুলিতে। অগ্রাধিকার এই পরিস্থিতিতে বাধাগুলি সমাধান করতে পারে।
CDN একইভাবে HTTP/2 অগ্রাধিকার প্রয়োগ করে না । এমনকি যদি ব্রাউজার ফেচ অগ্রাধিকার ব্যবহার করে প্রস্তাবিত অগ্রাধিকারের সাথে যোগাযোগ করে; CDN প্রয়োজনীয় ক্রমে সম্পদ পুনঃপ্রধান নাও করতে পারে। এটি ফেচ অগ্রাধিকারের পরীক্ষাকে কঠিন করে তোলে। অগ্রাধিকারগুলি অভ্যন্তরীণভাবে ব্রাউজারের মধ্যে এবং প্রোটোকলের সাথে প্রয়োগ করা হয় যা অগ্রাধিকার (HTTP/2 এবং HTTP/3) সমর্থন করে। এটি এখনও শুধুমাত্র অভ্যন্তরীণ ব্রাউজার অগ্রাধিকারের জন্য ব্যবহার করা মূল্যবান, CDN বা মূল সমর্থন থেকে মুক্ত, কারণ ব্রাউজার দ্বারা সংস্থানগুলির অনুরোধ করা হলে এটি প্রায়শই পরিবর্তিত হয় - যেমন চিত্রগুলির মতো কম অগ্রাধিকার সংস্থানগুলি প্রায়শই ব্রাউজার প্রক্রিয়া করার সময় অনুরোধ করা থেকে বিরত থাকে। সমালোচনামূলক <head> আইটেম।
আপনার প্রারম্ভিক ডিজাইনে সেরা অনুশীলন হিসাবে ফেচ অগ্রাধিকার প্রবর্তন করা সম্ভব নাও হতে পারে। এটি একটি অপ্টিমাইজেশান যা আপনি পরে বিকাশ চক্রে প্রয়োগ করতে পারেন। আপনি পৃষ্ঠায় বিভিন্ন সংস্থানগুলিতে নির্ধারিত অগ্রাধিকারগুলি পরীক্ষা করতে পারেন এবং যদি সেগুলি আপনার প্রত্যাশার সাথে মেলে না, আপনি আরও অপ্টিমাইজেশনের জন্য ফেচ অগ্রাধিকার প্রবর্তন করতে পারেন৷

Chrome 95 এর পরে প্রিলোড ব্যবহার করা হচ্ছে

আনয়ন অগ্রাধিকার বৈশিষ্ট্যটি Chrome 73 থেকে 76-এর মধ্যে ট্রায়ালের জন্য উপলব্ধ ছিল কিন্তু Chrome 95-এ স্থির প্রিলোডগুলির সাথে অগ্রাধিকার সংক্রান্ত সমস্যার কারণে মুক্তি পায়নি৷ Chrome 95-এর আগে, <link rel=preload> এর মাধ্যমে জারি করা অনুরোধগুলি সর্বদা অন্যান্য অনুরোধের আগে শুরু হয় প্রিলোড স্ক্যানার, এমনকি যদি অন্যান্য অনুরোধের অগ্রাধিকার থাকে।

Chrome 95-এ ফিক্স এবং ফেচ অগ্রাধিকারের জন্য বর্ধিতকরণের সাথে, আমরা আশা করি যে বিকাশকারীরা তার উদ্দেশ্যমূলক উদ্দেশ্যে প্রিলোড ব্যবহার করা শুরু করবে — পার্সার (ফন্ট, ইম্পোর্ট, ব্যাকগ্রাউন্ড এলসিপি ইমেজ) দ্বারা সনাক্ত না হওয়া সংস্থানগুলিকে প্রিলোড করার জন্য। রিসোর্সটি প্রিলোড হওয়ার সময় preload ইঙ্গিতের অবস্থান প্রভাবিত করবে। প্রিলোড ব্যবহার করার কিছু মূল বিষয় হল:

এইচটিটিপি হেডারে প্রিলোড সহ এটি অন্য সব কিছুর থেকে এগিয়ে যাবে।
সাধারণত, "মাঝারি" অগ্রাধিকারের ঊর্ধ্বে যেকোনো কিছুর জন্য পার্সার তাদের কাছে যে ক্রমানুসারে প্রিলোড লোড করবে—তাই যদি আপনি HTML-এর শুরুতে প্রিলোডগুলি অন্তর্ভুক্ত করেন তবে সতর্ক থাকুন৷
ফন্ট প্রিলোড সম্ভবত মাথার শেষ বা শরীরের শুরুতে সবচেয়ে ভালো কাজ করবে।
ইম্পোর্ট প্রিলোড (ডাইনামিক import() বা modulepreload ) স্ক্রিপ্ট ট্যাগের পরে করা উচিত যা ইম্পোর্টের প্রয়োজন (তাই প্রকৃত স্ক্রিপ্টটি প্রথমে লোড/পার্স করা হয়)। মূলত, যদি স্ক্রিপ্ট ট্যাগ একটি স্ক্রিপ্ট লোড করে যা নির্ভরশীলতার লোডকে ট্রিগার করবে, নিশ্চিত করুন যে নির্ভরতাগুলির জন্য <link rel=preload> প্যারেন্ট স্ক্রিপ্ট ট্যাগের পরে রয়েছে, অন্যথায় নির্ভরতাগুলি মূল স্ক্রিপ্টের আগে লোড হতে পারে। সঠিক ক্রমে, নির্ভরতা লোড হওয়ার সময় প্রধান স্ক্রিপ্ট পার্স/ইভাল' করা যেতে পারে।
ইমেজ প্রিলোডগুলির একটি "নিম্ন" বা "মাঝারি" অগ্রাধিকার থাকে (আনয়ন অগ্রাধিকার ছাড়া) এবং অ্যাসিঙ্ক স্ক্রিপ্ট এবং অন্যান্য নিম্ন বা সর্বনিম্ন অগ্রাধিকার ট্যাগের সাথে সম্পর্কিত অর্ডার করা উচিত।

ইতিহাস

2018 সালে অরিজিন ট্রায়াল হিসেবে Chrome-এ প্রথম Fetch Priority নিয়ে পরীক্ষা করা হয়েছিল এবং তারপর আবার 2021 সালে importance বৈশিষ্ট্য ব্যবহার করে। সেই সময়ে এটি অগ্রাধিকার ইঙ্গিত হিসাবে পরিচিত ছিল। ওয়েব স্ট্যান্ডার্ড প্রক্রিয়ার অংশ হিসেবে ইন্টারফেসটি তখন থেকে HTML-এর জন্য fetchpriority এবং জাভাস্ক্রিপ্টের ফেচ API-এর priority পরিবর্তিত হয়েছে। বিভ্রান্তি কমাতে আমরা এখন এই APIটিকে ফেচ অগ্রাধিকার হিসাবে উল্লেখ করি।

উপসংহার

বিকাশকারীরা প্রিলোড আচরণের সংশোধন এবং Core Web Vitals এবং LCP-এ সাম্প্রতিক ফোকাস সহ অগ্রাধিকার আনতে আগ্রহী হতে পারে। তাদের পছন্দসই লোডিং ক্রম অর্জনের জন্য তাদের কাছে এখন অতিরিক্ত নব উপলব্ধ রয়েছে।