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

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

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

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

منبع

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

تعریف قبلی، تعریف مرسوم است، اما با معرفی Early Hints آنچه که "بایت اول" در نظر گرفته می شود، قابل بحث است. firstInterimResponseStart یک ورودی زمان‌بندی اضافی جدید به responseStart برای تمایز بین اینها است، اما این فقط در مرورگرهای Chrome و مبتنی بر Chromium پشتیبانی می‌شود. بنابراین برخی از مرورگرها و ابزارها ( از جمله CrUX ) اندازه گیری می کنند تا اولین بایت ها از جمله نکات اولیه دریافت شوند.

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

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

TTFB همچنین اغلب به عنوان شاخص زمان پاسخ سرور یا میزبان در نظر گرفته می شود. با این حال، تحت تأثیر عوامل خارج از کنترل مستقیم مانند زمان تغییر مسیر قرار می‌گیرد، خواه از یک حافظه پنهان توسط CDN ارائه شود یا باید یک سفر بالقوه طولانی‌تر به یک سرور مبدا انجام دهد. این امر به‌ویژه در داده‌های میدانی مشهود است – آزمایش‌های آزمایشگاهی معمولاً کمتر تحت تأثیر این عوامل قرار می‌گیرند، زیرا URL نهایی معمولاً آزمایش می‌شود و اغلب مکرراً تغییرات حافظه پنهان را نفی می‌کند. Lighthouse زمان پاسخگویی سرور را به جای 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 مراجعه کنید.