এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

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

Kenji Baheux

Barry Pollard

প্রারম্ভিক ইঙ্গিত কি?

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

পৃষ্ঠার লোড এবং অন্যান্য সংস্থানগুলির লোডের মধ্যে 200ms এর সার্ভারের চিন্তাভাবনার ব্যবধান দেখানো চিত্র৷ — প্রারম্ভিক ইঙ্গিত ছাড়া: মূল সংস্থানের জন্য কীভাবে প্রতিক্রিয়া জানাতে হবে তা নির্ধারণ করে সার্ভারে সবকিছু ব্লক করা হয়েছে।

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

ইমেজ দেখায় যে কীভাবে প্রারম্ভিক ইঙ্গিতগুলি পৃষ্ঠাটিকে একটি আংশিক প্রতিক্রিয়া পাঠাতে দেয়৷ — প্রারম্ভিক ইঙ্গিত সহ: সার্ভার চূড়ান্ত প্রতিক্রিয়া নির্ধারণ করার সময় সম্পদ ইঙ্গিত সহ একটি আংশিক প্রতিক্রিয়া পরিবেশন করতে পারে

কিছু কিছু ক্ষেত্রে, শপিফাই এবং ক্লাউডফ্লেয়ার দ্বারা পর্যবেক্ষণ করা সবচেয়ে বড় কন্টেন্টফুল পেইন্টের পারফরম্যান্সের উন্নতি কয়েকশ মিলিসেকেন্ড থেকে যেতে পারে এবং এক সেকেন্ড পর্যন্ত দ্রুত হতে পারে, যেমনটি আগে এবং পরে তুলনা করা হয়েছে:

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

কিভাবে প্রারম্ভিক ইঙ্গিত ব্যবহার করবেন

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

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

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

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

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

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

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

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

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

সার্ভার ভবিষ্যদ্বাণী করে যে main.abcd100.css প্রয়োজন হবে, এবং এটিকে প্রারম্ভিক ইঙ্গিত ব্যবহার করে প্রিলোড করার পরামর্শ দেয়:

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">

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

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

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

Browser Support

Chrome DevTools-এ 103টি প্রারম্ভিক ইঙ্গিত সমর্থন রয়েছে এবং Link শিরোনামগুলি নথির সংস্থানগুলিতে দেখা যেতে পারে:

নেটওয়ার্ক প্যানেল প্রারম্ভিক ইঙ্গিত শিরোনাম দেখাচ্ছে — প্রারম্ভিক ইঙ্গিত `Link` শিরোনাম Chrome DevTools এ দেখানো হয়েছে।

প্রারম্ভিক ইঙ্গিত সংস্থানগুলি ব্যবহার করার জন্য নোট করুন, Disable cache অবশ্যই DevTools-এ টিক দেওয়া উচিত নয় কারণ প্রারম্ভিক ইঙ্গিতগুলি ব্রাউজার ক্যাশে ব্যবহার করে৷ প্রিলোড করা সংস্থানগুলির জন্য, সূচনাকারী early-hints হিসাবে এবং আকার (Disk cache) হিসাবে দেখাবে:

প্রারম্ভিক ইঙ্গিত শুরুকারীদের দেখানো নেটওয়ার্ক প্যানেল — প্রারম্ভিক ইঙ্গিতকৃত সংস্থানগুলির একটি `early-hints` ইনিশিয়েটর থাকে এবং ডিস্ক ক্যাশে থেকে লোড করা হয়।

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

Firefox (v126 অনুযায়ী) DevTools-এ স্পষ্ট 103 প্রাথমিক ইঙ্গিত সমর্থন নেই, তবে প্রাথমিক ইঙ্গিতগুলি ব্যবহার করে লোড করা সংস্থানগুলি HTTP হেডার তথ্য দেখায় না যা একটি নির্দেশক যেগুলি প্রাথমিক ইঙ্গিতগুলির পরেও লোড হয়েছিল৷

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

জনপ্রিয় ওপেন সোর্স সফ্টওয়্যার HTTP সার্ভার সফ্টওয়্যারগুলির মধ্যে প্রাথমিক ইঙ্গিতগুলির জন্য সমর্থনের স্তরের একটি দ্রুত সারাংশ এখানে রয়েছে:

