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

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

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

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

  • ক্রোম: 102।
  • প্রান্ত: 102।
  • ফায়ারফক্স: 132।
  • সাফারি: 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, ফন্ট, স্ক্রিপ্ট, ইমেজ এবং থার্ড-পার্টি রিসোর্স।
  • নথির অবস্থান বা অর্ডারে সম্পদের উল্লেখ রয়েছে।
  • স্ক্রিপ্টে async বা defer অ্যাট্রিবিউট ব্যবহার করা হয় কিনা।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

fetchpriority আপেক্ষিক অগ্রাধিকার সেট করে, যার অর্থ এটি একটি উপযুক্ত পরিমাণে ডিফল্ট অগ্রাধিকার বাড়ায় বা কম করে, স্পষ্টভাবে High বা Low অগ্রাধিকার সেট করার পরিবর্তে। এটি প্রায়শই High বা Low অগ্রাধিকারে পরিণত হয়, কিন্তু সবসময় নয়। উদাহরণস্বরূপ, fetchpriority="high" সহ সমালোচনামূলক CSS "খুব উচ্চ"/"সর্বোচ্চ" অগ্রাধিকার ধরে রাখে এবং এই উপাদানগুলিতে 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>

যদিও 2-4 ছবিগুলি ভিউপোর্টের বাইরে থাকবে, সেগুলিকে "যথেষ্ট কাছাকাছি" হিসাবে বিবেচনা করা যেতে পারে যাতে একটি load=lazy অ্যাট্রিবিউট যোগ করা হলেও সেগুলিকে high উন্নীত করতে এবং লোড হতে পারে৷ তাই fetchpriority="low" এর জন্য সঠিক সমাধান।

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

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

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

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

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

<!-- Preload CSS without blocking render, or 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>

এই স্ক্রিপ্টে পৌঁছালে এটি এখনও পার্সারকে ব্লক করবে, কিন্তু এর আগে বিষয়বস্তুকে অগ্রাধিকার দেওয়ার অনুমতি দেবে।

একটি বিকল্প, যদি সম্পূর্ণ DOM-এর প্রয়োজন হয়, তা হল defer অ্যাট্রিবিউট ব্যবহার করা (যা DOMContentLoaded এর পরে, ক্রমানুসারে চলে), অথবা এমনকি পৃষ্ঠার নীচে async ।

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

ব্রাউজারটি একটি উচ্চ অগ্রাধিকার দিয়ে 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 বা HTTP/3 সংযোগগুলিতে। এই ক্ষেত্রে, অগ্রাধিকার দেওয়া বাধাগুলি সমাধান করতে সাহায্য করতে পারে।

  • CDN গুলি একইভাবে HTTP/2 অগ্রাধিকার প্রয়োগ করে না, এবং একইভাবে HTTP/3 এর জন্য। এমনকি যদি ব্রাউজার ফেচ অগ্রাধিকার থেকে অগ্রাধিকার যোগাযোগ করে, CDN নির্দিষ্ট ক্রমে সংস্থানগুলিকে পুনঃপ্রধান নাও দিতে পারে। এটি পরীক্ষার অগ্রাধিকার আনা কঠিন করে তোলে। অগ্রাধিকারগুলি অভ্যন্তরীণভাবে ব্রাউজারের মধ্যে এবং প্রোটোকলের সাথে প্রয়োগ করা হয় যা অগ্রাধিকার (HTTP/2 এবং HTTP/3) সমর্থন করে। এটি এখনও অভ্যন্তরীণ ব্রাউজার অগ্রাধিকারের জন্য শুধুমাত্র CDN বা মূল সমর্থন থেকে স্বাধীন হওয়ার জন্য ফেচ অগ্রাধিকার ব্যবহার করা মূল্যবান, কারণ ব্রাউজার যখন সংস্থানগুলির অনুরোধ করে তখন প্রায়ই অগ্রাধিকারগুলি পরিবর্তিত হয়৷ উদাহরণ স্বরূপ, ব্রাউজার গুরুত্বপূর্ণ <head> আইটেমগুলি প্রক্রিয়া করার সময় চিত্রগুলির মতো কম-অগ্রাধিকার সংস্থানগুলি প্রায়শই অনুরোধ করা থেকে বিরত থাকে।

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

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

আনয়নের অগ্রাধিকার হল কিভাবে রিসোর্স ফেচ করা হবে তা নিয়ে।

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

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

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

ইতিহাস

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

উপসংহার

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