ওয়েব ফিচার:
Fetch priority
স্ক্রিপ্ট ডকুমেন্টের কোথায় দেখা যাচ্ছে এবং সেটিতে async বা defer-এর মতো অ্যাট্রিবিউট আছে কিনা তার উপর ভিত্তি করে ব্রাউজার স্ক্রিপ্টকে ডিফল্ট অগ্রাধিকার দেয়। fetchpriority ব্যবহার করলে ডেভেলপাররা স্পষ্ট কন্ট্রোল পান যার মাধ্যমে তারা নিশ্চিত করতে পারেন যে গুরুত্বপূর্ণ স্ক্রিপ্টগুলি প্রথমে লোড হবে এবং অপ্রয়োজনীয় স্ক্রিপ্টগুলি পরে লোড হবে।
কীভাবে প্রয়োগ করতে হয়
- গুরুত্বপূর্ণ স্ক্রিপ্ট শনাক্ত করা: পৃষ্ঠার মূল কার্যকারিতা বা ব্যবহারকারীর প্রাথমিক ইন্টার্যাকশনের জন্য কোন স্ক্রিপ্টগুলি অপরিহার্য তা নির্ধারণ করুন।
- গুরুত্বপূর্ণ অ্যাসিঙ্ক স্ক্রিপ্ট উন্নত করা:
asyncবাdefer-এর সাথে লোড করা গুরুত্বপূর্ণ স্ক্রিপ্টের জন্য,fetchpriority="high"অ্যাট্রিবিউট যোগ করুন যাতে ডিসকভারি ফেজে সেগুলি অগ্রাধিকার পায়। - অপ্রয়োজনীয় স্ক্রিপ্টকে কম অগ্রাধিকার দিন: যেসব স্ক্রিপ্ট অবিলম্বে প্রয়োজন নেই (যেমন, অ্যানালিটিক্স, বিজ্ঞাপন বা বিলো-দ্য-ফোল্ড উইজেট), সেগুলির জন্য
fetchpriority="low"যোগ করুন এবং ব্লক করা এড়াতে সেগুলিতেasync,deferবাmoduleঅ্যাট্রিবিউট আছে কিনা তা নিশ্চিত করুন। - সিকোয়েন্স পার্সার-ব্লকিং স্ক্রিপ্ট: বডির শেষে পার্সার-ব্লকিং স্ক্রিপ্টে
fetchpriority="low"ব্যবহার করুন যাতে আরও গুরুত্বপূর্ণ রিসোর্সের সাথে ব্যান্ডউইথের জন্য প্রতিযোগিতা করতে না হয়।
কোডের উদাহরণ
<!-- Elevate the priority of the critical app logic -->
<script src="/js/app.js" async fetchpriority="high"></script>
<!-- Deprioritize non-essential tracking scripts -->
<script src="/js/tracker.js" async fetchpriority="low"></script>
<!-- Deprioritize late-body scripts to favor critical images or CSS -->
<script src="/js/legacy-widgets.js" fetchpriority="low"></script>
পেশাদার পদ্ধতি
- বাধ্যতামূলক: নেটওয়ার্ক সংক্রান্ত সমস্যা এবং অগ্রাধিকার বুস্টের প্রভাব কমে যাওয়া এড়াতে, সর্বাধিক ১-২টি গুরুত্বপূর্ণ স্ক্রিপ্টে
fetchpriority="high"ব্যবহার করুন। asyncস্ক্রিপ্টের জন্য বিশেষভাবেfetchpriority="high"ব্যবহার করুন, যা Interaction to Next Paint (INP)-এর জন্য গুরুত্বপূর্ণ বলে পরিচিত।fetchpriority="low"ব্যবহার করে প্রাথমিক ব্যবহারকারীর অভিজ্ঞতার জন্য প্রয়োজন নেই এমন স্ক্রিপ্টকে কম অগ্রাধিকার দিন।- প্রতিটি স্ক্রিপ্ট ট্যাগে
fetchpriorityব্যবহার করবেন না; এটি শুধুমাত্র ব্রাউজারের ডিফল্ট হিউরিস্টিক পরিবর্তন করতে ব্যবহার করা উচিত যখন এটি সাব-অপ্টিমাল বলে জানা যায়। - বন্ধ করে দেওয়া
importanceঅ্যাট্রিবিউট ব্যবহার করবেন না। এটিfetchpriorityদিয়ে পরিবর্তন করা হয়েছে।
ফলব্যাক স্ট্র্যাটেজি
fetchpriority অ্যাট্রিবিউট হল একটি প্রোগ্রেসিভ এনহ্যান্সমেন্ট। যেসব ব্রাউজারে এটি কাজ করে না সেগুলি অ্যাট্রিবিউট উপেক্ষা করে এবং কোনও সমস্যা ছাড়াই তাদের ইন্টার্নাল শিডিউলিং লজিক ব্যবহার করে। প্রাথমিক ব্যবহারের জন্য কোনও এক্সপ্লিসিট ফিচার শনাক্তকরণ বা ফলব্যাক লজিকের প্রয়োজন নেই।