ما هو TTFB؟
"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 ثانية أو أقل.
كيفية قياس TTFB
يمكن قياس TTFB في المختبر أو في المجال بالطرق التالية.
الأدوات الميدانية
أدوات التمرين المعملي
- في لوحة الشبكة ضمن "أدوات مطوري البرامج" في 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
});
يمكن أن تقيس مكتبة JavaScript web-vitals أيضًا تحويل النص إلى كلام (TTFB) في المتصفّح بإيجاز أكثر:
import {onTTFB} from 'web-vitals';
// Measure and log TTFB as soon as it's available.
onTTFB(console.log);
قياس طلبات الموارد
ينطبق TTFB على جميع الطلبات، وليس فقط طلبات التنقل. وعلى وجه الخصوص، يمكن للموارد المستضافة على خوادم متعددة المصادر إدخال وقت الاستجابة بسبب الحاجة إلى إعداد اتصالات بتلك الخوادم. لقياس 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.