preload, prefetch এবং preconnect এর মতো রিসোর্স হিন্টগুলি কী?

Question

Accepted Answer

**রিসোর্স হিন্টগুলি** হল `` ট্যাগ যা ব্রাউজারকে রিসোর্স আগে থেকে ফেচ বা সংযোগ করতে বলে, লোড পারফরম্যান্স অপ্টিমাইজ করে। প্রতিটি বিভিন্ন টাইমিং/অগ্রাধিকার প্রয়োজন পরিবেশন করে। ```html ``` ## প্রতিটি কী করে - **`preload`** — "আমার এটি **বর্তমান পৃষ্ঠার জন্য প্রয়োজন**, এখনই উচ্চ অগ্রাধিকারে ফেচ করুন।" গুরুত্বপূর্ণ রিসোর্সগুলির জন্য যা পার্সার দেরিতে আবিষ্কার করে: ফন্ট, হিরো ইমেজ, CSS-সংজ্ঞায়িত সম্পদ। সঠিক অগ্রাধিকার/হেডার সেট করার জন্য ব্রাউজার নিশ্চিত করতে `as` প্রয়োজন। - **`preconnect`** — "আমি শীঘ্রই এই **origin** এ সংযোগ করব; এখনই DNS লুকআপ + TCP + TLS হ্যান্ডশেক করুন।" তৃতীয় পক্ষের (API, ফন্ট হোস্ট, CDN) প্রথম অনুরোধের আগে রাউন্ড-ট্রিপ সাশ্রয় করে। কয়েকটি গুরুত্বপূর্ণ origin এর জন্য ব্যবহার করুন। - **`dns-prefetch`** — preconnect এর একটি হালকা সংস্করণ: শুধুমাত্র DNS রেজোলিউশন। অনেক origin এর জন্য ভাল ফলব্যাক / । - **`prefetch`** — "আমার সম্ভবত এটির **পরবর্তী** নেভিগেশনের জন্য প্রয়োজন হবে; নিষ্ক্রিয় থাকলে কম অগ্রাধিকারে ফেচ করুন।" সম্ভাব্য-পরবর্তী পৃষ্ঠা/সম্পদের জন্য। ভবিষ্যতের জন্য ক্যাশ করা হয়, বর্তমান পৃষ্ঠার জন্য নয়। ## একটি সাধারণ বাস্তব উদাহরণ: ফন্ট ```html ``` ফন্টগুলি দেরিতে আবিষ্কৃত হয় (ব্রাউজারকে প্রথমে CSS পার্স করতে হবে), তাই সেগুলি প্রিলোড করা অদৃশ্য-পাঠ্য বিলম্ব এড়ায়। ## সতর্কতা: অত্যধিক ইঙ্গিত দেবেন না সবকিছু প্রিলোড করা উদ্দেশ্য পরাজিত করে — এটি প্রকৃত গুরুত্বপূর্ণ রিসোর্সগুলির সাথে ব্যান্ডউইথের জন্য প্রতিযোগিতা করে। শুধুমাত্র যেগুলি সবচেয়ে বেশি গুরুত্বপূর্ণ সেগুলিতে ইঙ্গিত করুন। ## এটি কেন গুরুত্বপূর্ণ রিসোর্স হিন্টগুলি সমালোচনামূলক পথ থেকে লেটেন্সি দূর করে: `preconnect` তৃতীয় পক্ষের জন্য হ্যান্ডশেক বিলম্ব দূর করে, `preload` দেরিতে-আবিষ্কৃত গুরুত্বপূর্ণ সম্পদগুলি (ফন্ট, LCP ইমেজ) অগ্রাধিকার দেয়, এবং `prefetch` *পরবর্তী* নেভিগেশনকে তাৎক্ষণিক অনুভব করায়। শল্যচিকিৎসার সাথে ব্যবহার করা হলে, তারা Core Web Vitals এ অর্থপূর্ণভাবে উন্নতি করে।