TTFB কি?
TTFB হল একটি মেট্রিক যা একটি রিসোর্সের জন্য অনুরোধ এবং যখন একটি প্রতিক্রিয়ার প্রথম বাইট আসতে শুরু করে তার মধ্যে সময় পরিমাপ করে।
startTime এবং responseStart এর মধ্যে অতিবাহিত সময় পরিমাপ করে।TTFB হল নিম্নলিখিত অনুরোধের ধাপগুলির সমষ্টি:
- সময় পুনর্নির্দেশ করুন
- পরিষেবা কর্মী শুরুর সময় (যদি প্রযোজ্য হয়)
- DNS সন্ধান
- সংযোগ এবং TLS আলোচনা
- অনুরোধ, প্রতিক্রিয়ার প্রথম বাইটটি আসার আগে পর্যন্ত
সংযোগ সেটআপের সময় এবং ব্যাকএন্ডে লেটেন্সি কমানো TTFB কমাতে অবদান রাখবে।
একটি ভাল TTFB স্কোর কি?
যেহেতু TTFB ব্যবহারকারী-কেন্দ্রিক মেট্রিক্সের আগে যেমন ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) এবং সবচেয়ে বড় বিষয়বস্তু পেইন্ট (LCP) , তাই এটি সুপারিশ করা হয় যে আপনার সার্ভার নেভিগেশন অনুরোধে দ্রুত প্রতিক্রিয়া জানায় যাতে ব্যবহারকারীদের 75 তম শতাংশ "ভাল" থ্রেশহোল্ডের মধ্যে একটি FCP অনুভব করে . একটি মোটামুটি নির্দেশিকা হিসাবে, বেশিরভাগ সাইটের টাইম টু ফার্স্ট বাইট 0.8 সেকেন্ড বা তার কম থাকার চেষ্টা করা উচিত।
কিভাবে 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 may have a responseStart value of 0, due
// to the resource being cached, or a cross-origin resource
// being 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 অপ্টিমাইজ করার বিষয়ে একটি গভীর নির্দেশিকা প্রকাশিত হয়েছে।