بهینه‌سازی Time to First Byte (TTFB): راهنمای ساده برای بهبود پاسخ‌گویی وب‌سایت

Time to First Byte (TTFB) یا «زمان دریافت اولین بایت» یکی از معیارهای کلیدی برای سنجش سرعت پاسخ‌گویی سرور وب و زمان برقراری اتصال است. این معیار نشان می‌دهد که چقدر طول می‌کشد تا اولین بایت از پاسخ یک درخواست (مثل سند HTML) به مرورگر کاربر برسد. در این مقاله، به زبان ساده توضیح می‌دهیم که TTFB چیست، چرا اهمیت دارد و چگونه می‌توانید آن را اندازه‌گیری و بهینه کنید تا وب‌سایتتان سریع‌تر و کاربرپسندتر شود.

TTFB چیست؟

TTFB مدت زمانی است که از لحظه ارسال درخواست برای یک منبع (مانند صفحه HTML) تا شروع دریافت اولین بایت پاسخ طول می‌کشد. این معیار شامل مراحل زیر است:

  • زمان ریدایرکت: مدت زمانی که صرف ریدایرکت‌ها (مانند تغییر مسیر از HTTP به HTTPS) می‌شود.
  • زمان راه‌اندازی سرویس‌کارگر (در صورت وجود): اگر از سرویس‌کارگر استفاده می‌کنید، زمان آماده‌سازی آن.
  • جستجوی DNS: زمان لازم برای تبدیل نام دامنه به آدرس IP.
  • اتصال و مذاکره TLS: زمان برقراری اتصال TCP و مذاکره امنیتی (برای سایت‌های HTTPS).
  • درخواست تا رسیدن اولین بایت پاسخ: شامل زمان ارسال درخواست و پردازش سرور تا شروع ارسال پاسخ.

نمودار زمانی درخواست شبکه توضیح تصویر: نموداری که مراحل درخواست شبکه را نشان می‌دهد، از جمله ریدایرکت، جستجوی DNS، اتصال TCP، درخواست و پاسخ. TTFB از startTime تا responseStart محاسبه می‌شود.

کاهش تأخیر در این مراحل می‌تواند TTFB را بهبود دهد و تجربه کاربری بهتری فراهم کند.

TTFB و Early Hints

معرفی 103 Early Hints باعث شده است که تعریف «اولین بایت» کمی پیچیده شود. پاسخ‌های Early Hints (کد وضعیت HTTP 103) به‌عنوان اولین بایت‌ها در نظر گرفته می‌شوند. در مرورگر کروم (تا نسخه ۱۱۵)، responseStart به شروع پاسخ نهایی سند (معمولاً HTTP 200) اشاره داشت که بعداً به‌عنوان finalResponseHeadersStart استاندارد شد. اما به دلیل مشکلات سازگاری، این تغییر در نسخه ۱۳۳ کروم لغو شد.

برخی سرورها امکان ارسال زودهنگام هدرهای HTTP یا بخش <head> را فراهم می‌کنند که مشابه Early Hints عمل می‌کند. این ویژگی‌ها همگی به‌عنوان responseStart و در نتیجه TTFB محاسبه می‌شوند. این موضوع مقایسه TTFB بین پلتفرم‌های مختلف را دشوار می‌کند، بنابراین مهم است که بدانید ابزار مورد استفاده‌تان دقیقاً چه چیزی را اندازه‌گیری می‌کند.

TTFB خوب چیست؟

TTFB پیش‌نیاز معیارهای کاربرمحور مثل First Contentful Paint (FCP) و Largest Contentful Paint (LCP) است. برای داشتن تجربه کاربری خوب، پیشنهاد می‌شود که TTFB در صدک ۷۵ کاربران کمتر از ۰.۸ ثانیه باشد. مقادیر بیش از ۱.۸ ثانیه به‌عنوان ضعیف در نظر گرفته می‌شوند.

نمودار مقادیر TTFB توضیح تصویر: نموداری که نشان می‌دهد مقادیر خوب TTFB کمتر از ۰.۸ ثانیه، مقادیر ضعیف بیش از ۱.۸ ثانیه و مقادیر بین این دو نیاز به بهبود دارند.

نکته کلیدی: TTFB جزو معیارهای Core Web Vitals نیست، اما تأثیر زیادی روی FCP و LCP دارد. برای سایت‌های تک‌صفحه‌ای (SPA) که به جاوااسکریپت برای رندر محتوا وابسته‌اند، TTFB پایین بسیار مهم است. در مقابل، سایت‌های رندرشده در سرور ممکن است TTFB بالاتری داشته باشند، اما همچنان FCP و LCP خوبی ارائه دهند.

