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

Barry Pollard
Jeremy Wagner

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 11.

Source

ما هي مدة تحميل أول بايت (TTFB)؟

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

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

وقت استجابة الخادم هو مجموع مراحل الطلب التالية:

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

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

مدة تحميل أول بايت (TTFB) وميزة Early Hints

يؤدي إدخال 103 إشارات مبكرة إلى بعض الالتباس بشأن ما تقيسّه "البايت الأول" من وقت استجابة خادم TTFB. يتم احتساب 103 تلميحات مبكّرة على أنّها "البايت الأول". finalResponseHeadersStart هو إدخال توقيت إضافي إلى responseStart يقيس بداية استجابة المستند النهائية (عادةً استجابة HTTP 200) التي سيتم قياسها.

إنّ "الإشارات المبكرة" هي مجرد مثال جديد على الردّ مبكرًا. تسمح بعض الخوادم بإرسال استجابة المستند مبكرًا قبل توفّر النص الرئيسي، إما باستخدام عناوين HTTP فقط أو باستخدام العنصر <head>، وكلاهما يمكن اعتباره مشابهًا في التأثير لـ "الإشارات المبكّرة". وهذا سبب آخر لقياس كل هذه العوامل على أنّها reponseStart ووقت استجابة الخادم.

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

ما هي نتيجة TTFB الجيدة؟

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

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

كيفية قياس وقت استجابة خادم الويب

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

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

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

قياس وقت الاستجابة للصفحة في JavaScript

يمكنك قياس وقت استجابة الخادم لطلبات التنقّل في المتصفّح باستخدام واجهة برمجة التطبيقات 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 JavaScript قياس وقت الاستجابة للصفحة في المتصفّح بشكل أكثر إيجازًا:

import {onTTFB} from 'web-vitals';

// Measure and log TTFB as soon as it's available.
onTTFB(console.log);

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

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

إنّ مقتطف الرمز السابق مشابه للمقتطف المستخدَم لقياس وقت استجابة خادم طلبات التنقّل، باستثناء أنّه بدلاً من البحث عن إدخالات 'navigation'، يتم البحث عن إدخالات 'resource' بدلاً من ذلك. ويُرجى العِلم أيضًا أنّ بعض الموارد التي يتم تحميلها من المصدر الأساسي قد تعرض القيمة 0، لأنّ الاتصال مفتوحًا بالفعل أو يتم استرداد المورد على الفور من ذاكرة التخزين المؤقت.

كيفية تحسين وقت الاستجابة للصفحة

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