पहली बाइट का समय (TTFB)

Jeremy Wagner
Barry Pollard

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

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

सोर्स

टीटीएफ़बी क्या है?

TTFB एक मेट्रिक है, जो किसी रिसॉर्स के अनुरोध और जवाब का पहला बाइट मिलने के बीच के समय को मेज़र करती है.

नेटवर्क अनुरोध के समय का विज़ुअलाइज़ेशन. बाईं से दाईं ओर, रीडायरेक्ट, सेवा वर्कर शुरू होना, सेवा वर्कर फ़ेच इवेंट, एचटीटीपी कैश मेमोरी, डीएनएस, टीसीपी, अनुरोध, शुरुआती संकेत (103), जवाब (जो अनलोड करने के लिए प्रॉम्प्ट के साथ ओवरलैप होता है), प्रोसेसिंग, और लोड. इनसे जुड़ी समयावधि ये हैं: redirectStart और redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, interimResponseStart, responseStart, unloadEventStart, unloadEventEnd, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart, और loadEventEnd.
नेटवर्क अनुरोध के चरणों और उनसे जुड़ी समयावधि का डायग्राम. TTFB, startTime और responseStart के बीच बीता समय मेज़र करता है.

अनुरोध के इन चरणों का कुल समय, टीटीएफ़बी होता है:

  • रीडायरेक्ट होने में लगने वाला समय
  • अगर लागू हो, तो सेवा वर्कर के शुरू होने का समय
  • DNS लुकअप
  • कनेक्शन और TLS बातचीत
  • अनुरोध, जब तक जवाब का पहला बाइट नहीं मिल जाता

कनेक्शन सेटअप करने में लगने वाले समय और बैकएंड में इंतज़ार का समय कम करने से, आपका टीटीएफ़बी कम हो सकता है.

टीटीएफ़बी की अन्य परिभाषाएं

पिछली परिभाषा, सामान्य परिभाषा है. हालांकि, रिपोर्ट के जल्दी मिलने की सुविधा के आने के बाद, "पहला बाइट" क्या है, इस पर बहस हो सकती है. firstInterimResponseStart, responseStart में समय की एक नई एंट्री है, ताकि इन दोनों के बीच अंतर किया जा सके. हालांकि, यह सिर्फ़ Chrome और Chromium पर आधारित ब्राउज़र में काम करती है. इसलिए, कुछ ब्राउज़र और टूल (इनमें CrUX भी शामिल है), शुरुआती हिंट के साथ-साथ पहले बाइट मिलने तक मेज़र करते हैं.

जल्दी जवाब देने का एक नया उदाहरण, रिस्पॉन्स के लिए सुझाव है. कुछ सर्वर, मुख्य हिस्सा उपलब्ध होने से पहले ही दस्तावेज़ के रिस्पॉन्स को फ़्लश करने की अनुमति देते हैं. ऐसा, सिर्फ़ एचटीटीपी हेडर या <head> एलिमेंट के साथ किया जा सकता है. इन दोनों का असर, रिस्पॉन्स के जल्दी मिलने की सुविधा से मिलता-जुलता हो सकता है. इसलिए, इससे यह तय करना मुश्किल हो जाता है कि टीटीएफ़बी का क्या मतलब है.

ब्राउज़र को दस्तावेज़ के लिए, काम के डेटा के "पहले बाइट" मिलने के समय के हिसाब से, इन सभी परिभाषाओं को मान्य माना जा सकता है. अगर पूरा जवाब मिलने में कुछ और समय लगेगा, तो डेटा को जल्दी भेजने में असल फ़ायदा है. सबसे ज़रूरी बात यह समझना है कि आपका इस्तेमाल किया जा रहा टूल, किस तरह के मेज़रमेंट करता है और मेज़र किए जा रहे प्लैटफ़ॉर्म का उस पर क्या असर पड़ता है. इस वजह से, अलग-अलग प्लैटफ़ॉर्म या टेक्नोलॉजी के बीच टीटीएफ़बी की तुलना करना मुश्किल हो जाता है. यह इस बात पर निर्भर करता है कि वे किन सुविधाओं का इस्तेमाल करते हैं और इसका इस्तेमाल किए जा रहे टीटीएफ़बी मेज़रमेंट पर क्या असर पड़ता है.

