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

Barry Pollard
Jeremy Wagner

Browser Support

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

Source

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

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 बातचीत
  • अनुरोध, जब तक जवाब का पहला बाइट नहीं मिल जाता

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

टीटीएफ़बी और शुरुआती हिंट

103 Early Hints के आने से, इस बात को लेकर कुछ भ्रम पैदा हुआ है कि "पहला बाइट" टीटीएफ़बी क्या मेज़र करता है. 103 शुरुआती हिंट को "पहले बाइट" के तौर पर गिना जाता है. finalResponseHeadersStart, responseStart में समय की एक अतिरिक्त एंट्री है. यह दस्तावेज़ के फ़ाइनल रिस्पॉन्स (आम तौर पर एचटीटीपी 200 रिस्पॉन्स) की शुरुआत को मेज़र करती है.

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

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

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

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

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