প্রারম্ভিক ইঙ্গিত সহ সার্ভার থিঙ্ক-টাইম ব্যবহার করে দ্রুত পৃষ্ঠা লোড হয়

আপনার সার্ভার কীভাবে গুরুত্বপূর্ণ সাবরিসোর্স সম্পর্কে ব্রাউজারকে ইঙ্গিত পাঠাতে পারে, তা জেনে নিন।

Kenji Baheux

Barry Pollard

প্রকাশিত: ২৩ জুন, ২০২২, সর্বশেষ হালনাগাদ: ১০ জুলাই, ২০২৬

আর্লি হিন্টস বলতে কী বোঝায়?

সময়ের সাথে সাথে ওয়েবসাইটগুলো আরও উন্নত হয়েছে। ফলে, অনুরোধ করা পেজটির জন্য HTML তৈরি করতে সার্ভারকে কিছু গুরুত্বপূর্ণ কাজ (যেমন, ডেটাবেস অ্যাক্সেস করা, বা CDN-এর অরিজিন সার্ভার অ্যাক্সেস করা) করতে হয়, যা অস্বাভাবিক কিছু নয়। দুর্ভাগ্যবশত, এই "সার্ভার থিঙ্ক-টাইম"-এর কারণে ব্রাউজার পেজটি রেন্ডার করা শুরু করার আগে অতিরিক্ত বিলম্ব ঘটে। প্রকৃতপক্ষে, সার্ভারের প্রতিক্রিয়া প্রস্তুত করতে যতক্ষণ সময় লাগে, ততক্ষণ পর্যন্ত সংযোগটি কার্যত নিষ্ক্রিয় থাকে।

আর্লি হিন্টস ছাড়া: মূল রিসোর্সের জন্য কীভাবে সাড়া দিতে হবে, তা নির্ধারণ করতে গিয়ে সবকিছু সার্ভারেই আটকে থাকে।

আর্লি হিন্টস হলো একটি HTTP স্ট্যাটাস কোড ( 103 Early Hints ) যা চূড়ান্ত প্রতিক্রিয়ার আগে একটি প্রাথমিক HTTP প্রতিক্রিয়া পাঠাতে ব্যবহৃত হয়। এটি সার্ভারকে মূল রিসোর্স তৈরি করার সময়, ব্রাউজারকে গুরুত্বপূর্ণ সাব-রিসোর্স (যেমন, পেজের জন্য স্টাইল শীট, গুরুত্বপূর্ণ জাভাস্ক্রিপ্ট) বা অরিজিন সম্পর্কে ইঙ্গিত পাঠাতে সাহায্য করে, যা পেজটি ব্যবহার করতে পারে। ব্রাউজার সেই ইঙ্গিতগুলো ব্যবহার করে সংযোগগুলোকে প্রস্তুত করতে পারে এবং মূল রিসোর্সের জন্য অপেক্ষা করার সময় সাব-রিসোর্সের জন্য অনুরোধ করতে পারে। অন্য কথায়, আর্লি হিন্টস ব্রাউজারকে সার্ভারের এই "চিন্তার সময়"-এর সুবিধা নিতে সাহায্য করে, যার ফলে পেজ লোডের গতি বাড়ে।

আর্লি হিন্টস-এর মাধ্যমে: সার্ভার চূড়ান্ত প্রতিক্রিয়া নির্ধারণ করার সময় রিসোর্স হিন্টস সহ একটি আংশিক প্রতিক্রিয়া পরিবেশন করতে পারে।

কিছু ক্ষেত্রে, Largest Contentful Paint- এর পারফরম্যান্সের উন্নতি কয়েকশ মিলিসেকেন্ড থেকে শুরু করে এক সেকেন্ড পর্যন্ত দ্রুততর হতে পারে, যেমনটা Shopify এবং Cloudflare-এর পর্যবেক্ষণে দেখা গেছে, এবং এই আগের ও পরের তুলনামূলক চিত্রে তা আরও স্পষ্ট।

WebPageTest (Moto G4 - DSL) দিয়ে একটি পরীক্ষামূলক ওয়েবসাইটে Early Hints-এর আগের ও পরের তুলনা