Apache: mod_http2 ব্যবহার করে সমর্থিত ।
H2O: সমর্থিত ।
NGINX: পরীক্ষামূলক মডিউল ।
নোড: http এবং http2 এর জন্য 18.11.0 থেকে সমর্থিত

সহজ উপায় প্রাথমিক ইঙ্গিত সক্ষম করুন

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

প্রাথমিক ইঙ্গিত সমর্থন করে না এমন ক্লায়েন্টদের জন্য সমস্যাগুলি কীভাবে এড়ানো যায়

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

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

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

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

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

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

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

Chrome-এ বাস্তবায়িত প্রাথমিক ইঙ্গিতগুলির সীমাবদ্ধতা এখানে রয়েছে:

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

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

এরপর কি?

সম্প্রদায়ের আগ্রহের উপর নির্ভর করে, আমরা নিম্নোক্ত ক্ষমতাগুলির সাথে প্রাথমিক ইঙ্গিতগুলির বাস্তবায়নকে বাড়িয়ে তুলতে পারি:

এইচটিটিপি ক্যাশের পরিবর্তে মেমরি ক্যাশে ব্যবহার করে ক্যাশেযোগ্য সম্পদের জন্য প্রাথমিক ইঙ্গিত।
সাবরিসোর্স অনুরোধে প্রাথমিক ইঙ্গিত পাঠানো হয়েছে।
iframe প্রধান সম্পদ অনুরোধে প্রাথমিক ইঙ্গিত পাঠানো হয়েছে.
প্রারম্ভিক ইঙ্গিতগুলিতে প্রিফেচের জন্য সমর্থন।

আমরা আপনার ইনপুটকে স্বাগত জানাই যে কোন দিকগুলিকে অগ্রাধিকার দিতে হবে, এবং কীভাবে প্রাথমিক ইঙ্গিতগুলি আরও উন্নত করা যায়৷

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

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

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

পিয়েরে বামিনের থাম্বনেইল চিত্র।

Kenji Baheux

Barry Pollard

প্রারম্ভিক ইঙ্গিত কি?

কিভাবে প্রারম্ভিক ইঙ্গিত ব্যবহার করবেন

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

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

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

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">

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">

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

পূর্ব সংযোগ সমর্থন:

Browser Support

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

Browser Support

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

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

Apache: mod_http2 ব্যবহার করে সমর্থিত ।
H2O: সমর্থিত ।
NGINX: পরীক্ষামূলক মডিউল ।
নোড: http এবং http2 এর জন্য 18.11.0 থেকে সমর্থিত

সহজ উপায় প্রাথমিক ইঙ্গিত সক্ষম করুন

প্রাথমিক ইঙ্গিত সমর্থন করে না এমন ক্লায়েন্টদের জন্য সমস্যাগুলি কীভাবে এড়ানো যায়

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

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

Chrome-এ বাস্তবায়িত প্রাথমিক ইঙ্গিতগুলির সীমাবদ্ধতা এখানে রয়েছে:

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

এরপর কি?

এইচটিটিপি ক্যাশের পরিবর্তে মেমরি ক্যাশে ব্যবহার করে ক্যাশেযোগ্য সম্পদের জন্য প্রাথমিক ইঙ্গিত।
সাবরিসোর্স অনুরোধে প্রাথমিক ইঙ্গিত পাঠানো হয়েছে।
iframe প্রধান সম্পদ অনুরোধে প্রাথমিক ইঙ্গিত পাঠানো হয়েছে.
প্রারম্ভিক ইঙ্গিতগুলিতে প্রিফেচের জন্য সমর্থন।

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

পিয়েরে বামিনের থাম্বনেইল চিত্র।

Kenji Baheux

Barry Pollard

প্রারম্ভিক ইঙ্গিত কি?

কিভাবে প্রারম্ভিক ইঙ্গিত ব্যবহার করবেন

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

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

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

সার্ভারটি ভবিষ্যদ্বাণী করে যে main.abcd100.css প্রয়োজন হবে এবং প্রাথমিক ইঙ্গিতগুলি ব্যবহার করে এটি প্রিলোড করার পরামর্শ দেয়:

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

