আপনার সার্ভার কীভাবে গুরুত্বপূর্ণ উপ-সম্পদ সম্পর্কে ব্রাউজারে ইঙ্গিত পাঠাতে পারে তা খুঁজে বের করুন।
প্রারম্ভিক ইঙ্গিত কি?
সময়ের সাথে সাথে ওয়েবসাইটগুলি আরও পরিশীলিত হয়েছে। যেমন, এটা অস্বাভাবিক নয় যে অনুরোধ করা পৃষ্ঠার জন্য এইচটিএমএল তৈরি করার জন্য একটি সার্ভারকে নন-তুচ্ছ কাজ (উদাহরণস্বরূপ, ডাটাবেসে অ্যাক্সেস, বা CDN-এর অরিজিন সার্ভার অ্যাক্সেস) করতে হবে। দুর্ভাগ্যবশত, ব্রাউজার পৃষ্ঠাটি রেন্ডার করা শুরু করার আগে এই "সার্ভার থিঙ্ক-টাইম" এর ফলে অতিরিক্ত বিলম্ব হয়। প্রকৃতপক্ষে, যতক্ষণ সার্ভারের প্রতিক্রিয়া প্রস্তুত করতে লাগে ততক্ষণ সংযোগ কার্যকরভাবে নিষ্ক্রিয় হয়ে যায়।
Early Hints হল একটি HTTP স্ট্যাটাস কোড ( 103 Early Hints ) যা একটি চূড়ান্ত প্রতিক্রিয়ার আগে একটি প্রাথমিক HTTP প্রতিক্রিয়া পাঠাতে ব্যবহৃত হয়। এটি একটি সার্ভারকে গুরুত্বপূর্ণ সাব-রিসোর্স (উদাহরণস্বরূপ, পৃষ্ঠার জন্য স্টাইলশীট, জটিল জাভাস্ক্রিপ্ট) বা অরিজিন সম্পর্কে ব্রাউজারে ইঙ্গিত পাঠাতে দেয় যা সম্ভবত পৃষ্ঠাটি ব্যবহার করবে, যখন সার্ভার প্রধান সংস্থান তৈরি করতে ব্যস্ত থাকে। ব্রাউজার সংযোগগুলি গরম করার জন্য সেই ইঙ্গিতগুলি ব্যবহার করতে পারে এবং প্রধান সংস্থানের জন্য অপেক্ষা করার সময় উপ-সম্পদগুলির অনুরোধ করতে পারে। অন্য কথায়, প্রারম্ভিক ইঙ্গিত ব্রাউজারকে আগে থেকে কিছু কাজ করে এই ধরনের "সার্ভার থিঙ্ক-টাইম" এর সুবিধা নিতে সাহায্য করে, যার ফলে পৃষ্ঠা লোডের গতি বাড়ে।
কিছু ক্ষেত্রে, শপিফাই এবং ক্লাউডফ্লেয়ার দ্বারা পর্যবেক্ষিত হিসাবে, লার্জেস্ট কনটেন্টফুল পেইন্টের পারফরম্যান্সের উন্নতি কয়েকশ মিলিসেকেন্ড থেকে যেতে পারে, এবং এক সেকেন্ড পর্যন্ত দ্রুত, যেমনটি তুলনা করার আগে/পরে দেখা গেছে:
প্রারম্ভিক ইঙ্গিত বাস্তবায়ন
বিষয়ের গভীরে যাওয়ার আগে, অনুগ্রহ করে মনে রাখবেন যে আপনার সার্ভার এখনই 200 (বা অন্যান্য চূড়ান্ত প্রতিক্রিয়া) পাঠাতে পারলে প্রাথমিক ইঙ্গিতগুলি কার্যকর হবে না৷ পরিবর্তে, এই ধরনের পরিস্থিতিতে নিয়মিত লিঙ্ক <link> link rel=preload বা link link rel=preconnect ব্যবহার করার কথা বিবেচনা করুন। যে ক্ষেত্রে আপনার সার্ভারের প্রধান প্রতিক্রিয়া তৈরি করতে একটু সময় প্রয়োজন, পড়ুন!
Early Hints-এর সুবিধা নেওয়ার প্রথম ধাপ হল শীর্ষস্থানীয় ল্যান্ডিং পৃষ্ঠাগুলি চিহ্নিত করা, অর্থাৎ, আপনার ব্যবহারকারীরা যখন আপনার ওয়েবসাইট পরিদর্শন করে তখন সাধারণত সেই পৃষ্ঠাগুলি শুরু করে। এটি হোমপেজ হতে পারে, অথবা জনপ্রিয় পণ্য তালিকা পৃষ্ঠা হতে পারে যদি আপনার অনেক ব্যবহারকারী অন্য ওয়েবসাইট থেকে আসে। এই এন্ট্রি পয়েন্টগুলি অন্যান্য পৃষ্ঠাগুলির চেয়ে বেশি গুরুত্বপূর্ণ হওয়ার কারণ হল ব্যবহারকারী আপনার ওয়েবসাইটের চারপাশে নেভিগেট করার সাথে সাথে প্রাথমিক ইঙ্গিতগুলির উপযোগিতা হ্রাস পায় (অর্থাৎ, দ্বিতীয় বা তৃতীয় পরবর্তী নেভিগেশনে ব্রাউজারটির প্রয়োজনীয় সমস্ত উপ-সম্পদ থাকার সম্ভাবনা বেশি) . একটি মহান প্রথম ছাপ প্রদান করা সবসময় একটি ভাল ধারণা!
এখন যেহেতু আপনার কাছে ল্যান্ডিং পৃষ্ঠাগুলির এই অগ্রাধিকার তালিকা রয়েছে, পরবর্তী ধাপে প্রথম আনুমানিক হিসাবে, কোন উত্স বা উপ-সম্পদগুলি প্রি-কানেক্ট বা প্রিলোড ইঙ্গিতগুলির জন্য ভাল প্রার্থী হবে তা চিহ্নিত করা। সাধারণত, সেগুলি হবে উৎপত্তি এবং উপ-সম্পদ যা মূল ব্যবহারকারীর মেট্রিক্সে সবচেয়ে বেশি অবদান রাখে যেমন Largest Contentful Paint , বা First Contentful Paint ৷ আরও সুনির্দিষ্টভাবে, রেন্ডার-ব্লকিং সাব-রিসোর্স যেমন সিঙ্ক্রোনাস জাভাস্ক্রিপ্ট, স্টাইলশীট বা এমনকি ওয়েব ফন্টগুলি সন্ধান করুন। একইভাবে, মূল ব্যবহারকারীর মেট্রিক্সে অনেক অবদান রাখে এমন সাব-রিসোর্স হোস্ট করে এমন উৎসের সন্ধান করুন। দ্রষ্টব্য: যদি আপনার প্রধান সংস্থানগুলি ইতিমধ্যেই <link rel=preconnect> বা <link rel=preload> ব্যবহার করে থাকে, আপনি প্রাথমিক ইঙ্গিতগুলির জন্য প্রার্থীদের মধ্যে এই উত্সগুলি বা সংস্থানগুলি বিবেচনা করতে পারেন৷ আরো বিস্তারিত জানার জন্য এই নিবন্ধটি দেখুন.
দ্বিতীয় ধাপে অপ্রচলিত হতে পারে বা মূল সংস্থান দ্বারা আর ব্যবহার করা হয় না এমন সংস্থান বা উত্সগুলির উপর প্রাথমিক ইঙ্গিতগুলি ব্যবহার করার ঝুঁকি হ্রাস করা। উদাহরণস্বরূপ, ঘন ঘন আপডেট করা এবং সংস্করণ করা সংস্থানগুলি (উদাহরণস্বরূপ, example.com/css/main.fa231e9c.css ) সেরা পছন্দ নাও হতে পারে৷ মনে রাখবেন যে এই উদ্বেগটি প্রারম্ভিক ইঙ্গিতগুলির জন্য নির্দিষ্ট নয়, এটি যে কোনও লিঙ্কের ক্ষেত্রে প্রযোজ্য rel=preload বা rel=preconnect যেখানেই তারা উপস্থিত থাকতে পারে৷ অটোমেশন বা টেমপ্লেটিং-এর সাথে সবচেয়ে ভালোভাবে মোকাবেলা করা এই ধরনের বিবরণ (উদাহরণস্বরূপ, একটি ম্যানুয়াল প্রক্রিয়ার ফলে link rel=preload এবং রিসোর্স ব্যবহার করে প্রকৃত HTML ট্যাগের মধ্যে অমিল হ্যাশ বা সংস্করণ ইউআরএল হওয়ার সম্ভাবনা বেশি)।
একটি উদাহরণ হিসাবে, নিম্নলিখিত প্রবাহ বিবেচনা করুন:
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 রিসোর্স ( abcd100 ) থেকে পাঁচটি সংস্করণ ( abcd105 ) এগিয়ে রয়েছে।
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টি প্রারম্ভিক ইঙ্গিতগুলি সমস্ত প্রধান ব্রাউজারে সমর্থিত, তবে প্রারম্ভিক ইঙ্গিতগুলিতে পাঠানো নির্দেশাবলী প্রতিটি ব্রাউজারে আলাদা হয়:
পূর্ব সংযোগ সমর্থন:
ব্রাউজার সমর্থন
- 103
- 103
- 120
- 17
প্রিলোড সমর্থন:
ব্রাউজার সমর্থন
- 103
- 103
- 123
- এক্স
সার্ভার সমর্থন
জনপ্রিয় OSS 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 প্রাথমিক ইঙ্গিতগুলির মাধ্যমে প্রাপ্ত সংস্থান এবং সংযোগগুলি বাদ দেবে৷
অন্যান্য ব্রাউজারগুলিরও অনুরূপ সীমাবদ্ধতা রয়েছে এবং আরও 103টি প্রারম্ভিক ইঙ্গিতগুলিকে শুধুমাত্র preconnect জন্য সীমাবদ্ধ করে৷
এরপর কি?
সম্প্রদায়ের আগ্রহের উপর নির্ভর করে, আমরা নিম্নোক্ত ক্ষমতাগুলির সাথে প্রাথমিক ইঙ্গিতগুলির বাস্তবায়নকে বাড়িয়ে তুলতে পারি:
- সাব-রিসোর্স অনুরোধে প্রাথমিক ইঙ্গিত পাঠানো হয়েছে।
- iframe প্রধান সম্পদ অনুরোধে প্রাথমিক ইঙ্গিত পাঠানো হয়েছে.
- প্রারম্ভিক ইঙ্গিতগুলিতে প্রিফেচের জন্য সমর্থন।
আমরা আপনার ইনপুটকে স্বাগত জানাই যে কোন দিকগুলিকে অগ্রাধিকার দিতে হবে, এবং কীভাবে প্রাথমিক ইঙ্গিতগুলি আরও উন্নত করা যায়৷
H2/পুশের সাথে সম্পর্ক
আপনি যদি অপ্রচলিত HTTP2/পুশ বৈশিষ্ট্যের সাথে পরিচিত হন তবে আপনি ভাবতে পারেন যে প্রাথমিক ইঙ্গিতগুলি কীভাবে আলাদা। যদিও প্রারম্ভিক ইঙ্গিতগুলির জন্য ব্রাউজারকে সমালোচনামূলক সাব-রিসোর্সগুলি আনা শুরু করার জন্য একটি রাউন্ড ট্রিপের প্রয়োজন, HTTP2/পুশ সহ সার্ভার প্রতিক্রিয়ার পাশাপাশি সাব-রিসোর্সগুলি পুশ করা শুরু করতে পারে৷ যদিও এটি আশ্চর্যজনক শোনাচ্ছে, এর ফলে একটি মূল কাঠামোগত ক্ষতি হয়েছে: HTTP2/Push-এর সাহায্যে ব্রাউজারে ইতিমধ্যে থাকা সাব-রিসোর্সগুলিকে পুশ করা এড়ানো অত্যন্ত কঠিন ছিল। এই "ওভার-পুশিং" প্রভাবের ফলে নেটওয়ার্ক ব্যান্ডউইথের কম দক্ষ ব্যবহার হয়েছে, যা কার্যকারিতা সুবিধাগুলিকে উল্লেখযোগ্যভাবে বাধা দেয়। সামগ্রিকভাবে, ক্রোম ডেটা দেখিয়েছে যে HTTP2/পুশ প্রকৃতপক্ষে ওয়েব জুড়ে কর্মক্ষমতার জন্য একটি নেট নেতিবাচক।
বিপরীতে, প্রারম্ভিক ইঙ্গিতগুলি অনুশীলনে আরও ভাল পারফর্ম করে কারণ এটি ইঙ্গিতগুলির সাথে একটি প্রাথমিক প্রতিক্রিয়া পাঠানোর ক্ষমতাকে একত্রিত করে যা ব্রাউজারকে এটির প্রকৃতপক্ষে যা প্রয়োজন তা আনয়ন বা সংযোগ করার দায়িত্ব দেয়৷ যদিও প্রারম্ভিক ইঙ্গিতগুলি HTTP2/পুশ তাত্ত্বিকভাবে সম্বোধন করতে পারে এমন সমস্ত ব্যবহারের ক্ষেত্রে কভার করে না, আমরা বিশ্বাস করি যে প্রারম্ভিক ইঙ্গিতগুলি নেভিগেশনের গতি বাড়ানোর জন্য একটি আরও বাস্তব সমাধান।
পিয়েরে বামিনের থাম্বনেইল চিত্র।