rel=preconnect এবং rel=dns-prefetch রিসোর্স হিন্টগুলো এবং সেগুলো কীভাবে ব্যবহার করতে হয়, সে সম্পর্কে জানুন।
ব্রাউজার সার্ভার থেকে কোনো রিসোর্সের জন্য অনুরোধ করার আগে, তাকে অবশ্যই একটি সংযোগ স্থাপন করতে হবে। একটি সুরক্ষিত সংযোগ স্থাপনের জন্য তিনটি ধাপ রয়েছে:
ডোমেইন নামটি খুঁজে বের করুন এবং সেটিকে একটি আইপি অ্যাড্রেসে রূপান্তর করুন।
সার্ভারের সাথে একটি সংযোগ স্থাপন করুন।
নিরাপত্তার জন্য সংযোগটি এনক্রিপ্ট করুন।
এই প্রতিটি ধাপে ব্রাউজার সার্ভারে এক খণ্ড ডেটা পাঠায় এবং সার্ভার তার জবাবে একটি প্রতিক্রিয়া পাঠায়। উৎস থেকে গন্তব্যে যাওয়া এবং ফিরে আসার এই যাত্রাকে রাউন্ড ট্রিপ বলা হয়।
নেটওয়ার্কের অবস্থার ওপর নির্ভর করে, একবার আসা-যাওয়ায় বেশ অনেকটা সময় লাগতে পারে। সংযোগ স্থাপনের প্রক্রিয়ায় তিনবার পর্যন্ত আসা-যাওয়া হতে পারে—এবং অপটিমাইজ করা না থাকলে এর চেয়েও বেশি।
এই সবকিছু আগে থেকে গুছিয়ে রাখলে অ্যাপ্লিকেশনগুলো অনেক দ্রুত কাজ করে। এই পোস্টে দুটি রিসোর্স হিন্ট— <link rel=preconnect> এবং <link rel=dns-prefetch> এর সাহায্যে কীভাবে তা করা যায়, তা ব্যাখ্যা করা হয়েছে।
rel=preconnect ব্যবহার করে প্রাথমিক সংযোগ স্থাপন করুন।
আধুনিক ব্রাউজারগুলো একটি পেজের জন্য কী কী সংযোগের প্রয়োজন হবে তা আগে থেকে অনুমান করার আপ্রাণ চেষ্টা করে , কিন্তু তারা নির্ভরযোগ্যভাবে সবগুলো অনুমান করতে পারে না। সুখবরটি হলো, আপনি তাদের একটি (রিসোর্স 😉) ইঙ্গিত দিতে পারেন।
একটি <link> এর সাথে rel=preconnect যোগ করলে ব্রাউজারকে জানানো হয় যে আপনার পৃষ্ঠাটি অন্য একটি ডোমেনের সাথে সংযোগ স্থাপন করতে চায় এবং আপনি চান যে প্রক্রিয়াটি যত তাড়াতাড়ি সম্ভব শুরু হোক। রিসোর্সগুলো আরও দ্রুত লোড হবে, কারণ ব্রাউজার সেগুলোর জন্য অনুরোধ করার আগেই সেটআপ প্রক্রিয়াটি সম্পন্ন হয়ে যায়।
রিসোর্স হিন্টস-এর এমন নামকরণের কারণ হলো, এগুলো বাধ্যতামূলক নির্দেশনা নয়। আপনি কী ঘটাতে চান, সে সম্পর্কে এগুলো তথ্য প্রদান করে, কিন্তু চূড়ান্তভাবে ব্রাউজারই সিদ্ধান্ত নেয় যে সেগুলো কার্যকর করা হবে কি না। একটি সংযোগ স্থাপন করা এবং তা খোলা রাখা অনেক শ্রমসাধ্য কাজ, তাই পরিস্থিতির উপর নির্ভর করে ব্রাউজার রিসোর্স হিন্টস উপেক্ষা করতে পারে অথবা আংশিকভাবে কার্যকর করতে পারে।
আপনার পেজে একটি <link> ট্যাগ যোগ করার মতোই সহজভাবে ব্রাউজারকে আপনার উদ্দেশ্য জানানো যায়:
<link rel="preconnect" href="https://example.com">
গুরুত্বপূর্ণ থার্ড-পার্টি অরিজিনগুলোর সাথে আগেভাগে সংযোগ স্থাপন করার মাধ্যমে আপনি লোড টাইম ১০০–৫০০ মিলিসেকেন্ড পর্যন্ত কমিয়ে আনতে পারেন। এই সংখ্যাগুলো সামান্য মনে হতে পারে, কিন্তু ব্যবহারকারীরা ওয়েব পেজের পারফরম্যান্সকে কীভাবে উপলব্ধি করে , তাতে এগুলোর একটি বড় প্রভাব রয়েছে।
rel=preconnect এর ব্যবহার-ক্ষেত্রসমূহ
কোথা থেকে আনছেন তা জানা, কিন্তু কী আনছেন তা না জানা।
ভার্সনযুক্ত ডিপেন্ডেন্সির কারণে মাঝে মাঝে এমন পরিস্থিতি তৈরি হয়, যেখানে আপনি জানেন যে আপনি একটি নির্দিষ্ট CDN থেকে কোনো রিসোর্সের জন্য অনুরোধ করবেন, কিন্তু সেটির সঠিক পাথটি আপনার জানা থাকে না।
আরেকটি সাধারণ ক্ষেত্র হলো ইমেজ সিডিএন (CDN) থেকে ছবি লোড করা, যেখানে কোনো ছবির সঠিক পাথ ব্যবহারকারীর ব্রাউজারের মিডিয়া কোয়েরি বা রানটাইম ফিচার চেকের ওপর নির্ভর করে।
এই পরিস্থিতিতে, আপনি যে রিসোর্সটি ফেচ করবেন তা যদি গুরুত্বপূর্ণ হয়, তবে সার্ভারের সাথে আগে থেকেই সংযোগ স্থাপন করে যতটা সম্ভব সময় বাঁচানো উচিত। আপনার পেজ অনুরোধ না করা পর্যন্ত ব্রাউজার ফাইলটি ডাউনলোড করবে না, কিন্তু অন্তত এটি আগে থেকেই সংযোগের বিষয়গুলো সামলে নিতে পারে, ফলে ব্যবহারকারীকে একাধিকবার অপেক্ষা করতে হয় না।
স্ট্রিমিং মিডিয়া
আরেকটি উদাহরণ যেখানে আপনি সংযোগ পর্যায়ে কিছুটা সময় বাঁচাতে চাইতে পারেন, কিন্তু সাথে সাথেই কন্টেন্ট পুনরুদ্ধার শুরু করার প্রয়োজন নেই, তা হলো যখন আপনি ভিন্ন কোনো উৎস থেকে মিডিয়া স্ট্রিম করছেন।
আপনার পেজ স্ট্রিম করা কন্টেন্ট কীভাবে পরিচালনা করে, তার ওপর নির্ভর করে আপনি হয়তো আপনার স্ক্রিপ্টগুলো লোড হওয়া এবং স্ট্রিমটি প্রসেস করার জন্য প্রস্তুত হওয়া পর্যন্ত অপেক্ষা করতে চাইতে পারেন। প্রি-কানেক্টিং আপনাকে অপেক্ষার সময় কমিয়ে আনতে সাহায্য করে, যা ফেচিং শুরু করার জন্য প্রস্তুত হয়ে গেলেই একবার মাত্র রাউন্ড ট্রিপের প্রয়োজন হয়।
rel=preconnect কীভাবে প্রয়োগ করবেন
preconnect শুরু করার একটি উপায় হলো ডকুমেন্টের <head> অংশে একটি <link> ট্যাগ যোগ করা।
<head>
<link rel="preconnect" href="https://example.com">
</head>
প্রি-কানেক্টিং শুধুমাত্র অরিজিন ডোমেইন ছাড়া অন্য ডোমেইনগুলোর জন্য কার্যকর, তাই আপনার সাইটের জন্য এটি ব্যবহার করা উচিত নয়।
আপনি Link HTTP হেডার ব্যবহার করেও একটি প্রি-কানেক্ট শুরু করতে পারেন:
Link: <https://example.com/>; rel=preconnect
কিছু ধরণের রিসোর্স, যেমন ফন্ট, অ্যানোনিমাস মোডে লোড করা হয়। সেগুলোর জন্য আপনাকে অবশ্যই preconnect hint-সহ crossorigin অ্যাট্রিবিউটটি সেট করতে হবে:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
আপনি যদি crossorigin অ্যাট্রিবিউটটি বাদ দেন, তাহলে ব্রাউজারটি শুধু DNS অনুসন্ধান করে।
rel=dns-prefetch ব্যবহার করে ডোমেইন নেম আগেভাগেই সমাধান করুন।
আপনি সাইটগুলোকে তাদের নাম দিয়ে মনে রাখেন, কিন্তু সার্ভারগুলো সেগুলোকে আইপি অ্যাড্রেস দিয়ে মনে রাখে। এই কারণেই ডোমেইন নেম সিস্টেম (DNS) রয়েছে। ব্রাউজার সাইটের নামকে আইপি অ্যাড্রেসে রূপান্তর করতে DNS ব্যবহার করে। এই প্রক্রিয়াটি— ডোমেইন নেম রেজোলিউশন— একটি সংযোগ স্থাপনের প্রথম ধাপ।
যদি কোনো পৃষ্ঠাকে অনেকগুলো তৃতীয় পক্ষের ডোমেনের সাথে সংযোগ স্থাপন করতে হয়, তবে সেগুলোকে আগে থেকে সংযুক্ত করে রাখাটা হিতে বিপরীত হয়। preconnect হিন্টটি শুধুমাত্র সবচেয়ে গুরুত্বপূর্ণ সংযোগগুলোর জন্য ব্যবহার করাই শ্রেয়। বাকি সবগুলোর জন্য, প্রথম ধাপ অর্থাৎ ডিএনএস লুকআপে সময় বাঁচাতে <link rel=dns-prefetch> ব্যবহার করুন, যেটিতে সাধারণত প্রায় ২০–১২০ মিলিসেকেন্ড সময় লাগে।
preconnect মতোই ডিএনএস রেজোলিউশন শুরু করা হয়: ডকুমেন্টের <head> অংশে একটি <link> ট্যাগ যোগ করার মাধ্যমে।
<link rel="dns-prefetch" href="http://example.com">
dns-prefetch এর জন্য ব্রাউজার সমর্থন preconnect সমর্থন থেকে কিছুটা ভিন্ন, তাই যেসব ব্রাউজার preconnect সমর্থন করে না, তাদের জন্য dns-prefetch একটি ফলব্যাক হিসেবে কাজ করতে পারে।
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">
<link rel="preconnect dns-prefetch" href="http://example.com">
<link> ট্যাগে dns-prefetch ফলব্যাক প্রয়োগ করলে সাফারিতে একটি বাগ দেখা দেয়, যেখানে preconnect বাতিল হয়ে যায়। বৃহত্তম বিষয়বস্তুপূর্ণ পেইন্ট (LCP)-এর উপর প্রভাব
dns-prefetch এবং preconnect ব্যবহার করে সাইটগুলো অন্য কোনো অরিজিনের সাথে সংযোগ স্থাপনের সময় কমাতে পারে। এর চূড়ান্ত লক্ষ্য হলো অন্য কোনো অরিজিন থেকে কোনো রিসোর্স লোড করার সময় যতটা সম্ভব কমিয়ে আনা।
লার্জেস্ট কনটেন্টফুল পেইন্ট (LCP)- এর ক্ষেত্রে, রিসোর্সগুলো তাৎক্ষণিকভাবে খুঁজে পাওয়া গেলে ভালো হয়, কারণ LCP ক্যান্ডিডেটগুলো ব্যবহারকারীর অভিজ্ঞতার অত্যন্ত গুরুত্বপূর্ণ অংশ। LCP রিসোর্সগুলিতে "high" fetchpriority ভ্যালু প্রয়োগ করলে তা এই বিষয়টিকে আরও উন্নত করতে পারে, কারণ এটি ব্রাউজারকে অ্যাসেটটির গুরুত্বের সংকেত দেয়, ফলে ব্রাউজার এটিকে দ্রুত ফেচ করতে পারে।
যেখানে LCP অ্যাসেটগুলোকে তাৎক্ষণিকভাবে খুঁজে পাওয়ার যোগ্য করে তোলা সম্ভব হয় না, সেখানেও একটি preload লিঙ্ক—যার fetchpriority ভ্যালু "high" থাকে—ব্রাউজারকে রিসোর্সটি যত দ্রুত সম্ভব লোড করার সুযোগ দেয়।
যদি এই বিকল্পগুলির কোনোটিই উপলব্ধ না থাকে—কারণ পৃষ্ঠা লোড হওয়ার পরবর্তী পর্যায়ে না পৌঁছানো পর্যন্ত সঠিক রিসোর্সটি জানা যাবে না—তাহলে রিসোর্সটি দেরিতে আবিষ্কৃত হওয়ার প্রভাব যতটা সম্ভব কমানোর জন্য আপনি ক্রস-অরিজিন রিসোর্সগুলিতে preconnect ব্যবহার করতে পারেন।
এছাড়াও, ব্যান্ডউইথ ব্যবহারের দিক থেকে preload তুলনায় preconnect কম ব্যয়বহুল, কিন্তু এটিও ঝুঁকিবিহীন নয়। অতিরিক্ত preload হিন্টের মতোই, TLS সার্টিফিকেটের ক্ষেত্রে অতিরিক্ত preconnect হিন্টও ব্যান্ডউইথ খরচ করে। খুব বেশি অরিজিনের সাথে প্রিকানেক্ট না করার ব্যাপারে সতর্ক থাকুন, কারণ এর ফলে ব্যান্ডউইথ নিয়ে দ্বন্দ্ব সৃষ্টি হতে পারে।
উপসংহার
যখন আপনি জানেন যে আপনি শীঘ্রই কোনো থার্ড-পার্টি ডোমেইন থেকে কিছু ডাউনলোড করবেন, কিন্তু রিসোর্সটির সঠিক URL আপনার জানা নেই, তখন পেজের গতি উন্নত করার জন্য এই দুটি রিসোর্স টিপস সহায়ক। উদাহরণস্বরূপ, জাভাস্ক্রিপ্ট লাইব্রেরি, ছবি বা ফন্ট বিতরণকারী CDN-গুলো। সীমাবদ্ধতা সম্পর্কে সচেতন থাকুন, শুধুমাত্র সবচেয়ে গুরুত্বপূর্ণ রিসোর্সগুলোর জন্য preconnect ব্যবহার করুন, বাকিগুলোর জন্য dns-prefetch উপর নির্ভর করুন এবং সর্বদা বাস্তব জগতে এর প্রভাব পরিমাপ করুন।