আর্লি হিন্টস কীভাবে ব্যবহার করবেন

দ্রষ্টব্য: বিষয়টি নিয়ে গভীরভাবে আলোচনার আগে জেনে রাখুন যে, আপনার সার্ভার যদি সাথে সাথেই একটি 200 (বা অন্য কোনো চূড়ান্ত রেসপন্স) পাঠাতে পারে, তাহলে আর্লি হিন্টস (Early Hints) তেমন কার্যকর নয়। এর পরিবর্তে, এই ধরনের পরিস্থিতিতে মূল রেসপন্সে ( Link HTTP হেডার ব্যবহার করে) অথবা মূল রেসপন্সের ভেতরে ( <link> এলিমেন্ট ব্যবহার করে) সাধারণ preload বা preconnect ব্যবহার করার কথা বিবেচনা করুন। যেসব ক্ষেত্রে আপনার সার্ভারের মূল রেসপন্স তৈরি করতে কিছুটা সময় প্রয়োজন হয়, সেসব ক্ষেত্রে পড়তে থাকুন!

আর্লি হিন্টস-এর সুবিধা নেওয়ার প্রথম ধাপ হলো শীর্ষস্থানীয় ল্যান্ডিং পেজগুলো শনাক্ত করা, অর্থাৎ, যে পেজগুলো থেকে আপনার ব্যবহারকারীরা সাধারণত আপনার ওয়েবসাইটে আসার পর শুরু করেন। এটি হোমপেজ হতে পারে, অথবা জনপ্রিয় পণ্যের তালিকা পেজও হতে পারে, যদি আপনার অনেক ব্যবহারকারী অন্য ওয়েবসাইট থেকে আসেন। অন্যান্য পেজের চেয়ে এই প্রবেশপথগুলো বেশি গুরুত্বপূর্ণ হওয়ার কারণ হলো, ব্যবহারকারী আপনার ওয়েবসাইটে যত বেশি নেভিগেট করতে থাকেন, আর্লি হিন্টস-এর উপযোগিতা তত কমতে থাকে (অর্থাৎ, দ্বিতীয় বা তৃতীয়বার নেভিগেট করার সময় ব্রাউজারের প্রয়োজনীয় সমস্ত সাব-রিসোর্স পাওয়ার সম্ভাবনা বেশি থাকে)। এছাড়াও, একটি চমৎকার প্রথম ছাপ তৈরি করাও সবসময় একটি ভালো কাজ!

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

আরও মনে রাখবেন যে, যদি আপনার প্রধান রিসোর্সগুলি ইতিমধ্যেই preconnect বা preload ব্যবহার করে থাকে, তাহলে আপনি এই অরিজিন বা রিসোর্সগুলিকে Early Hints-এর সম্ভাব্য প্রার্থী হিসেবে বিবেচনা করতে পারেন। আরও বিস্তারিত জানতে LCP কীভাবে অপ্টিমাইজ করতে হয় তা দেখুন। তবে, HTML থেকে Early Hints-এ preconnect এবং preload ডিরেক্টিভগুলি নির্বিচারে কপি করা সর্বোত্তম নাও হতে পারে ।

HTML-এ এগুলি ব্যবহার করার সময়, আপনি সাধারণত এমন রিসোর্সগুলিকে preconnect বা preload চাইবেন যা প্রি-লোড স্ক্যানার HTML-এ খুঁজে পাবে না—উদাহরণস্বরূপ, ফন্ট বা ব্যাকগ্রাউন্ড ইমেজ, যা অন্যথায় দেরিতে আবিষ্কৃত হতো। আর্লি হিন্টস-এর জন্য, আপনার কাছে HTML থাকবে না, তাই এর পরিবর্তে আপনি গুরুত্বপূর্ণ ডোমেইনগুলিতে preconnect বা গুরুত্বপূর্ণ রিসোর্সগুলি preload চাইতে পারেন, যা অন্যথায় HTML-এর শুরুতেই আবিষ্কৃত হতো —উদাহরণস্বরূপ, main.css বা app.js প্রি-লোড করা। এছাড়াও, সব ব্রাউজার আর্লি হিন্টস-এর জন্য preload সমর্থন করে না— ব্রাউজার সাপোর্ট দেখুন।

