রিসোর্স হিন্টগুলি হল <link> ট্যাগ যা ব্রাউজারকে রিসোর্স আগে থেকে ফেচ বা সংযোগ করতে বলে, লোড পারফরম্যান্স অপ্টিমাইজ করে। প্রতিটি বিভিন্ন টাইমিং/অগ্রাধিকার প্রয়োজন পরিবেশন করে।
রিসোর্স হিন্টগুলি হল <link> ট্যাগ যা ব্রাউজারকে রিসোর্স আগে থেকে ফেচ বা সংযোগ করতে বলে, লোড পারফরম্যান্স অপ্টিমাইজ করে। প্রতিটি বিভিন্ন টাইমিং/অগ্রাধিকার প্রয়োজন পরিবেশন করে।
preload — "আমার এটি বর্তমান পৃষ্ঠার জন্য প্রয়োজন, এখনই উচ্চ অগ্রাধিকারে ফেচ করুন।" গুরুত্বপূর্ণ রিসোর্সগুলির জন্য যা পার্সার দেরিতে আবিষ্কার করে: ফন্ট, হিরো ইমেজ, CSS-সংজ্ঞায়িত সম্পদ। সঠিক অগ্রাধিকার/হেডার সেট করার জন্য ব্রাউজার নিশ্চিত করতে as প্রয়োজন।
preconnect — "আমি শীঘ্রই এই origin এ সংযোগ করব; এখনই DNS লুকআপ + TCP + TLS হ্যান্ডশেক করুন।" তৃতীয় পক্ষের (API, ফন্ট হোস্ট, CDN) প্রথম অনুরোধের আগে রাউন্ড-ট্রিপ সাশ্রয় করে। কয়েকটি গুরুত্বপূর্ণ origin এর জন্য ব্যবহার করুন।
dns-prefetch — preconnect এর একটি হালকা সংস্করণ: শুধুমাত্র DNS রেজোলিউশন। অনেক origin এর জন্য ভাল ফলব্যাক / ।
prefetch — "আমার সম্ভবত এটির পরবর্তী নেভিগেশনের জন্য প্রয়োজন হবে; নিষ্ক্রিয় থাকলে কম অগ্রাধিকারে ফেচ করুন।" সম্ভাব্য-পরবর্তী পৃষ্ঠা/সম্পদের জন্য। ভবিষ্যতের জন্য ক্যাশ করা হয়, বর্তমান পৃষ্ঠার জন্য নয়।
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
ফন্টগুলি দেরিতে আবিষ্কৃত হয় (ব্রাউজারকে প্রথমে CSS পার্স করতে হবে), তাই সেগুলি প্রিলোড করা অদৃশ্য-পাঠ্য বিলম্ব এড়ায়।
সবকিছু প্রিলোড করা উদ্দেশ্য পরাজিত করে — এটি প্রকৃত গুরুত্বপূর্ণ রিসোর্সগুলির সাথে ব্যান্ডউইথের জন্য প্রতিযোগিতা করে। শুধুমাত্র যেগুলি সবচেয়ে বেশি গুরুত্বপূর্ণ সেগুলিতে ইঙ্গিত করুন।
রিসোর্স হিন্টগুলি সমালোচনামূলক পথ থেকে লেটেন্সি দূর করে: preconnect তৃতীয় পক্ষের জন্য হ্যান্ডশেক বিলম্ব দূর করে, preload দেরিতে-আবিষ্কৃত গুরুত্বপূর্ণ সম্পদগুলি (ফন্ট, LCP ইমেজ) অগ্রাধিকার দেয়, এবং prefetch পরবর্তী নেভিগেশনকে তাৎক্ষণিক অনুভব করায়।
শল্যচিকিৎসার সাথে ব্যবহার করা হলে, তারা Core Web Vitals এ অর্থপূর্ণভাবে উন্নতি করে।