ما هي مدة تحميل أول بايت (TTFB)؟
مقياس TTFB هو مقياس يقيس الفترة الزمنية بين طلب المورد والوقت الذي يبدأ فيه وصول أول بايت من الاستجابة.
وقت استجابة الخادم هو مجموع مراحل الطلب التالية:
- مدة إعادة التوجيه
- وقت بدء تشغيل الخدمة العاملة (إن وُجد)
- بحث نظام أسماء النطاقات
- الاتصال والتفاوض على بروتوكول أمان طبقة النقل (TLS)
- الطلب، حتى وصول أول بايت من الاستجابة
يمكن أن يؤدي تقليل وقت الاستجابة في وقت إعداد الاتصال وفي الخلفية إلى تقليل وقت الاستجابة في الوقت المناسب.
تعريفات أخرى لـ TTFB
التعريف السابق هو التعريف التقليدي، ولكن مع إدخال الإشارات المبكّرة، ما يُعتبر "البايت الأول" هو أمر قابل للنقاش. تُعد firstInterimResponseStart
إدخال توقيت إضافيًا جديدًا لـ responseStart
للتمييز بين هذه العناصر، ومع ذلك لا تتوفر هذه الميزة إلا في المتصفحات Chrome والمتصفحات المستندة إلى Chromium. لذلك، تقيس بعض المتصفّحات والأدوات (بما في ذلك CrUX) حتى يتم استلام وحدات البايت الأولى، بما في ذلك الإشارات المبكّرة.
إنّ "التلميحات المبكّرة" هي مجرد مثال أحدث على الردّ مبكرًا. تسمح بعض الخوادم بإلغاء استجابة المستند قبل توفّر النص الرئيسي، إما باستخدام عناوين HTTP فقط أو باستخدام العنصر <head>
، وكلاهما يمكن اعتباره مشابهًا في التأثير لـ "الإشارات المبكّرة"، وبالتالي يُشوّش أيضًا تعريف ما تقيس TTFB.
يمكن اعتبار كل هذه التعريفات صالحة كمقياس لوقت استلام المتصفّح "البايت الأول" من البيانات القابلة للتنفيذ للمستند. وهناك قيمة حقيقية في إعادة إرسال البيانات مبكرًا إذا كان الردّ الكامل سيستغرق بعض الوقت. من المهمّ فهم المقياس الذي تقيسّه الأداة التي تستخدمها ومدى تأثّره بالمنصّة التي يتمّ قياسها. ويصعّب ذلك مقارنة وقت استجابة الخادم على مستوى المنصات أو التقنيات المختلفة استنادًا إلى الميزات التي تستخدمها، ومدى تأثير ذلك في قياس وقت استجابة الخادم المستخدَم.
غالبًا ما يُعتبر وقت استجابة خادم الويب أيضًا مؤشرًا لوقت استجابة الخادم أو المضيف. مع ذلك، سيتأثر بعوامل خارجة عن هذا التحكّم المباشر، مثل وقت إعادة التوجيه، سواء تم عرضه من ذاكرة تخزين مؤقت من خلال شبكة توصيل للمحتوى (CDN)، أو من المحتمل أن يحتاج إلى العودة إلى خادم المصدر لفترة أطول. ويظهر ذلك بشكلٍ خاص في البيانات الميدانية، إذ يقلّ عادةً تأثير هذه العوامل في الاختبارات المعملية لأنّه يتم عادةً اختبار عنوان URL النهائي وغالبًا ما يتم إلغاء تغييرات التخزين المؤقت بشكل متكرّر. يُبلغ مقياس Lighthouse عن وقت استجابة الخادم بدلاً من وقت استجابة خادم الويب لجعل ذلك أكثر وضوحًا، ولكن قد لا تفعل ذلك أدوات المختبر الأخرى.
ما هي نتيجة TTFB الجيدة؟
بما أنّ وقت استجابة الخادم يسبق المقاييس التي تركّز على المستخدِم، مثل سرعة عرض المحتوى على الصفحة (FCP) وسرعة عرض أكبر محتوى مرئي (LCP)، ننصحك بأن يستجيب خادمك لطلبات التنقّل بسرعة كافية كي يحصل %75 من المستخدِمين على سرعة عرض المحتوى على الصفحة ضمن الحدّ "الجيد". كدليل تقريبي، يجب أن تسعى معظم المواقع الإلكترونية إلى أن يكون وقت استجابة خادمها 0.8 ثانية أو أقل.
كيفية قياس وقت استجابة خادم الويب
يمكن قياس وقت استجابة الخادم في المختبر أو في الميدان بالطُرق التالية.
أدوات الحقل
أدوات المختبر
- في لوحة الشبكة ضمن "أدوات مطوّري البرامج في Chrome"
- WebPageTest
قياس TTFB في JavaScript
يمكنك قياس وقت استجابة الخادم لطلبات التنقّل في المتصفّح باستخدام واجهة برمجة التطبيقات 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);
قياس طلبات الموارد
ينطبق وقت استجابة خادم الويب على جميع الطلبات، وليس على طلبات التنقّل فقط. وعلى وجه الخصوص، يمكن أن تؤدي الموارد المستضافة على خوادم متعددة المصادر إلى حدوث تأخير بسبب الحاجة إلى إعداد اتصالات بهذه الخوادم. لقياس وقت الاستجابة للشبكة للموارد في الحقل، استخدِم 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
، لأنّ الاتصال مفتوحًا بالفعل أو يتم استرداد المورد على الفور من ذاكرة التخزين المؤقت.
كيفية تحسين TTFB
للحصول على إرشادات حول تحسين وقت استجابة خادم موقعك الإلكتروني، اطّلِع على دليلنا التفصيلي حول تحسين وقت استجابة خادم الموقع الإلكتروني.