TTFB چیست؟
TTFB معیاری است که زمان بین درخواست یک منبع و زمانی که اولین بایت یک پاسخ شروع می شود را اندازه گیری می کند.
TTFB مجموع مراحل درخواست زیر است:
- زمان تغییر مسیر
- زمان راه اندازی کارگر خدماتی (در صورت وجود)
- جستجوی DNS
- اتصال و مذاکره TLS
- درخواست، تا زمانی که اولین بایت پاسخ رسیده است
کاهش تأخیر در زمان راه اندازی اتصال و در پشتیبان به کاهش TTFB کمک می کند.
نمره خوب TTFB چیست؟
از آنجایی که TTFB مقدم بر معیارهای کاربر محور مانند First Contentful Paint (FCP) و Largest Contentful Paint (LCP) است، توصیه می شود سرور شما به درخواست های ناوبری به اندازه کافی سریع پاسخ دهد تا صدک 75 کاربران FCP را در آستانه "خوب" تجربه کنند. . به عنوان یک راهنمای تقریبی، اکثر سایت ها باید تلاش کنند تا زمان رسیدن به اولین بایت 0.8 ثانیه یا کمتر داشته باشند.
نحوه اندازه گیری TTFB
TTFB را می توان در آزمایشگاه یا میدان به روش های زیر اندازه گیری کرد.
ابزارهای میدانی
ابزار آزمایشگاهی
- در پنل شبکه DevTools کروم
- WebPageTest
اندازه گیری TTFB در جاوا اسکریپت
میتوانید TTFB درخواستهای ناوبری را در مرورگر با Navigation Timing API اندازهگیری کنید. مثال زیر نحوه ایجاد یک PerformanceObserver
را نشان می دهد که به ورودی navigation
گوش می دهد و آن را در کنسول ثبت می کند:
new PerformanceObserver((entryList) => {
const [pageNav] = entryList.getEntriesByType('navigation');
console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
type: 'navigation',
buffered: true
});
کتابخانه JavaScript web-vitals
همچنین می تواند TTFB را در مرورگر با پیچیدگی کمتر اندازه گیری کند:
import {onTTFB} from 'web-vitals';
// Measure and log TTFB as soon as it's available.
onTTFB(console.log);
اندازه گیری درخواست های منابع
TTFB برای همه درخواست ها اعمال می شود، نه فقط درخواست های ناوبری. به طور خاص، منابع میزبانی شده بر روی سرورهای متقاطع می توانند به دلیل نیاز به راه اندازی اتصالات به آن سرورها، تاخیر ایجاد کنند. برای اندازهگیری TTFB برای منابع موجود در این زمینه، از Resource Timing API در PerformanceObserver
استفاده کنید:
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 وب سایت شما ارائه دهد.