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

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

Kenji Baheux

Barry Pollard

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

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

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

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

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

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

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

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

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

দ্বিতীয় ধাপে অপ্রচলিত হতে পারে বা মূল সংস্থান দ্বারা আর ব্যবহার করা হয় না এমন সংস্থান বা উত্সগুলির উপর প্রাথমিক ইঙ্গিতগুলি ব্যবহার করার ঝুঁকি হ্রাস করা। উদাহরণস্বরূপ, ঘন ঘন আপডেট করা এবং সংস্করণ করা সংস্থানগুলি (উদাহরণস্বরূপ, 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 রিসোর্স ( 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টি প্রারম্ভিক ইঙ্গিতগুলি সমস্ত প্রধান ব্রাউজারে সমর্থিত, তবে প্রারম্ভিক ইঙ্গিতগুলিতে পাঠানো নির্দেশাবলী প্রতিটি ব্রাউজারে আলাদা হয়:

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

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

Chrome DevTools-এ 103টি প্রাথমিক ইঙ্গিত সমর্থনও রয়েছে৷

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

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

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

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

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

• Cloudflare এ প্রাথমিক ইঙ্গিত
• ফাস্টলিতে প্রাথমিক ইঙ্গিত ।
• আকামাই এ প্রাথমিক ইঙ্গিত ।

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

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

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