মূল বিষয়: আর্লি হিন্টস হিসেবে আপনি যা preconnect বা preload করার সিদ্ধান্ত নেন, তা আপনার HTML-এ ঐতিহ্যগতভাবে প্রি-কানেক্ট বা প্রি-লোড করা রিসোর্সগুলো থেকে ভিন্ন হতে পারে।

দ্বিতীয় ধাপটি হলো এমন রিসোর্স বা অরিজিনে আর্লি হিন্টস ব্যবহারের ঝুঁকি কমানো, যা হয়তো অপ্রচলিত বা মূল রিসোর্স দ্বারা আর ব্যবহৃত হয় না। উদাহরণস্বরূপ, যে রিসোর্সগুলো ঘন ঘন আপডেট এবং ভার্সন করা হয় (যেমন, example.com/css/main.fa231e9c.css ) সেগুলো সেরা পছন্দ নাও হতে পারে। উল্লেখ্য যে, এই উদ্বেগটি শুধু আর্লি হিন্টসের ক্ষেত্রেই সীমাবদ্ধ নয়, এটি যেকোনো preload বা preconnect ক্ষেত্রেই প্রযোজ্য, যেখানেই সেগুলো উপস্থিত থাকুক না কেন। এই ধরনের খুঁটিনাটি বিষয় অটোমেশন বা টেমপ্লেটিংয়ের মাধ্যমে সবচেয়ে ভালোভাবে সমাধান করা যায় (উদাহরণস্বরূপ, একটি ম্যানুয়াল প্রক্রিয়ায় preload এবং রিসোর্স ব্যবহারকারী আসল HTML ট্যাগের মধ্যে হ্যাশ বা ভার্সন ইউআরএল অমিল হওয়ার সম্ভাবনা বেশি থাকে)।

উদাহরণস্বরূপ, নিম্নলিখিত প্রবাহটি বিবেচনা করুন:

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]

সার্ভারটি অনুমান করছে যে main.abcd100.css প্রয়োজন হবে, এবং আর্লি হিন্টস (Early Hints) ব্যবহার করে এটি প্রি-লোড করার পরামর্শ দিচ্ছে:

103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]

কিছুক্ষণ পরেই, লিঙ্ক করা CSS সহ ওয়েব পেজটি পরিবেশিত হয়। দুর্ভাগ্যবশত, এই CSS রিসোর্সটি ঘন ঘন আপডেট করা হয়, এবং মূল রিসোর্সটি ইতিমধ্যেই পূর্বাভাসিত CSS রিসোর্সের ( abcd105 ) থেকে পাঁচটি সংস্করণ ( abcd100 ) এগিয়ে আছে।

200 OK
[...]
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.abcd105.css">

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

<html>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">

অবশেষে, সার্ভার সাইডে, আর্লি হিন্টস (Early Hints) সমর্থন করে এমন ব্রাউজার দ্বারা প্রেরিত মূল রিসোর্স অনুরোধগুলি সন্ধান করুন এবং অবিলম্বে 103 আর্লি হিন্টস দিয়ে প্রতিক্রিয়া জানান। 103 প্রতিক্রিয়ায়, প্রাসঙ্গিক প্রিকানেক্ট (preconnect) এবং প্রিলোড (preload) হিন্টস অন্তর্ভুক্ত করুন। মূল রিসোর্স প্রস্তুত হয়ে গেলে, স্বাভাবিক প্রতিক্রিয়াটি পাঠান (উদাহরণস্বরূপ, সফল হলে 200 OK)। ব্যাকওয়ার্ড কম্প্যাটিবিলিটির জন্য, চূড়ান্ত প্রতিক্রিয়ায় লিঙ্ক HTTP হেডার Link HTTP headers) অন্তর্ভুক্ত করা একটি ভালো অভ্যাস, এমনকি মূল রিসোর্স তৈরির অংশ হিসাবে স্পষ্ট হওয়া গুরুত্বপূর্ণ রিসোর্সগুলি দিয়ে এটিকে আরও সমৃদ্ধ করা যেতে পারে (উদাহরণস্বরূপ, যদি আপনি "দুটিতে বিভক্ত করুন" পরামর্শটি অনুসরণ করে থাকেন তবে একটি মূল রিসোর্সের ডায়নামিক অংশ)। এটি দেখতে এইরকম হবে:

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
103 Early Hints
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script