TTFB को अक्सर सर्वर या होस्ट के रिस्पॉन्स टाइम के इंडिकेटर के तौर पर भी माना जाता है. हालांकि, इस पर उन चीज़ों का असर पड़ेगा जिन पर सीधे तौर पर कंट्रोल नहीं किया जा सकता. जैसे, रीडायरेक्ट में लगने वाला समय, यह कि इसे सीडीएन के कैश मेमोरी से दिखाया जा रहा है या ऑरिजिन सर्वर पर वापस जाने में ज़्यादा समय लग रहा है. यह फ़ील्ड डेटा में खास तौर पर साफ़ तौर पर दिखता है—लैब टेस्टिंग पर आम तौर पर इन फ़ैक्टर का कम असर पड़ता है, क्योंकि आम तौर पर एंड यूआरएल की जांच की जाती है और अक्सर कैश मेमोरी में बदलावों को बार-बार खारिज किया जाता है. लाइटहाउस, टीटीएफ़बी के बजाय सर्वर रिस्पॉन्स टाइम की रिपोर्ट करता है, ताकि यह साफ़ तौर पर पता चल सके. हालांकि, ऐसा हो सकता है कि अन्य लैब टूल ऐसा न करें.

अच्छा टीटीएफ़बी स्कोर क्या होता है?

TTFB, फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) और सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी) जैसी उपयोगकर्ता-केंद्रित मेट्रिक से पहले होती है. इसलिए, हमारा सुझाव है कि आपका सर्वर नेविगेशन के अनुरोधों का तुरंत जवाब दे, ताकि 75वें पर्सेंटाइल के उपयोगकर्ताओं को एफ़सीपी "अच्छा" थ्रेशोल्ड में मिले. आम तौर पर, ज़्यादातर साइटों का टीटीएफ़बी 0.8 सेकंड या उससे कम होना चाहिए.

अच्छी टीटीएफ़बी वैल्यू 0.8 सेकंड या उससे कम होती हैं. खराब वैल्यू 1.8 सेकंड से ज़्यादा होती हैं. इन दोनों के बीच की वैल्यू में सुधार की ज़रूरत होती है
TTFB की अच्छी वैल्यू 0.8 सेकंड या उससे कम होती हैं. वहीं, खराब वैल्यू 1.8 सेकंड से ज़्यादा होती हैं.

टीटीएफ़बी को मेज़र करने का तरीका

TTFB को लैब या फ़ील्ड में इन तरीकों से मेज़र किया जा सकता है.

फ़ील्ड टूल

लैब टूल

JavaScript में TTFB मेज़र करना

नेविगेशन टाइमिंग एपीआई की मदद से, ब्राउज़र में नेविगेशन अनुरोधों के टीटीएफ़बी को मेज़र किया जा सकता है. नीचे दिए गए उदाहरण में, navigation एंट्री को सुनने और उसे कंसोल में लॉग करने वाला PerformanceObserver बनाने का तरीका बताया गया है:

new PerformanceObserver((entryList) => {
  const [pageNav] = entryList.getEntriesByType('navigation');

  console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
  type: 'navigation',
  buffered: true
});

web-vitals JavaScript लाइब्रेरी, ब्राउज़र में TTFB को ज़्यादा आसानी से मेज़र कर सकती है:

import {onTTFB} from 'web-vitals';

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

संसाधन के अनुरोधों को मेज़र करना

टीटीएफ़बी, सिर्फ़ नेविगेशन अनुरोधों पर ही नहीं, बल्कि सभी अनुरोधों पर लागू होता है. खास तौर पर, क्रॉस-ऑरिजिन सर्वर पर होस्ट किए गए रिसॉर्स की वजह से, लैटेंसी हो सकती है. ऐसा इसलिए होता है, क्योंकि उन सर्वर से कनेक्शन सेट अप करने की ज़रूरत होती है. फ़ील्ड में मौजूद संसाधनों के लिए टीटीएफ़बी मेज़र करने के लिए, PerformanceObserver में Resource Timing API का इस्तेमाल करें:

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 को बेहतर बनाने का तरीका

अपनी साइट के टीटीएफ़बी को बेहतर बनाने के बारे में दिशा-निर्देश पाने के लिए, टीटीएफ़बी को ऑप्टिमाइज़ करने के बारे में हमारी गाइड देखें.