রিসোর্স ইঙ্গিত দিয়ে ব্রাউজারকে সহায়তা করুন

রিসোর্স লোডিং অপ্টিমাইজ করার বিষয়ে শেষ মডিউলে, আপনি শিখেছেন কিভাবে CSS এবং JavaScript এর মতো বিভিন্ন পৃষ্ঠার রিসোর্স পৃষ্ঠা লোডের গতিকে প্রভাবিত করতে পারে এবং কীভাবে আপনি পৃষ্ঠার রেন্ডারিং দ্রুত করার জন্য সেগুলি এবং তাদের ডেলিভারি অপ্টিমাইজ করতে পারেন। রিসোর্স লোডিংয়ের আরও উন্নত দিকে যাওয়ার এটি উপযুক্ত সময়, এবং এর মধ্যে রিসোর্স ইঙ্গিত ব্যবহার করে ব্রাউজারকে দ্রুত লোড করতে সহায়তা করা জড়িত।

রিসোর্স ইঙ্গিতগুলি ডেভেলপারদের ব্রাউজারকে রিসোর্সগুলি কীভাবে লোড এবং অগ্রাধিকার দিতে হয় তা অবহিত করে পৃষ্ঠা লোডের সময়কে আরও অনুকূল করতে সাহায্য করতে পারে। preconnect এবং dns-prefetch মতো রিসোর্স ইঙ্গিতগুলির একটি প্রাথমিক সেট প্রথম চালু করা হয়েছিল। তবে, সময়ের সাথে সাথে, preload এবং ফেচ অগ্রাধিকার API অতিরিক্ত ক্ষমতা প্রদানের জন্য অনুসরণ করেছে।

রিসোর্স ইঙ্গিত ব্রাউজারকে নির্দিষ্ট কিছু পদক্ষেপ আগে থেকেই সম্পাদন করার নির্দেশ দেয় যা লোডিং কর্মক্ষমতা উন্নত করতে পারে। রিসোর্স ইঙ্গিতগুলি প্রাথমিক DNS লুকআপ সম্পাদন করা, সময়ের আগে সার্ভারের সাথে সংযোগ স্থাপন করা এবং এমনকি ব্রাউজার সাধারণত সেগুলি আবিষ্কার করার আগেই রিসোর্সগুলি আনার মতো পদক্ষেপগুলি সম্পাদন করতে পারে।

রিসোর্স ইঙ্গিতগুলি HTML-এ নির্দিষ্ট করা যেতে পারে—প্রায়শই <head> উপাদানের শুরুতে—অথবা HTTP হেডার হিসেবে সেট করা যেতে পারে । এই মডিউলের পরিধির জন্য, preconnect , dns-prefetch , এবং preload কভার করা হয়েছে, সেইসাথে prefetch যে অনুমানমূলক ফেচিং আচরণ প্রদান করে তাও অন্তর্ভুক্ত করা হয়েছে।

preconnect

preconnect ইঙ্গিতটি অন্য কোনও অরিজিনের সাথে সংযোগ স্থাপন করতে ব্যবহৃত হয় যেখান থেকে আপনি গুরুত্বপূর্ণ রিসোর্স আনছেন। উদাহরণস্বরূপ, আপনি হয়তো আপনার ছবি বা সম্পদ একটি CDN বা অন্য ক্রস-অরিজিনে হোস্ট করছেন:

<link rel="preconnect" href="https://example.com">

preconnect ব্যবহার করে, আপনি অনুমান করতে পারেন যে ব্রাউজারটি খুব নিকট ভবিষ্যতে একটি নির্দিষ্ট ক্রস-অরিজিন সার্ভারের সাথে সংযোগ স্থাপনের পরিকল্পনা করছে, এবং ব্রাউজারটি যত তাড়াতাড়ি সম্ভব সেই সংযোগটি খুলবে, আদর্শভাবে HTML পার্সার বা প্রি-লোড স্ক্যানারের জন্য অপেক্ষা করার আগে।

যদি আপনার কোনও পৃষ্ঠায় প্রচুর পরিমাণে ক্রস-অরিজিন রিসোর্স থাকে, তাহলে বর্তমান পৃষ্ঠার জন্য সবচেয়ে গুরুত্বপূর্ণ রিসোর্সগুলির জন্য preconnect ব্যবহার করুন।