কিছুক্ষণ পর:

200 OK
Content-Length: 7531
Content-Type: text/html; charset=UTF-8
Content-encoding: br
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
Link: </experimental.3eab3290.css>; rel=preload; as=style
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">
   <script src="/common.js"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">

ব্রাউজার সমর্থন

যদিও 103 আর্লি হিন্টস সব প্রধান ব্রাউজারে সমর্থিত, তবে আর্লি হিন্টে পাঠানো যায় এমন নির্দেশাবলী ব্রাউজারভেদে ভিন্ন হয়ে থাকে:

প্রিকানেক্ট সমর্থন:

Browser Support

• 103
• 103
• 120
• 17

প্রিলোড সমর্থন:

Browser Support

• 103
• 103
• 123
• x

Chrome DevTools-এ 103 Early Hints-এর সমর্থনও রয়েছে এবং Link হেডারগুলি ডকুমেন্ট রিসোর্সগুলিতে দেখা যায়:

আর্লি হিন্টস Link হেডারগুলো ক্রোম ডেভটুলস-এ দেখানো হয়।

মনে রাখবেন, আর্লি হিন্টস রিসোর্স ব্যবহার করার জন্য ডেভটুলস-এ Disable cache টিক দেওয়া যাবে না, কারণ আর্লি হিন্টস ব্রাউজার ক্যাশে ব্যবহার করে। প্রি-লোডেড রিসোর্সগুলির জন্য, ইনিশিয়েটর হিসেবে Early-hints এবং সাইজ হিসেবে (Disk cache) দেখানো হবে।

আর্লি হিন্টেড রিসোর্সগুলোর একটি early-hints ইনিশিয়েটর থাকে এবং এগুলো ডিস্ক ক্যাশ থেকে লোড করা হয়।

এর জন্য HTTPS পরীক্ষার জন্য একটি বিশ্বস্ত সার্টিফিকেটও প্রয়োজন।

ডেভটুলস-এ ইনিশিয়েটর হিসেবে ফায়ারফক্সের সরাসরি ১০৩ আর্লি হিন্টস সাপোর্ট না থাকলেও, আর্লি হিন্টস ব্যবহার করে লোড করা রিসোর্সগুলো ‘ট্রান্সফারড’ কলামে cached হিসেবে দেখায় এবং সেগুলোতে ক্লিক করলে একটি X-Moz: early hint HTTP রিকোয়েস্ট হেডার থাকে।

সার্ভার সমর্থন

জনপ্রিয় ওপেন সোর্স HTTP সার্ভার সফটওয়্যারগুলোর মধ্যে আর্লি হিন্টস-এর সমর্থনের মাত্রা সম্পর্কে এখানে একটি সংক্ষিপ্ত বিবরণ দেওয়া হলো:

• অ্যাপাচি: mod_http2 ব্যবহার করে সমর্থিত ।
• H2O: সমর্থিত ।
• NGINX: সমর্থিত ।
• নোড: http এবং http2 এর জন্য সমর্থিত ।

আরও সহজ উপায়ে আর্লি হিন্টস চালু করুন

আপনি যদি নিম্নলিখিত CDN বা প্ল্যাটফর্মগুলির মধ্যে একটি ব্যবহার করেন, তাহলে আপনার ম্যানুয়ালি আর্লি হিন্টস প্রয়োগ করার প্রয়োজন নাও হতে পারে। আপনার সলিউশন প্রোভাইডার আর্লি হিন্টস সমর্থন করে কিনা তা জানতে তাদের অনলাইন ডকুমেন্টেশন দেখুন, অথবা এখানে দেওয়া অসম্পূর্ণ তালিকাটি দেখুন:

