প্রিলোড করার অগ্রাধিকার অপ্টিমাইজ করুন

<link rel="preload">-এর মাধ্যমে রিসোর্স প্রিলোড করা হলে ব্রাউজার বুঝতে পারে যে শীঘ্রই কোনও রিসোর্স প্রয়োজন হবে। তবে, প্রিলোড রিসোর্সের ধরন অনুযায়ী ডিফল্ট অগ্রাধিকার পায় এবং ছবির ক্ষেত্রে এটি কম হয়। fetchpriority ব্যবহার করলে আপনি এই আপেক্ষিক অগ্রাধিকার রিফাইন করতে পারবেন, বিশেষ করে এটি নিশ্চিত করে যে ছবির প্রিলোডগুলি উচ্চ অগ্রাধিকারের সাথে প্রিলোড করা হয়েছে যাতে সেগুলি আগে শুরু করা যায় এবং আরও ব্যান্ডউইথ রিসোর্স ব্যবহার করা যায়।

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

1. প্রিলোড ক্যান্ডিডেট শনাক্ত করা: এমন রিসোর্স খুঁজে বের করুন যা ব্রাউজার আগে থেকে খুঁজে পায় না (যেমন, ভিডিও পোস্টার ইমেজ বা CSS-এ ব্যাকগ্রাউন্ড ইমেজ) কিন্তু পৃষ্ঠার উপস্থিতির জন্য অপরিহার্য।
2. গুরুত্বপূর্ণ ছবির প্রিলোড উন্নত করা: LCP ছবি বা অন্যান্য গুরুত্বপূর্ণ ছবি যেগুলি ডিফল্ট হিসেবে অগ্রাধিকার পায় না, সেগুলি যাতে অন্যান্য প্রিলোডের উপরে অগ্রাধিকার পায় তা নিশ্চিত করতে <link rel="preload" fetchpriority="high"> ব্যবহার করুন। মনে রাখবেন, ডিফল্ট হিসেবে ফন্ট আগে থেকেই উচ্চ অগ্রাধিকারের তালিকায় থাকে।
3. গুরুত্বপূর্ণ নয় এমন প্রিলোডকে কম অগ্রাধিকার দিন: প্রাথমিক রেন্ডারের জন্য গুরুত্বপূর্ণ নয় এমন রিসোর্সের (যেমন, ব্যাকগ্রাউন্ড ভিডিও বা সেকেন্ডারি ফন্ট) জন্য <link rel="preload" fetchpriority="low"> ব্যবহার করুন।
4. রিসোর্সের ধরনের সাথে সমন্বয় করা: মনে রাখবেন যে বিভিন্ন as ধরনের জন্য বিভিন্ন ডিফল্ট অগ্রাধিকার থাকে; প্রয়োজন হলে এইসব ডিফল্ট ওভাররাইড করতে fetchpriority ব্যবহার করুন।

কোডের উদাহরণ

<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">

<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">

<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>

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

• বাধ্যতামূলক: নেটওয়ার্কের সমস্যা এবং অগ্রাধিকার বুস্টের প্রভাব কমানো এড়াতে, সর্বাধিক ১-২টি গুরুত্বপূর্ণ ছবি প্রিলোড করার জন্য শুধুমাত্র fetchpriority="high" ব্যবহার করুন।
• বাধ্যতামূলক: Largest Contentful Paint (LCP) ছবিতে fetchpriority="high" ব্যবহার করুন।
• করণীয়: ব্যান্ডউইথ সংক্রান্ত সমস্যা এড়াতে, কোনও পৃষ্ঠায় প্রিলোডের মোট সংখ্যা সর্বাধিক ২টি ছবি এবং ২টি থেকে ৩টি প্রয়োজনীয় ফন্টে সীমাবদ্ধ করুন।
• প্রিলোডের জন্য fetchpriority="low" ব্যবহার করুন, যা আপনি চান যে ব্রাউজার তাড়াতাড়ি শুরু করুক, তবে গুরুত্বপূর্ণ রিসোর্স (বিশেষ করে, গুরুত্বপূর্ণ নয় এমন ফন্ট) খরচ না করে।
• প্রিলোড ব্যবহার করা হবে কিনা তা নিশ্চিত করতে as অ্যাট্রিবিউট সঠিকভাবে উল্লেখ করুন।
• ব্যাকগ্রাউন্ড ইমেজের জন্য প্রিলোডের উপর নির্ভর না করে <img> ট্যাগের মাধ্যমে HTML-এ স্ট্যাটিক্যালি গুরুত্বপূর্ণ রিসোর্স (যেমন LCP ইমেজ) খুঁজে নেওয়ার যোগ্য করে তুলতে অগ্রাধিকার দিন।
• নিশ্চিত করুন যে ফন্ট প্রিলোডে সবসময় crossorigin অ্যাট্রিবিউট আছে (এমনকি একই-উৎসের হলেও)।
• বন্ধ করে দেওয়া importance অ্যাট্রিবিউট ব্যবহার করবেন না। এটি fetchpriority দিয়ে পরিবর্তন করা হয়েছে।

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

<link rel="preload">-এ fetchpriority অ্যাট্রিবিউট হল একটি প্রোগ্রেসিভ এনহ্যান্সমেন্ট। যেসব ব্রাউজারে এটি কাজ করে না, সেগুলি রিসোর্স টাইপের জন্য ডিফল্ট প্রায়োরিটি ব্যবহার করে রিসোর্স প্রিলোড করবে। মানানসই কিনা তা নিশ্চিত করতে, সবসময় সঠিক as এবং type অ্যাট্রিবিউট প্রদান করুন।