زمان تا اولین بایت (TTFB)

جرمی واگنر
بری پولارد

پشتیبانی مرورگر

  • 43
  • 12
  • 31
  • 11

منبع

Time to First Byte (TTFB) یک معیار اساسی برای اندازه گیری زمان راه اندازی اتصال و پاسخگویی وب سرور در آزمایشگاه و میدان است. زمان بین درخواست یک منبع و زمانی که اولین بایت یک پاسخ شروع به رسیدن می کند را اندازه گیری می کند. این امر باعث می‌شود که در شناسایی زمانی که یک وب سرور برای پاسخگویی به درخواست‌ها خیلی کند است مفید باشد. در مورد درخواست‌های ناوبری – یعنی درخواست‌های یک سند HTML – مقدم بر هر معیار عملکرد بارگیری معنی‌دار دیگری است.

نمودار زمان بندی درخواست شبکه مراحل از چپ به راست عبارتند از Redirect، Service Worker Init، Service Worker Fetch رویداد، HTTP Cache، DNS، TCP، Request، Early Hints (103)، Response (که با Prompt for Unload همپوشانی دارد)، Processing و Load. زمان‌بندی‌های مرتبط عبارتند از redirectStart و redirectEnd، fetchStart، domainLookupStart، domainLookupEnd، connectStart، safeConnectionStart، connectEnd، requestStart، interimResponseStart، answerStart، unloadEventStart، unloadEventEndEnd، domontadC adedEventEnd، domComplete، loadEventStart و loadEventEnd.
نمودار مراحل درخواست شبکه و زمان‌بندی مرتبط با آنها. TTFB زمان سپری شده بین startTime و responseStart را اندازه گیری می کند.

TTFB مجموع مراحل درخواست زیر است:

  • زمان تغییر مسیر
  • زمان راه اندازی کارگر خدماتی (در صورت وجود)
  • جستجوی DNS
  • اتصال و مذاکره TLS
  • درخواست، تا زمانی که اولین بایت از پاسخ می رسد

کاهش تأخیر در زمان راه اندازی اتصال و در پشتیبان به کاهش TTFB شما کمک می کند.

نمره خوب TTFB چیست؟

از آنجایی که TTFB قبل از معیارهای کاربر محور مانند First Contentful Paint (FCP) و Largest Contentful Paint (LCP) اتفاق می‌افتد، توصیه می‌کنیم که سرور شما به درخواست‌های ناوبری به اندازه کافی سریع پاسخ دهد تا صدک ۷۵ کاربران یک FCP را در «خوب» تجربه کنند. آستانه . به عنوان یک راهنمای تقریبی، اکثر سایت ها باید تلاش کنند تا TTFB 0.8 ثانیه یا کمتر داشته باشند.

مقادیر خوب TTFB 0.8 ثانیه یا کمتر هستند، مقادیر ضعیف بیشتر از 1.8 ثانیه هستند و هر چیزی در این بین نیاز به بهبود دارد.
مقادیر خوب TTFB 0.8 ثانیه یا کمتر هستند و مقادیر ضعیف بیشتر از 1.8 ثانیه هستند.

نکته کلیدی: از آنجایی که TTFB یک معیار Core Web Vitals نیست، لازم نیست سایت‌ها دارای یک TTFB عالی باشند، تا زمانی که طولانی‌تر بودن TTFB امتیاز خوبی را برای سایت شما در معیارهای مهم دشوارتر نکند. هنگام بهینه سازی زمان بارگذاری، نحوه ارائه محتوا را در سایت خود در نظر بگیرید. TTFB پایین به ویژه در صورتی مهم است که یک سایت نشانه گذاری اولیه خود را به سرعت ارائه دهد و سپس باید منتظر اسکریپت ها باشد تا آن را با محتوای معنی دار پر کنند، همانطور که اغلب در مورد برنامه های کاربردی یک صفحه (SPA) اتفاق می افتد. از سوی دیگر، یک سایت رندر شده توسط سرور که نیازی به کار زیادی در سمت کلاینت ندارد، می تواند مقادیر FCP و LCP بهتری نسبت به سایت های رندر شده توسط سرویس گیرنده داشته باشد، حتی اگر TTFB آن بالاتر باشد.

نحوه اندازه گیری TTFB

TTFB را می توان در آزمایشگاه یا میدان به روش های زیر اندازه گیری کرد.

ابزارهای میدانی

ابزار آزمایشگاهی

اندازه گیری 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 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 مراجعه کنید.