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

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

Addy Osmani

Leena Sohoni

Patrick Meenan

Barry Pollard

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

102
102
এক্স
17.2

উৎস

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

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

রিসোর্স ডাউনলোড সিকোয়েন্স পৃষ্ঠার প্রতিটি রিসোর্সের জন্য ব্রাউজারের নির্ধারিত অগ্রাধিকারের উপর নির্ভর করে। অগ্রাধিকার গণনা যুক্তিকে প্রভাবিত করতে পারে এমন কারণগুলির মধ্যে নিম্নলিখিতগুলি অন্তর্ভুক্ত রয়েছে:

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

নিম্নলিখিত সারণীটি দেখায় যে কীভাবে Chrome সর্বাধিক সংস্থানগুলিকে অগ্রাধিকার দেয় এবং সিকোয়েন্স করে:

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

প্রারম্ভিক CSS (যেমন CSS এ <head> ) ডিফল্টভাবে highest এবং লেআউট ব্লক করে।
দেরী CSS (যেমন CSS এর মাঝখানে <body> ), প্রাথমিক লেআউট ব্লক করে না। ব্রাউজারটি এই লেআউট-ব্লকিং পর্যায়ে থাকাকালীন এটি সব লোড হয় না, এবং এর পরিবর্তে ব্রাউজারটি লেআউট-ব্লকিং ফেজ ছেড়ে না যাওয়া পর্যন্ত অন্যান্য সংস্থানগুলির সাথে একবারে লোড হয়, যাতে ব্রাউজার আরও গুরুত্বপূর্ণ সংস্থানগুলিতে ফোকাস করতে পারে৷
অ-ম্যাচিং 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 ৷
ভাঁজের নিচের বিষয়বস্তু অলস-লোড করুন যাতে ব্রাউজার উপলব্ধ ব্যান্ডউইথ ব্যবহার করতে পারে আরও গুরুত্বপূর্ণ ভাঁজের ওপরের সংস্থানগুলির জন্য।

এখানে আরও কিছু জটিল কেস রয়েছে যেখানে ফেচ প্রায়োরিটি আপনাকে আপনার প্রয়োজনীয় রিসোর্স অগ্রাধিকার অর্ডার পেতে সাহায্য করতে পারে:

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

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

আনয়ন `fetchpriority` বৈশিষ্ট্য

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

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" (◉) সেই ধরনের সম্পদের জন্য ডিফল্ট অগ্রাধিকার চিহ্নিত করে।

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

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

আরো বিস্তারিত জানার জন্য, পূর্ববর্তী টেবিলের পাদটীকা দেখুন।

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

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

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

আপনি যখন ব্রাউজারকে কোন রিসোর্স আনতে হবে সে সম্পর্কে অতিরিক্ত ইঙ্গিত দিতে চাইলে fetchpriority অ্যাট্রিবিউট ব্যবহার করুন।

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

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

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

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

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

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

যেগুলি অবিলম্বে গুরুত্বপূর্ণ নয়, যেমন একটি ছবির ক্যারাউজেলে, উপরের ভাঁজের চিত্রগুলির অগ্রাধিকার কমাতে 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'">

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

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

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

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

প্রিলোড ব্যবহার করার জন্য টিপস

প্রিলোড ব্যবহার করার সময় নিম্নলিখিতগুলি মনে রাখবেন:

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

ইতিহাস

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