ছবির প্রায়োরিটি অপ্টিমাইজ করুন

ব্রাউজার হিউরিস্টিক ব্যবহার করে ছবি লোড করার অগ্রাধিকার নির্ধারণ করে, তবে এই ডিফল্টগুলি সবসময় আপনার পৃষ্ঠার Largest Contentful Paint (LCP)-এর সাথে নাও মিলতে পারে।

<img> এলিমেন্টে fetchpriority ব্যবহার করলে, আপনি ব্রাউজারকে কোনও ছবির গুরুত্ব স্পষ্টভাবে জানাতে পারবেন। এর ফলে, গুরুত্বপূর্ণ ছবিগুলি দ্রুত লোড হবে এবং অপ্রয়োজনীয় ছবিগুলি ব্যান্ডউইথের জন্য প্রতিযোগিতা করবে না।

loading=lazy অ্যাট্রিবিউট, অফ-স্ক্রিনে থাকা ছবি ডাউনলোড হতে দেয় না, যার ফলে ছবিকে অগ্রাধিকার দেওয়া যায়।

কীভাবে প্রয়োগ করতে হয়

1. LCP ছবি শনাক্ত করুন: কোন ছবিটি Largest Contentful Paint-এর জন্য সবচেয়ে উপযুক্ত তা নির্ধারণ করুন (সাধারণত পৃষ্ঠার সবচেয়ে উপরে থাকা অনেক বড় ছবি)।
2. LCP-এর অগ্রাধিকার বাড়ান: LCP ক্যান্ডিডেটের জন্য <img> এলিমেন্টে fetchpriority="high" যোগ করুন।
3. অপ্রয়োজনীয় ছবিকে কম অগ্রাধিকার দিন: সেকেন্ডারি UI-এর অংশ বা ব্যবহারকারীর ইন্টার‍্যাকশনের পরে দেখানো হয় এমন ছবির (যেমন, মেগা মেনু, মডাল বা অফ-স্ক্রিন ক্যারোজেল স্লাইড) ক্ষেত্রে fetchpriority="low" যোগ করুন।
4. ধীরে ধীরে লোড করার পদ্ধতি অপ্টিমাইজ করুন: LCP ইমেজে কখনও loading="lazy" ব্যবহার করবেন না। স্ট্যান্ডার্ড বিলো-দ্য-ফোল্ড ছবির ক্ষেত্রে, ব্যবহারকারী সেটির কাছাকাছি স্ক্রল না করা পর্যন্ত অনুরোধ স্থগিত রাখার জন্য loading="lazy" যথেষ্ট। এইসব ছবিতে fetchpriority="low" যোগ করবেন না, কারণ ব্যবহারকারী স্ক্রল করে সেখানে পৌঁছালে আপনি সেগুলি স্বাভাবিক অগ্রাধিকার সহ লোড করতে চান। যেসব ছবি টেকনিক্যালি "অ্যাবাভ দ্য ফোল্ড" কিন্তু প্রাথমিকভাবে দেখা যায় না (যেমন, লুকানো ক্যারোজেল স্লাইড বা মেগা মেনু), সেগুলির জন্য fetchpriority="low" রিজার্ভ করুন। এইসব লুকানো ছবির জন্য, loading="lazy" ব্যবহার করাও গ্রহণযোগ্য; ব্রাউজার কম অগ্রাধিকারকে সম্মান করার সাথে সাথে অনুরোধের সময়সীমাও ম্যানেজ করবে।
5. ডিফল্ট অগ্রাধিকারকে প্রাধান্য দিন: কোনও ছবির ক্ষেত্রে সাধারণ লোডিং অগ্রাধিকার থাকলে, fetchpriority অ্যাট্রিবিউট auto-এ সেট করার পরিবর্তে সম্পূর্ণভাবে বাদ দিন। ব্রাউজারের নেটিভ হিউরিস্টিকসের উপর নির্ভর করার সময় আপনার HTML আরও পরিষ্কার রাখার জন্য এটি একটি স্টাইলিস্টিক কনভেনশন।

কোডের উদাহরণ

<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
     alt="Main Banner"
     fetchpriority="high"
     width="800" height="400">

<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
 <div class="carousel">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 1"
          width="400" height="300">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 2"
          fetchpriority="low"
          loading="lazy"
          width="400" height="300">
<div>

<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
     alt="Special Offer"
     fetchpriority="low"
     width="300" height="150">

<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
     alt="Footer Logo"
     loading="lazy"
     width="120" height="60">

<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
     alt="Standard Image"
     width="400" height="300">

পেশাদার পদ্ধতি

• বাধ্যতামূলক: LCP ছবিতে সবসময় fetchpriority="high" প্রয়োগ করুন।
• বাধ্যতামূলক: নেটওয়ার্কের সমস্যা এবং অগ্রাধিকার বুস্টের প্রভাব কমানো এড়াতে, সর্বাধিক ১-২টি গুরুত্বপূর্ণ ছবিতে fetchpriority="high" ব্যবহার করুন।
• বাধ্যতামূলক: টেকনিক্যালি "অ্যাবাভ দ্য ফোল্ড" কিন্তু প্রাথমিকভাবে লুকানো (যেমন, লুকানো ক্যারোজেল স্লাইড, মেগা মেনু ছবি) ছবির জন্য fetchpriority="low" ব্যবহার করুন।
• বাধ্যতামূলক: স্ট্যান্ডার্ড বিলো-দ্য-ফোল্ড ছবিতে fetchpriority="low" ব্যবহার করবেন না, যেগুলি আগে থেকেই loading="lazy" ব্যবহার করছে। এইসব ছবি ভিউপোর্টে প্রবেশ করার পরে স্বাভাবিক অগ্রাধিকার অনুযায়ী লোড হওয়া উচিত।
• সাজেস্ট করা হয়েছে: fetchpriority="auto" ব্যবহার করা এড়িয়ে চলুন। আপনি ডিফল্ট প্রায়োরিটি চাইলে, আপনার HTML পরিষ্কার রাখতে অ্যাট্রিবিউটটি সম্পূর্ণভাবে বাদ দিন।
• fetchpriority="high"-এর সাথে loading="lazy" একত্রিত করবেন না।
• বন্ধ করে দেওয়া importance অ্যাট্রিবিউট ব্যবহার করবেন না। এটি fetchpriority দ্বারা প্রতিস্থাপিত হয়েছে এবং কোনও ব্রাউজারে কাজ করে না।
• বন্ধ করে দেওয়া loading="auto" ভ্যালু ব্যবহার করবেন না। এটি প্রথমে Chrome-এ কাজ করত, কিন্তু এখন সরিয়ে দেওয়া হয়েছে এবং কোনও ব্রাউজারেই কাজ করে না।

ফলব্যাক স্ট্র্যাটেজি

fetchpriority অ্যাট্রিবিউট হল <img> এলিমেন্টের জন্য প্রোগ্রেসিভ এনহ্যান্সমেন্ট। কোনও ব্রাউজার এটি সাপোর্ট না করলে, অ্যাট্রিবিউটটি উপেক্ষা করা হয় এবং ব্রাউজারটি তার ডিফল্ট অগ্রাধিকার হিউরিস্টিক ব্যবহার করে।