Chrome DevTools-এর নেটওয়ার্ক প্যানেলে থাকা একটি রিসোর্সের সংযোগ সময়ের একটি স্ক্রিনশট। সংযোগ সেটআপে স্টল টাইম, প্রক্সি নেগোসিয়েশন, DNS লুকআপ, সংযোগ সেটআপ এবং TLS নেগোসিয়েশন অন্তর্ভুক্ত রয়েছে।
Chrome DevTools-এর নেটওয়ার্ক প্যানেলে দেখা যায় সংযোগের সময়ের একটি ভিজ্যুয়ালাইজেশন। লাল বাক্সের মধ্যে থাকা সময়গুলি হল ক্রস-অরিজিন সার্ভারের সাথে সংযোগ স্থাপনের সাথে সম্পর্কিত সময়, যা preconnect ক্রস-অরিজিন রিসোর্স আবিষ্কারের সময়ের পরিবর্তে দ্রুত সংযোগ স্থাপন করে কমাতে পারে।

preconnect জন্য একটি সাধারণ ব্যবহার হল গুগল ফন্ট । গুগল ফন্ট আপনাকে https://fonts.googleapis.com ডোমেনে preconnect পরামর্শ দেয় যা @font-face ঘোষণাগুলি পরিবেশন করে এবং https://fonts.gstatic.com ডোমেনে যা ফন্ট ফাইলগুলি পরিবেশন করে।

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS) ব্যবহার করে কোনও রিসোর্স আনতে হবে কিনা তা নির্দেশ করার জন্য crossorigin অ্যাট্রিবিউট ব্যবহার করা হয়। preconnect হিন্ট ব্যবহার করার সময়, যদি অরিজিন থেকে ডাউনলোড করা রিসোর্সটি CORS ব্যবহার করে—যেমন ফন্ট ফাইল—তাহলে আপনাকে preconnect হিন্টে crossorigin অ্যাট্রিবিউট যোগ করতে হবে।

dns-prefetch

ক্রস-অরিজিন সার্ভারে সংযোগগুলি আগেভাগে খোলার ফলে প্রাথমিক পৃষ্ঠা লোডের সময় উল্লেখযোগ্যভাবে উন্নত হতে পারে, তবে একসাথে অনেক ক্রস-অরিজিন সার্ভারের সাথে সংযোগ স্থাপন করা যুক্তিসঙ্গত বা সম্ভব নাও হতে পারে। যদি আপনি উদ্বিগ্ন হন যে আপনি preconnect অতিরিক্ত ব্যবহার করছেন, তাহলে অনেক কম ব্যয়বহুল রিসোর্স ইঙ্গিত হল dns-prefetch ইঙ্গিত।

এর নাম অনুসারে, dns-prefetch কোনও ক্রস-অরিজিন সার্ভারের সাথে সংযোগ স্থাপন করে না, বরং কেবল সময়ের আগে থেকেই এর জন্য DNS লুকআপ সম্পাদন করে। একটি DNS লুকআপ তখন ঘটে যখন একটি ডোমেন নাম তার অন্তর্নিহিত IP ঠিকানায় সমাধান করা হয়। ডিভাইস এবং নেটওয়ার্ক স্তরে DNS ক্যাশের স্তরগুলি এটিকে একটি সাধারণ দ্রুত প্রক্রিয়া করতে সাহায্য করে, তবুও এটিতে কিছুটা সময় লাগে।

<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

DNS লুকআপগুলি মোটামুটি সস্তা, এবং তুলনামূলকভাবে কম খরচের কারণে, কিছু ক্ষেত্রে এগুলি preconnect চেয়ে বেশি উপযুক্ত টুল হতে পারে। বিশেষ করে, এটি এমন একটি রিসোর্স হিন্ট হতে পারে যেখানে লিঙ্কগুলি এমন অন্যান্য ওয়েবসাইটে নেভিগেট করে যা ব্যবহারকারী সম্ভবত অনুসরণ করতে পারে বলে মনে করেন। dnstradamus হল এমন একটি টুল যা জাভাস্ক্রিপ্ট ব্যবহার করে স্বয়ংক্রিয়ভাবে এটি করে এবং ইন্টারসেকশন অবজারভার API ব্যবহার করে বর্তমান পৃষ্ঠার HTML-এ dns-prefetch ইঙ্গিতগুলি ইনজেক্ট করে যখন অন্যান্য ওয়েবসাইটের লিঙ্কগুলি ব্যবহারকারীর ভিউপোর্টে স্ক্রোল করা হয়।

preload

পৃষ্ঠাটি রেন্ডার করার জন্য প্রয়োজনীয় একটি রিসোর্সের জন্য একটি প্রাথমিক অনুরোধ শুরু করতে preload নির্দেশিকা ব্যবহার করা হয়:

<link rel="preload" href="/lcp-image.jpg" as="image" fetchpriority="high">