چگونه TTFB را اندازه‌گیری کنیم؟

TTFB را می‌توان هم در محیط آزمایشگاهی (Lab) و هم در جهان واقعی (Field) اندازه‌گیری کرد. در ادامه ابزارها و روش‌های مختلف را معرفی می‌کنیم.

ابزارهای واقعی (Field Tools)

  • ابزار Chrome User Experience Report (CrUX): داده‌های واقعی کاربران را برای تحلیل TTFB ارائه می‌دهد.
  • کتابخانه web-vitals: امکان جمع‌آوری داده‌های TTFB در مرورگر را فراهم می‌کند.

ابزارهای آزمایشگاهی (Lab Tools)

  • پنل شبکه در Chrome DevTools: پارامتر TTFB را برای درخواست‌های شبکه نشان می‌دهد.
  • WebPageTest: ابزاری قدرتمند برای تحلیل دقیق عملکرد شبکه.

اندازه‌گیری TTFB با جاوااسکریپت

برای اندازه‌گیری TTFB درخواست‌های ناوبری (Navigation Requests)، می‌توانید از Navigation Timing API استفاده کنید. مثال زیر نحوه استفاده از PerformanceObserver برای ثبت TTFB را نشان می‌دهد:

new PerformanceObserver((entryList) => {
  const [pageNav] = entryList.getEntriesByType('navigation');
  console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
  type: 'navigation',
  buffered: true
});

برای ساده‌تر کردن کار، می‌توانید از کتابخانه web-vitals استفاده کنید:

import {onTTFB} from 'web-vitals';
onTTFB(console.log);

اندازه‌گیری TTFB برای درخواست‌های منابع

TTFB نه‌تنها برای درخواست‌های ناوبری، بلکه برای تمام درخواست‌های منابع (مثل تصاویر یا اسکریپت‌ها) نیز قابل اندازه‌گیری است. اگر منابع از سرورهای خارجی (Cross-Origin) بارگذاری شوند، به دلیل نیاز به اتصال جدید، ممکن است تأخیر بیشتری داشته باشند. برای این کار از Resource Timing API استفاده کنید:

new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();
  for (const entry of entries) {
    if (entry.responseStart > 0) {
      console.log(`TTFB: ${entry.responseStart}`, entry.name);
    }
  }
}).observe({
  type: 'resource',
  buffered: true
});

هشدار: برای منابع Cross-Origin، اگر هدر Timing-Allow-Origin تنظیم نشده باشد، TTFB قابل اندازه‌گیری نیست.

چگونه TTFB را بهبود دهیم؟

برای بهبود TTFB، می‌توانید از راهنمای جامع بهینه‌سازی TTFB استفاده کنید. در اینجا چند نکته کلیدی آورده شده است:

  • کاهش ریدایرکت‌ها: ریدایرکت‌های غیرضروری (مثل تغییر مسیر از HTTP به HTTPS یا لینک‌های کوتاه‌شده) را حذف کنید.
  • استفاده از CDN: شبکه تحویل محتوا (CDN) می‌تواند فاصله بین کاربر و سرور را کاهش دهد.
  • بهینه‌سازی DNS: از ارائه‌دهندگان DNS سریع استفاده کنید و زمان جستجوی DNS را کاهش دهید.
  • بهینه‌سازی مذاکره TLS: از پروتکل‌های جدیدتر مثل TLS 1.3 و اتصالات Keep-Alive استفاده کنید.
  • بهبود عملکرد سرور: زمان پردازش سرور را با بهینه‌سازی پایگاه داده، کش کردن پاسخ‌ها و استفاده از سرورهای سریع‌تر کاهش دهید.

نتیجه‌گیری

TTFB یک معیار پایه‌ای برای سنجش پاسخ‌گویی سرور و سرعت اتصال است که تأثیر مستقیمی روی معیارهای کاربرمحور مثل FCP و LCP دارد. با استفاده از ابزارهایی مثل Chrome DevTools، WebPageTest و کتابخانه web-vitals، می‌توانید TTFB سایت خود را اندازه‌گیری کنید. برای بهبود TTFB، روی کاهش تأخیر در مراحل اتصال، استفاده از CDN و بهینه‌سازی عملکرد سرور تمرکز کنید. نتیجه این تلاش‌ها، وب‌سایتی سریع‌تر و تجربه کاربری بهتر خواهد بود.