• ক্লাউডফ্লেয়ারে প্রাথমিক ইঙ্গিত
• ফাস্টলি-তে প্রাথমিক ইঙ্গিত ।
• আকামাই সম্পর্কে প্রাথমিক ইঙ্গিত ।

যেসব ক্লায়েন্ট আর্লি হিন্টস সমর্থন করে না, তাদের জন্য সমস্যা এড়ানোর উপায়

100 রেঞ্জের তথ্যমূলক HTTP রেসপন্সগুলো HTTP স্ট্যান্ডার্ডের একটি অংশ, কিন্তু কিছু পুরোনো ক্লায়েন্ট বা বট এগুলো নিয়ে সমস্যায় পড়তে পারে, কারণ 103 আর্লি হিন্টস চালু হওয়ার আগে সাধারণ ওয়েব ব্রাউজিংয়ের জন্য এগুলো খুব কমই ব্যবহৃত হতো।

শুধুমাত্র সেইসব ক্লায়েন্টদের জবাবে 103 আর্লি হিন্টস পাঠানো উচিত, যারা sec-fetch-mode: navigate HTTP রিকোয়েস্ট হেডার পাঠায়। এর ফলে এই হিন্টসগুলো কেবল সেইসব নতুন ক্লায়েন্টদের জন্যই পাঠানো হবে, যারা পরবর্তী প্রতিক্রিয়ার জন্য অপেক্ষা করতে জানে। এছাড়াও, যেহেতু আর্লি হিন্টস শুধুমাত্র নেভিগেশন রিকোয়েস্টের ক্ষেত্রেই সমর্থিত ( বর্তমান সীমাবদ্ধতা দেখুন), এর একটি বাড়তি সুবিধা হলো এটি অন্যান্য রিকোয়েস্টে অপ্রয়োজনে এগুলো পাঠানো এড়াতে সাহায্য করে।

এছাড়াও, আর্লি হিন্টস শুধুমাত্র HTTP/2 বা HTTP/3 সংযোগের মাধ্যমে পাঠানোর পরামর্শ দেওয়া হয় এবং বেশিরভাগ ব্রাউজার কেবল এই প্রোটোকলগুলোর মাধ্যমেই সেগুলো গ্রহণ করে।

উন্নত প্যাটার্ন

আপনি যদি আপনার প্রধান ল্যান্ডিং পেজগুলিতে আর্লি হিন্টস সম্পূর্ণরূপে প্রয়োগ করে থাকেন এবং আরও সুযোগের সন্ধান করেন, তাহলে নিম্নলিখিত উন্নত প্যাটার্নটি আপনার আগ্রহের বিষয় হতে পারে।

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

বর্তমান সীমাবদ্ধতা

ক্রোমে বাস্তবায়িত আর্লি হিন্টস-এর সীমাবদ্ধতাগুলো নিচে দেওয়া হলো:

• শুধুমাত্র নেভিগেশন অনুরোধের জন্য উপলব্ধ (অর্থাৎ, শীর্ষ স্তরের ডকুমেন্টের মূল রিসোর্স)।
• শুধুমাত্র preconnect এবং preload সমর্থন করে (অর্থাৎ, prefetch সমর্থিত নয়)।
• চূড়ান্ত প্রতিক্রিয়ায় আর্লি হিন্টস-এর পর একটি ক্রস-অরিজিন রিডাইরেক্ট করা হলে, ব্রাউজারগুলো আর্লি হিন্টস ব্যবহার করে প্রাপ্ত রিসোর্স এবং কানেকশনগুলো বাদ দিয়ে দেবে।
• আর্লি হিন্টস ব্যবহার করে প্রি-লোড করা রিসোর্সগুলো HTTP ক্যাশে সংরক্ষিত থাকে এবং পরে পেজটি সেখান থেকে সেগুলো পুনরুদ্ধার করে। তাই শুধুমাত্র ক্যাশেযোগ্য রিসোর্সগুলোই আর্লি হিন্টস ব্যবহার করে প্রি-লোড করা যায়, অন্যথায় রিসোর্সটি দুইবার ফেচ করা হবে (একবার আর্লি হিন্টস দ্বারা এবং আবার ডকুমেন্ট দ্বারা)। ক্রোমে, অবিশ্বস্ত HTTPS সার্টিফিকেটের জন্য HTTP ক্যাশে নিষ্ক্রিয় থাকে (এমনকি আপনি পেজটি লোড করতে এগিয়ে গেলেও)।
• HTTP <link> হেডার ব্যবহার করে রেসপন্সিভ ইমেজ প্রি-লোড করা ( imagesrcset , imagesizes বা media ব্যবহার করে) <link> নাও হতে পারে, কারণ ডকুমেন্ট তৈরি না হওয়া পর্যন্ত ভিউপোর্ট নির্ধারিত হয় না। সর্বোত্তম ক্ষেত্রে, এগুলি ডকুমেন্ট প্রাপ্ত হওয়া পর্যন্ত অপেক্ষা করবে, যা 103 আর্লি হিন্টস-এর প্রধান সুবিধাগুলিকে নষ্ট করে দেয়।

