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

Jeremy Wagner
Barry Pollard

دعم المتصفح

  • Chrome: 43.
  • الحافة: 12.
  • Firefox: 35
  • Safari: 11-

المصدر

ما هو TTFB؟

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

عرض مرئي لتوقيتات طلب الشبكة. تكون التوقيتات من اليسار إلى اليمين هي "إعادة التوجيه" و"واجهة عامل الخدمة" و"حدث جلب مشغّل الخدمات" و"ذاكرة التخزين المؤقت HTTP" و"نظام أسماء النطاقات" و"بروتوكول التحكم في الإرسال" و"الطلب" و"التلميحات المبكرة" (103) والاستجابة (التي تتداخل مع طلب "إلغاء التحميل") والمعالجة والتحميل. الأوقات المرتبطة بها هي renameStart وredirectEnd وFetchStart وdomainLookupStart وdomainLookupEnd وconnectStart وsecureConnectionStart وconnectEnd وrequestStart وinterimResponseStart وResponseStart وunloadEventStart وunloadEventEnd وResponseEnd وdomInteractive وdomContentLoadedEventStart وdomContentLoadedEventEnd وdomComplete وloadEventStart وloadEventEnd.
رسم تخطيطي لمراحل طلب الشبكة والتوقيتات المرتبطة بها. يقيس مؤشر TTFB الوقت المنقضي بين startTime وresponseStart.

TTFB هو مجموع مراحل الطلب التالية:

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

يمكن أن يؤدي تقليل وقت الاستجابة في وقت إعداد الاتصال وفي الخلفية إلى تقليل وقت الاستجابة في الوقت المناسب.

تعريفات أخرى لـ TTFB

التعريف السابق هو التعريف التقليدي ولكن مع مقدّمة التلميحات المبكرة، ما يُعتبر "البايت الأول". للنقاش. تُعد firstInterimResponseStart إدخال توقيت إضافيًا جديدًا لـ responseStart للتمييز بين هذه العناصر، ومع ذلك لا تتوفر هذه الميزة إلا في المتصفحات Chrome والمتصفحات المستندة إلى Chromium. لذلك، تقيس بعض المتصفّحات والأدوات (بما في ذلك CrUX) حتى يتم استلام وحدات البايت الأولى، بما في ذلك "التلميحات المبكرة".

ميزة Early Hints هي مثال جديد على الاستجابة مبكرًا. تسمح بعض الخوادم بتدفق استجابة المستند قبل إتاحة النص الأساسي، إما من خلال عناوين HTTP فقط أو من خلال عنصر <head>، ويمكن اعتبار كلاهما متشابهًا من حيث التأثير في ميزة "التلميحات المبكرة"، وبالتالي قد يؤثر ذلك في تعريف مقاييس TTFB.

كمقياس لموعد ظهور "وحدات البايت الأولى" البيانات القابلة للتنفيذ للمستند التي يتلقّاها المتصفح، ويمكن اعتبار جميع هذه التعريفات صالحة، وهناك قيمة حقيقية في إعادة إرسال البيانات مبكرًا إذا كانت الاستجابة الكاملة ستستغرق وقتًا أطول. والأهم من ذلك هو فهم الإجراء الذي تعتمده الأداة التي تستخدمها لقياس مدى تأثرها بالمنصة التي يتم قياسها. وهذا يجعل من الصعب مقارنة "TTFB" عبر الأنظمة الأساسية أو التقنيات المختلفة اعتمادًا على الميزات التي تستخدمها، وكيف يؤثر ذلك على قياس TTFB المستخدَم.

وغالبًا ما يتم اعتبار TTFB مؤشرًا على وقت استجابة الخادم أو المضيف. مع ذلك، سيتأثر بعوامل خارجة عن هذا التحكّم المباشر، مثل وقت إعادة التوجيه، سواء تم عرضه من ذاكرة تخزين مؤقت من خلال شبكة توصيل للمحتوى (CDN)، أو من المحتمل أن يحتاج إلى العودة إلى خادم المصدر لفترة أطول. ويظهر ذلك بشكل خاص في البيانات الميدانية، فعادةً ما يكون الاختبار المعملي أقل تأثرًا بهذه العوامل لأنّ عنوان URL النهائي يتم عادةً اختباره وغالبًا ما ينفي تغييرات التخزين المؤقت بشكل متكرر. تعرض أداة Lighthouse وقت استجابة الخادم بدلاً من TTFB لتوضيح ذلك، ولكن قد لا تعرض الأدوات الاختبارية الأخرى ذلك.

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

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

تبلغ قيم &quot;TFB&quot; الجيدة 0.8 ثانية أو أقل، والقيم الضعيفة تزيد عن 1.8 ثانية، وأي شيء بين هذه القيم يحتاج إلى تحسين.
تكون قيم "TFB" الجيدة هي 0.8 ثانية أو أقل، والقيم الضعيفة تزيد عن 1.8 ثانية.

كيفية قياس TTFB

يمكن قياس TTFB في المختبر أو في المجال بالطرق التالية.

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

أدوات التمرين المعملي

قياس TTFB في JavaScript

يمكنك قياس 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);

قياس طلبات الموارد

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