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

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

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

  • 43
  • 12
  • 31
  • 11

منبع

TTFB چیست؟

TTFB معیاری است که زمان بین درخواست یک منبع و زمانی که اولین بایت یک پاسخ شروع می شود را اندازه گیری می کند.

نمودار زمان بندی درخواست شبکه مراحل از چپ به راست عبارتند از Redirect (که با Prompt for Unload همپوشانی دارد)، Cache، DNS، TCP، Request، Response، Processing و Load. زمان‌بندی‌های مرتبط عبارتند از redirectStart و redirectEnd (که با Prompt for Unload's unloadEventStart و unloadEventEnd همپوشانی دارند)، fetchStart، domainLookupStart، domainLookupEnd، connectStart، safeConnectionStart، connectEnd، requestStart، answerEactivndStart،domeventEventter, ContentLoadedEventEnd، domComplete، loadEventStart و loadEventEnd .
نمودار مراحل درخواست شبکه و زمان‌بندی مرتبط با آنها. TTFB زمان سپری شده بین startTime و responseStart را اندازه گیری می کند.

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

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

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

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

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

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

نحوه اندازه گیری 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 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 وب سایت شما ارائه دهد.