অন্যান্য ব্রাউজারগুলিতেও অনুরূপ সীমাবদ্ধতা রয়েছে এবং, যেমনটি পূর্বে উল্লেখ করা হয়েছে , কিছু ব্রাউজার 103 আর্লি হিন্টসকে আরও সীমাবদ্ধ করে শুধুমাত্র preconnect সীমাবদ্ধ রাখে।

H2/পুশের সাথে সম্পর্ক

আপনি যদি বাতিল হয়ে যাওয়া HTTP2/Push ফিচারটির সাথে পরিচিত হন, তাহলে আপনার মনে প্রশ্ন জাগতে পারে যে আর্লি হিন্টস (Early Hints) এর থেকে কীভাবে আলাদা। যেখানে আর্লি হিন্টস-এর ক্ষেত্রে ব্রাউজারকে গুরুত্বপূর্ণ সাবরিসোর্সগুলো ফেচ করা শুরু করার জন্য একটি রাউন্ড ট্রিপের প্রয়োজন হয়, সেখানে HTTP2/Push-এর মাধ্যমে সার্ভার রেসপন্সের সাথেই সাবরিসোর্সগুলো পুশ করা শুরু করতে পারত। যদিও এটি শুনতে চমৎকার মনে হয়, এর ফলে একটি বড় কাঠামোগত অসুবিধা দেখা দেয়: HTTP2/Push-এর ক্ষেত্রে ব্রাউজারের কাছে আগে থেকেই থাকা সাবরিসোর্সগুলো পুশ করা এড়ানো অত্যন্ত কঠিন ছিল। এই "ওভার-পুশিং" প্রভাবের ফলে নেটওয়ার্ক ব্যান্ডউইথের ব্যবহার কম কার্যকর হয়ে পড়ে, যা পারফরম্যান্সের সুবিধাগুলোকে উল্লেখযোগ্যভাবে বাধাগ্রস্ত করে। সার্বিকভাবে, ক্রোমের ডেটা থেকে দেখা যায় যে, ওয়েবজুড়ে পারফরম্যান্সের জন্য HTTP2/Push প্রকৃতপক্ষে একটি নিট নেতিবাচক বিষয় ছিল।

এর বিপরীতে, আর্লি হিন্টস বাস্তবে আরও ভালোভাবে কাজ করে, কারণ এটি একটি প্রাথমিক প্রতিক্রিয়া পাঠানোর ক্ষমতার সাথে এমন ইঙ্গিতগুলিকে একত্রিত করে, যা ব্রাউজারকে তার প্রকৃত প্রয়োজনীয় জিনিসটি ফেচ করা বা তার সাথে সংযোগ স্থাপনের দায়িত্ব দেয়। যদিও আর্লি হিন্টস তাত্ত্বিকভাবে HTTP2/Push দ্বারা সমাধানযোগ্য সমস্ত ব্যবহারের ক্ষেত্রগুলিকে অন্তর্ভুক্ত করে না, আমরা বিশ্বাস করি যে নেভিগেশনের গতি বাড়ানোর জন্য আর্লি হিন্টস একটি আরও বাস্তবসম্মত সমাধান।

থাম্বনেইল ছবিটি পিয়ের বামিনের সৌজন্যে।