টাইম টু ফার্স্ট বাইট (TTFB) হল ল্যাব এবং ফিল্ড উভয় ক্ষেত্রে সংযোগ সেটআপের সময় এবং ওয়েব সার্ভারের প্রতিক্রিয়া পরিমাপের জন্য একটি মৌলিক মেট্রিক। এটি একটি সম্পদের জন্য অনুরোধ এবং যখন একটি প্রতিক্রিয়ার প্রথম বাইট পৌঁছানো শুরু হয় তার মধ্যে সময় পরিমাপ করে। এটি যখন একটি ওয়েব সার্ভার অনুরোধের প্রতিক্রিয়া জানাতে খুব ধীর হয় তা সনাক্ত করতে এটি সহায়ক করে তোলে। নেভিগেশন অনুরোধের ক্ষেত্রে-অর্থাৎ, একটি HTML নথির জন্য অনুরোধ-এটি প্রতিটি অর্থপূর্ণ লোডিং কর্মক্ষমতা মেট্রিকের আগে।
TTFB হল নিম্নলিখিত অনুরোধের ধাপগুলির সমষ্টি:
- সময় পুনর্নির্দেশ করুন
- পরিষেবা কর্মী শুরুর সময় (যদি প্রযোজ্য হয়)
- DNS সন্ধান
- সংযোগ এবং TLS আলোচনা
- রিকোয়েস্ট, রেসপন্সের প্রথম বাইট না আসা পর্যন্ত
সংযোগ সেটআপের সময় এবং ব্যাকএন্ডে লেটেন্সি কমানো আপনার TTFB কমাতে সাহায্য করে।
একটি ভাল TTFB স্কোর কি?
যেহেতু TTFB ব্যবহারকারী-কেন্দ্রিক মেট্রিক্স যেমন ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) এবং সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP) এর আগে ঘটে, তাই আমরা সুপারিশ করি যে আপনার সার্ভার নেভিগেশন অনুরোধে দ্রুত সাড়া দেয় যাতে ব্যবহারকারীদের 75 তম শতাংশ "ভাল" এর মধ্যে একটি FCP অনুভব করে প্রান্তিক একটি মোটামুটি নির্দেশিকা হিসাবে, বেশিরভাগ সাইটের 0.8 সেকেন্ড বা তার কম TTFB থাকার চেষ্টা করা উচিত।
মূল পয়েন্ট: যেহেতু TTFB একটি কোর ওয়েব ভাইটাল মেট্রিক নয়, তাই সাইটগুলির জন্য একটি চমৎকার TTFB থাকা একেবারেই প্রয়োজনীয় নয়, যতক্ষণ না লম্বা TTFB আপনার সাইটের জন্য গুরুত্বপূর্ণ মেট্রিক্সে ভাল স্কোর করা কঠিন করে না। লোডের সময় অপ্টিমাইজ করার সময়, আপনার সাইট কীভাবে সামগ্রী সরবরাহ করে তা বিবেচনা করুন। একটি নিম্ন TTFB বিশেষ করে গুরুত্বপূর্ণ যদি একটি সাইট দ্রুত তার প্রাথমিক মার্কআপ প্রদান করে এবং তারপরে অর্থপূর্ণ বিষয়বস্তু সহ স্ক্রিপ্টগুলিকে পূরণ করার জন্য অপেক্ষা করতে হয়, যেমনটি প্রায়শই একক পৃষ্ঠা অ্যাপ্লিকেশন (এসপিএ) এর ক্ষেত্রে হয়। অন্যদিকে, একটি সার্ভার-রেন্ডার করা সাইট যার জন্য বেশি ক্লায়েন্ট-সাইড কাজের প্রয়োজন হয় না, ক্লায়েন্ট-রেন্ডার করা সাইটের চেয়ে ভাল FCP এবং LCP মান থাকতে পারে, এমনকি যদি এর TTFB বেশি হয়।
কিভাবে TTFB পরিমাপ করা যায়
TTFB নিম্নলিখিত উপায়ে ল্যাবে বা ক্ষেত্রে পরিমাপ করা যেতে পারে।
ক্ষেত্র সরঞ্জাম
ল্যাব সরঞ্জাম
- Chrome এর DevTools এর নেটওয়ার্ক প্যানেলে
- ওয়েবপেজ টেস্ট
জাভাস্ক্রিপ্টে TTFB পরিমাপ করুন
আপনি নেভিগেশন টাইমিং API ব্যবহার করে ব্রাউজারে নেভিগেশন অনুরোধের TTFB পরিমাপ করতে পারেন। নিম্নলিখিত উদাহরণ দেখায় কিভাবে একটি PerformanceObserver
তৈরি করতে হয় যা একটি navigation
এন্ট্রি শোনে এবং এটি কনসোলে লগ করে:
new PerformanceObserver((entryList) => {
const [pageNav] = entryList.getEntriesByType('navigation');
console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
type: 'navigation',
buffered: true
});
web-vitals
জাভাস্ক্রিপ্ট লাইব্রেরি কম জটিলতার সাথে ব্রাউজারে TTFB পরিমাপ করতে পারে:
import {onTTFB} from 'web-vitals';
// Measure and log TTFB as soon as it's available.
onTTFB(console.log);
সম্পদ অনুরোধ পরিমাপ
TTFB সমস্ত অনুরোধের ক্ষেত্রে প্রযোজ্য, শুধু নেভিগেশন অনুরোধ নয়। বিশেষ করে, ক্রস-অরিজিন সার্ভারগুলিতে হোস্ট করা সংস্থানগুলি সেই সার্ভারগুলিতে সংযোগ স্থাপন করার সময় লেটেন্সি প্রবর্তন করতে পারে। ক্ষেত্রের সম্পদের জন্য TTFB পরিমাপ করতে, একটি PerformanceObserver
এ রিসোর্স টাইমিং API ব্যবহার করুন:
new PerformanceObserver((entryList) => {
const entries = entryList.getEntries();
for (const entry of entries) {
// Some resources might have a responseStart value of 0 if they're being
// cached, or if a cross-origin resource is served without a
// Timing-Allow-Origin header set.
if (entry.responseStart > 0) {
console.log(`TTFB: ${entry.responseStart}`, entry.name);
}
}
}).observe({
type: 'resource',
buffered: true
});
পূর্ববর্তী কোড স্নিপেটটি একটি নেভিগেশন অনুরোধের জন্য TTFB পরিমাপ করতে ব্যবহৃত কোডের মতোই, 'navigation'
এন্ট্রিগুলির জন্য অনুসন্ধানের পরিবর্তে, আপনি পরিবর্তে 'resource'
এন্ট্রিগুলির জন্য অনুসন্ধান করুন৷ এটি এই সত্যটির জন্যও দায়ী যে প্রাথমিক উত্স থেকে লোড করা কিছু সংস্থান 0
এর একটি মান ফেরত দিতে পারে যদি সংযোগটি ইতিমধ্যেই খোলা থাকে, বা একটি সম্পদ তাত্ক্ষণিকভাবে একটি ক্যাশে থেকে পুনরুদ্ধার করা হয়।
কিভাবে TTFB উন্নত করা যায়
আপনার সাইটের TTFB উন্নত করার বিষয়ে নির্দেশনার জন্য, TTFB অপ্টিমাইজ করার জন্য আমাদের গভীর নির্দেশিকা দেখুন।