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

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

Browser Support

  • کروم: 43.
  • لبه: 12.
  • فایرفاکس: 35.
  • سافاری: 11.

Source

TTFB چیست؟

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

تجسم زمان بندی درخواست شبکه زمان‌بندی‌ها از چپ به راست عبارتند از 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، unloadEventEnd، answerterEndntLookupStart، domAdIn domContentLoadedEventEnd، domComplete، loadEventStart و loadEventEnd.
نمودار مراحل درخواست شبکه و زمان‌بندی مرتبط با آنها. TTFB زمان سپری شده بین startTime و responseStart را اندازه گیری می کند.

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

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

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

TTFB و نکات اولیه

معرفی 103 نکات اولیه باعث سردرگمی در مورد اینکه TTFB "بایت اول" چه چیزی را اندازه گیری می کند، ایجاد می کند. 103 نکات اولیه به عنوان "نخستین بایت" به حساب می آیند. finalResponseHeadersStart یک ورودی زمان‌بندی اضافی برای responseStart است که شروع پاسخ سند نهایی (معمولاً پاسخ HTTP 200) را اندازه‌گیری می‌کند.

نکات اولیه فقط یک نمونه جدیدتر از پاسخگویی زودهنگام است. برخی از سرورها اجازه می‌دهند که پاسخ سند قبل از در دسترس قرار گرفتن متن اصلی انجام شود - یا فقط با سرصفحه‌های HTTP یا با عنصر <head> ، که هر دو می‌توانند از نظر اثرگذاری مشابه Early Hints در نظر گرفته شوند. این دلیل دیگری است که چرا همه اینها به عنوان reponseStart و بنابراین TTFB اندازه گیری می شوند.

اگر قرار باشد پاسخ کامل مدت بیشتری طول بکشد، ارسال زودهنگام داده ها ارزش واقعی دارد. با این حال، این کار مقایسه TTFB را در پلتفرم‌ها یا فناوری‌های مختلف بسته به ویژگی‌هایی که استفاده می‌کنند و اینکه چگونه بر اندازه‌گیری TTFB استفاده می‌شود، دشوار می‌کند. آنچه از همه مهمتر است این است که بفهمید ابزاری که استفاده می کنید چه چیزی را اندازه می گیرد و چگونه آن را تحت تأثیر پلتفرم اندازه گیری قرار می دهد.

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

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

مقادیر خوب TTFB 0.8 ثانیه یا کمتر هستند، مقادیر ضعیف بیشتر از 1.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
});

کتابخانه جاوا اسکریپت 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 مراجعه کنید.