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

Jeremy Wagner

Barry Pollard

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

• 43
• 12
• 31
• 11

المصدر

يُعَد "الوقت المستغرق حتى أول بايت" (TTFB) مقياسًا أساسيًا لقياس وقت إعداد الاتصال واستجابة خادم الويب في كل من التمرين المعملي والميداني. وهو يقيس الوقت بين طلب مورد ووقت بدء وصول البايت الأول من الاستجابة. هذا يجعل من المفيد في تحديد متى يكون خادم الويب بطيء جدًا في الاستجابة للطلبات. وفي حالة طلبات التنقل - أي طلبات مستند HTML - يسبق كل مقياس آخر مفيد لأداء التحميل.

مخطّط بياني لمراحل طلب الشبكة والتوقيتات المرتبطة بها. يقيس TTFB الوقت المنقضي بين startTime وresponseStart.

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

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

ويساعد تقليل وقت الاستجابة أثناء إعداد الاتصال وفي الخلفية على تقليل وقت الاستجابة السريعة.

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

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

تبلغ قيم TTFB الجيدة 0.8 ثانية أو أقل، بينما تزيد القيم المنخفضة عن 1.8 ثانية.

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

كيفية قياس TTFB

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

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

• تقرير تجربة المستخدم في Chrome
• مكتبة JavaScript web-vitals

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

• في لوحة الشبكة في "أدوات مطوري البرامج في Chrome"
• WebPageTest

قياس 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
});

تنبيه: لا تتوافق جميع المتصفحات مع PerformanceObserver أو علامة buffered الخاصة به. للحصول على أوسع نطاق ممكن من التوافق مع المتصفِّحات، ننصحك باستخدام حزمة web-vitals، التي ستتم مناقشتها لاحقًا في هذه الصفحة.

يمكن أيضًا لمكتبة JavaScript web-vitals قياس سرعة تحويل النص إلى كلام في المتصفّح بمستوى أقل من التعقيد:

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 might have a responseStart value of 0 if they're being
    // cached, or if a cross-origin resource is 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 للطلبات من مصادر متعددة قابلاً للقياس في الحقل، إذا تعذّر على الخوادم المتعددة المصادر إعداد عنوان Timing-Allow-Origin.

كيفية تحسين TTFB

للحصول على إرشادات حول تحسين "إطار تحويل النص إلى كلام" على موقعك الإلكتروني، راجِع دليلنا المفصّل حول تحسين "وضع تحويل النص إلى كلام".