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

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

আদ্দি ওসমানী
লীনা সোহনি
Leena Sohoni
X
প্যাট্রিক মিনান
Patrick Meenan
X
ব্যারি পোলার্ড

Browser Support

  • ক্রোম: 102।
  • প্রান্ত: 102।
  • ফায়ারফক্স: 132।
  • সাফারি: 17.2।

Source

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

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

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

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

Chrome-এর DevTools-এর নেটওয়ার্ক ট্যাবটিতে অনেকগুলি ফন্ট সংস্থান রয়েছে৷ তারা সব সর্বোচ্চ অগ্রাধিকার.
বিবিসি নিউজ ডিটেইল পেজে রিসোর্স type = "font" এর জন্য অগ্রাধিকার