وقت وصول أول بايت (TTFB)

جيريمي واغنر
باري بولارد

التوافق مع المتصفح

  • 43
  • 12
  • 31
  • 11

المصدر

ما هو TTFB؟

TTFB هو مقياس يقيس الوقت بين طلب مورد ووقت بدء وصول البايت الأول من الاستجابة.

رسم تخطيطي لتوقيتات طلبات الشبكة المراحل من اليمين إلى اليسار هي "إعادة التوجيه" (التي تتداخل مع طلب إلغاء التحميل) وذاكرة التخزين المؤقت ونظام أسماء النطاقات وبروتوكول التحكم في الإرسال والطلب والاستجابة والمعالجة والتحميل. التوقيتان المرتبطان هما renameStart وredirectEnd (اللذان يتداخلان مع Prompt for UnloadEventStart وunloadEventEnd) وfetchStart وdomainLookupStart وdomainLookupEnd وconnectStart وsecureConnectionStart وconnectEnd وrequestStart وResponseStart وResponseEnd وdomInteractive وdomContentLoadedEventStart وdomContentLoadedEventEnd وdomContentComplete وUploadEventStart وload
مخطّط بياني لمراحل طلب الشبكة والتوقيتات المرتبطة بها. يقيس TTFB الوقت المنقضي بين startTime وresponseStart.

يمثل تنسيق TTFB مجموع مراحل الطلب التالية:

  • وقت إعادة التوجيه
  • وقت بدء تشغيل مشغّل الخدمات (إذا كان ذلك منطبقًا)
  • بحث نظام أسماء النطاقات
  • الاتصال والتفاوض حول بروتوكول أمان طبقة النقل (TLS)
  • الطلب، حتى النقطة التي يصل إليها البايت الأول من الاستجابة

سيساهم تقليل وقت الاستجابة أثناء إعداد الاتصال وفي الخلفية في انخفاض حجم TTFB.

ما هي درجة TTFB الجيدة؟

بما أنّ مقياس "سرعة عرض أكبر محتوى مرئي" (TFB) يسبق المقاييس التي تركّز على المستخدم، مثل سرعة عرض أكبر محتوى مرئي (FCP) وسرعة عرض أكبر محتوى مرئي (LCP)، ننصح بأن يستجيب الخادم لطلبات التنقّل بسرعة كافية كي يحصل الشريحة المئوية الخامسة والسبعين من المستخدمين على سرعة عرض أكبر محتوى مرئي ضمن الحدّ "الجيد". وكدليل تقريبي، يجب أن تسعى معظم المواقع الإلكترونية إلى أن تكون مدة "وقت تحميل أوّل بايت" 0.8 ثانية أو أقلّ.

إنّ قيم TTFB الجيدة هي 0.8 ثانية أو أقل، والقيم الرديئة أكبر من 1.8 ثانية، وأي قيمة بينهما بحاجة إلى تحسين.

كيفية قياس TTFB

يمكن قياس "إطار عمل الإحالات الناجحة" (TTFB) في المختبر أو في الميدان بالطرق التالية.

الأدوات الميدانية

أدوات المختبر

قياس TTFB في JavaScript

يمكنك قياس حجم النص المخصّص (TFB) لطلبات التنقّل في المتصفِّح باستخدام 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 للموارد في الحقل، استخدِم واجهة برمجة تطبيقات توقيت الموارد ضمن 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 على موقعك الإلكتروني.