preload নির্দেশিকাগুলি দেরিতে আবিষ্কৃত গুরুত্বপূর্ণ রিসোর্সের মধ্যেই সীমাবদ্ধ থাকা উচিত। সবচেয়ে সাধারণ ব্যবহারের ক্ষেত্রে হল ফন্ট ফাইল, @import ঘোষণার মাধ্যমে আনা CSS ফাইল, অথবা CSS background-image রিসোর্স যা সম্ভবত Largest Contentful Paint (LCP) প্রার্থী অথবা অন্যান্য LCP রিসোর্স যা প্রাথমিক HTML-এ আবিষ্কারযোগ্য নয় (উদাহরণস্বরূপ, যদি জাভাস্ক্রিপ্ট দ্বারা লোড করা হয়)। এই ধরনের ক্ষেত্রে, এই ফাইলগুলি প্রিলোড স্ক্যানার দ্বারা আবিষ্কার করা হবে না কারণ রিসোর্সটি বহিরাগত রিসোর্সে উল্লেখ করা হয়।

preconnect মতোই, যদি আপনি কোনও CORS রিসোর্স - যেমন ফন্ট - প্রি-লোড করেন তবে preload নির্দেশিকার জন্য crossorigin অ্যাট্রিবিউট প্রয়োজন। যদি আপনি crossorigin অ্যাট্রিবিউট যোগ না করেন - অথবা এটি CORS-বহির্ভূত অনুরোধের জন্য যোগ না করেন - তাহলে রিসোর্সটি ব্রাউজার দ্বারা দুবার ডাউনলোড করা হয়, যার ফলে ব্যান্ডউইথ নষ্ট হয় যা অন্যান্য রিসোর্সে আরও ভালোভাবে ব্যয় করা যেত।

<link rel="preload" href="/font.woff2" as="font" crossorigin>

পূর্ববর্তী HTML স্নিপেটে, ব্রাউজারকে CORS অনুরোধ ব্যবহার করে /font.woff2 প্রিলোড করার নির্দেশ দেওয়া হয়েছে—এমনকি যদি /font.woff2 একই ডোমেনে থাকে।

prefetch

ভবিষ্যতে নেভিগেশনের জন্য ব্যবহার করা হতে পারে এমন একটি রিসোর্সের জন্য একটি নিম্ন অগ্রাধিকার অনুরোধ শুরু করতে prefetch নির্দেশিকা ব্যবহার করা হয়:

<link rel="prefetch" href="/next-page.css" as="style">

এই নির্দেশিকাটি মূলত preload নির্দেশিকার মতো একই ফর্ম্যাট অনুসরণ করে, শুধুমাত্র <link> এলিমেন্টের rel অ্যাট্রিবিউট "prefetch" এর মান ব্যবহার করে। তবে, preload নির্দেশিকার বিপরীতে, prefetch মূলত অনুমানমূলক কারণ আপনি ভবিষ্যতের নেভিগেশনের জন্য একটি রিসোর্সের জন্য একটি ফেচ শুরু করছেন যা ঘটতে পারে বা নাও হতে পারে।

এমন কিছু সময় আছে যখন prefetch উপকারী হতে পারে—উদাহরণস্বরূপ, যদি আপনি আপনার ওয়েবসাইটে এমন একটি ব্যবহারকারী প্রবাহ সনাক্ত করে থাকেন যা বেশিরভাগ ব্যবহারকারী সম্পূর্ণ করার জন্য অনুসরণ করেন, তাহলে ভবিষ্যতের পৃষ্ঠাগুলির জন্য একটি রেন্ডার-সমালোচনামূলক রিসোর্সের জন্য একটি prefetch তাদের লোড সময় কমাতে সাহায্য করতে পারে।

অগ্রাধিকার API আনুন

আপনি কোনও রিসোর্সের অগ্রাধিকার বাড়ানোর জন্য এর fetchpriority অ্যাট্রিবিউটের মাধ্যমে Fetch Priority API ব্যবহার করতে পারেন। আপনি <link> , <img> , এবং <script> উপাদানগুলির সাথে অ্যাট্রিবিউটটি ব্যবহার করতে পারেন।

<div class="gallery">
  <div class="poster">
    <img src="img/poster-1.jpg" fetchpriority="high">
  </div>
  <div class="thumbnails">
    <img src="img/thumbnail-2.jpg" fetchpriority="low">
    <img src="img/thumbnail-3.jpg" fetchpriority="low">
    <img src="img/thumbnail-4.jpg" fetchpriority="low">
  </div>
</div>