কয়েক মুহুর্ত পরে, লিঙ্কযুক্ত সিএসএস সহ ওয়েব পৃষ্ঠাটি পরিবেশন করা হয়। দুর্ভাগ্যক্রমে, এই সিএসএস সংস্থানটি প্রায়শই আপডেট করা হয় এবং মূল সংস্থানটি ইতিমধ্যে পূর্বাভাসিত সিএসএস রিসোর্স (এবিসিডি 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">

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

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

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

Browser Support

ক্রোম ডেভটুলসের 103 টি প্রাথমিক ইঙ্গিত সমর্থন রয়েছে এবং Link শিরোনামগুলি নথির সংস্থানগুলিতে দেখা যায়:

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

নেটওয়ার্ক প্যানেল প্রারম্ভিক ইঙ্গিতগুলি সূচনা দেখায় — প্রারম্ভিক ইঙ্গিতযুক্ত সংস্থানগুলির একটি `early-hints` সূচনা থাকে এবং ডিস্ক ক্যাশে থেকে লোড হয়।

এটির জন্য এইচটিটিপিএস পরীক্ষার জন্য একটি বিশ্বস্ত শংসাপত্রের প্রয়োজন।

ফায়ারফক্স (যেমন ভি 126 হিসাবে) ডিভটুলগুলিতে সুস্পষ্ট 103 প্রাথমিক ইঙ্গিত সমর্থন নেই, তবে প্রাথমিক ইঙ্গিতগুলি ব্যবহার করে লোড করা সংস্থানগুলি এইচটিটিপি শিরোনামের তথ্য দেখায় না যা একটি সূচক যা তারা প্রাথমিক ইঙ্গিত সত্ত্বেও লোড করা হয়েছিল।

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

জনপ্রিয় ওপেন সোর্স সফ্টওয়্যার এইচটিটিপি সার্ভার সফ্টওয়্যারগুলির মধ্যে প্রাথমিক ইঙ্গিতগুলির জন্য সমর্থনের স্তরের একটি দ্রুত সংক্ষিপ্তসার এখানে রয়েছে:

অ্যাপাচি: MOD_HTTP2 ব্যবহার করে সমর্থিত ।
এইচ 2 ও: সমর্থিত ।
এনগিনেক্স: পরীক্ষামূলক মডিউল ।
নোড: এইচটিটিপি এবং এইচটিপি 2 এর জন্য 18.11.0 থেকে সমর্থিত

প্রারম্ভিক ইঙ্গিতগুলি সহজ উপায় সক্ষম করুন

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

প্রাথমিক ইঙ্গিতগুলি সমর্থন করে না এমন ক্লায়েন্টদের জন্য কীভাবে সমস্যাগুলি এড়ানো যায়

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

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

তদতিরিক্ত, প্রাথমিক ইঙ্গিতগুলি কেবলমাত্র এইচটিটিপি/2 বা এইচটিটিপি/3 সংযোগের মাধ্যমে প্রেরণের জন্য সুপারিশ করা হয় এবং বেশিরভাগ ব্রাউজারগুলি কেবল সেই প্রোটোকলগুলিতে এগুলি গ্রহণ করবে।

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

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

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

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

ক্রোমে প্রয়োগ করা হিসাবে প্রাথমিক ইঙ্গিতগুলির সীমাবদ্ধতা এখানে রয়েছে:

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

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

এরপর কি?

সম্প্রদায়ের আগ্রহের উপর নির্ভর করে আমরা নিম্নলিখিত ক্ষমতাগুলির সাথে আমাদের প্রাথমিক ইঙ্গিতগুলির বাস্তবায়ন বাড়িয়ে তুলতে পারি:

এইচটিটিপি ক্যাশের চেয়ে মেমরি ক্যাশে ব্যবহার করে অপ্রয়োজনীয় সংস্থানগুলির জন্য প্রাথমিক ইঙ্গিতগুলি।
প্রাথমিক ইঙ্গিতগুলি সাব্রেসোর্স অনুরোধগুলিতে প্রেরণ করা হয়।
প্রাথমিক ইঙ্গিতগুলি আইফ্রেমে প্রধান সম্পদ অনুরোধগুলিতে প্রেরণ করা হয়।
প্রারম্ভিক ইঙ্গিতগুলিতে প্রিফেচের জন্য সমর্থন।

কোন দিকগুলি অগ্রাধিকার দিতে হবে এবং কীভাবে প্রাথমিক ইঙ্গিতগুলি আরও উন্নত করা যায় তার উপর আমরা আপনার ইনপুটকে স্বাগত জানাই।

এইচ 2/পুশের সাথে সম্পর্ক

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

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

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