ডিফল্টরূপে, ছবিগুলি কম অগ্রাধিকার সহ আনা হয়। লেআউটের পরে, যদি ছবিটি প্রাথমিক ভিউপোর্টের মধ্যে পাওয়া যায়, তাহলে অগ্রাধিকারটি উচ্চ অগ্রাধিকারে বৃদ্ধি করা হয়। পূর্ববর্তী HTML স্নিপেটে, fetchpriority অবিলম্বে ব্রাউজারকে উচ্চ অগ্রাধিকার সহ বৃহত্তর LCP চিত্রটি ডাউনলোড করতে বলে, যেখানে কম গুরুত্বপূর্ণ থাম্বনেইল চিত্রগুলি কম অগ্রাধিকার সহ ডাউনলোড করা হয়।

আধুনিক ব্রাউজারগুলি দুটি ধাপে রিসোর্স লোড করে। প্রথম ধাপটি গুরুত্বপূর্ণ রিসোর্সের জন্য সংরক্ষিত থাকে এবং সমস্ত ব্লকিং স্ক্রিপ্ট ডাউনলোড এবং কার্যকর করার পরে শেষ হয়। এই ধাপে, কম অগ্রাধিকার রিসোর্স ডাউনলোড হতে বিলম্ব হতে পারে। fetchpriority="high" ব্যবহার করে আপনি একটি রিসোর্সের অগ্রাধিকার বাড়াতে পারেন, যার ফলে ব্রাউজার প্রথম ধাপে এটি ডাউনলোড করতে সক্ষম হয়।

রিসোর্স ইঙ্গিত ডেমো

তোমার জ্ঞান পরীক্ষা করো

preconnect রিসোর্স ইঙ্গিত কী করে?

একটি ক্রস-অরিজিন সার্ভারের সাথে একটি সংযোগ খোলে, যার মধ্যে DNS লুকআপ, সেইসাথে ব্রাউজার যখন এটি আবিষ্কার করবে তার আগে সংযোগ এবং TLS আলোচনা অন্তর্ভুক্ত থাকে।
সঠিক!
ক্রস-অরিজিন সার্ভারের জন্য শুধুমাত্র একটি DNS লুকআপ করে।
আবার চেষ্টা করুন.

ফেচ প্রায়োরিটি এপিআই আপনাকে কী করতে দেয়?

বর্তমান পৃষ্ঠার HTML কোন অগ্রাধিকারে ডাউনলোড করা হবে তা নির্দিষ্ট করুন।
আবার চেষ্টা করুন.
<link> , <img> , এবং <script> এলিমেন্টের জন্য আপেক্ষিক অগ্রাধিকার নির্দিষ্ট করুন।
সঠিক!

prefetch ইঙ্গিতটি কখন ব্যবহার করা উচিত?

ব্যবহারকারীর যে কোনও এবং সমস্ত সংস্থান বা পৃষ্ঠার জন্য প্রয়োজন হতে পারে, ভবিষ্যতে তাদের আসলে সেগুলি প্রয়োজন হোক বা না হোক।
আবার চেষ্টা করুন.
যখন আপনার উচ্চ আত্মবিশ্বাস থাকে যে আপনি যে রিসোর্স বা পৃষ্ঠাগুলি প্রি-ফ্যাচ করতে চান তা ব্যবহারকারীর প্রয়োজন।
সঠিক!
যদি ব্যবহারকারী ডেটা ব্যবহারের পরিমাণ কমানোর জন্য স্পষ্ট পছন্দ না করে থাকেন।
সঠিক!

পরবর্তী: ছবির পারফর্ম্যান্স

এখন পর্যন্ত, আপনি সম্ভবত পৃষ্ঠার HTML, <head> উপাদান এবং রিসোর্স ইঙ্গিতগুলির ক্ষেত্রে সাধারণ পারফরম্যান্স বিবেচনা সম্পর্কে আপনার জ্ঞান সম্পর্কে বেশ আত্মবিশ্বাসী বোধ করতে শুরু করেছেন। তবে, পৃষ্ঠাগুলি সাধারণত লোড করা বিভিন্ন ধরণের রিসোর্সের জন্য নির্দিষ্ট অতিরিক্ত অপ্টিমাইজেশন রয়েছে। পরবর্তীতে, পরবর্তী মডিউলে ছবির পারফরম্যান্স কভার করা হয়েছে, যা ব্যবহারকারীর ডিভাইস নির্বিশেষে আপনার ওয়েবসাইটের ছবিগুলি যত দ্রুত সম্ভব লোড করতে সাহায্য করতে পারে।