टाइम टू फ़र्स्ट बाइट (टीटीएफ़बी) एक बुनियादी मेट्रिक है. यह लैब और फ़ील्ड, दोनों में कनेक्शन को सेटअप करने में लगने वाले समय और वेब सर्वर पर रिस्पॉन्स मिलने में लगने वाले समय को मापता है. यह किसी संसाधन के अनुरोध और रिस्पॉन्स का पहला बाइट शुरू होने के बीच के समय को मापता है. इससे यह जानने में मदद मिलती है कि कब वेब सर्वर अनुरोधों का जवाब देने के लिए बहुत धीमा है. नेविगेशन के अनुरोधों—यानी, किसी एचटीएमएल दस्तावेज़ के अनुरोध—के मामले में, यह लोड होने की काम की हर दूसरी परफ़ॉर्मेंस मेट्रिक से पहले लागू होता है.
startTime से responseStart के बीच बिताए गए समय को मापता है.
टीटीएफ़बी, अनुरोध के इन चरणों का योग है:
- रीडायरेक्ट समय
- सर्विस वर्कर के शुरू होने में लगने वाला समय (अगर लागू हो)
- DNS लुकअप
- कनेक्शन और TLS नेगोशिएशन
- जवाब का पहला बाइट मिलने तक अनुरोध करें
कनेक्शन सेटअप करने के समय और बैकएंड पर इंतज़ार के समय को कम करने से, आपके टीटीएफ़बी को कम करने में मदद मिलती है.
एक अच्छा TTFB स्कोर क्या होता है?
टीटीएफ़बी, उपयोगकर्ता पर आधारित मेट्रिक, जैसे कि फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) और सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) से पहले होता है. इसलिए, हमारा सुझाव है कि आपका सर्वर, नेविगेशन के अनुरोधों का तुरंत जवाब दे, ताकि उपयोगकर्ताओं के 75वें पर्सेंटाइल को "अच्छा" थ्रेशोल्ड के हिसाब से एफ़सीपी. मोटे तौर पर, ज़्यादातर साइटों के लिए टीटीएफ़बी 0.8 सेकंड या उससे कम होना चाहिए.
अहम जानकारी: TTFB वेबसाइट की परफ़ॉर्मेंस की जानकारी वाली मेट्रिक नहीं है. इसलिए, साइटों के लिए इसका बेहतरीन टीटीएफ़बी होना ज़रूरी नहीं है. बशर्ते, ज़्यादा लंबे समय तक TTFB की वजह से आपकी साइट के लिए ज़रूरी मेट्रिक पर सही स्कोर हासिल करना मुश्किल न हो. कॉन्टेंट लोड होने में लगने वाले समय को ऑप्टिमाइज़ करते समय, इस बात पर ध्यान दें कि आपकी साइट किस तरह कॉन्टेंट डिलीवर करती है. कम TTFB का मतलब है कि जब कोई साइट अपने शुरुआती मार्कअप को तुरंत डिलीवर करती है और उसके बाद स्क्रिप्ट में उस कॉन्टेंट को दिखाने के लिए इंतज़ार करना पड़ता है, जैसा कि अक्सर सिंगल पेज ऐप्लिकेशन (एसपीए) में होता है, तो वहीं दूसरी ओर, जिस सर्वर से रेंडर की गई साइट को ज़्यादा क्लाइंट-साइड वाले काम की ज़रूरत नहीं होती उसके एफ़सीपी और एलसीपी वैल्यू, क्लाइंट की ओर से रेंडर की गई साइट से बेहतर हो सकती हैं. भले ही, उस साइट का टीटीएफ़बी ज़्यादा हो.
टीटीएफ़बी को मापने का तरीका
टीटीएफ़बी को लैब या फ़ील्ड में यहां बताए गए तरीकों से मापा जा सकता है.
फ़ील्ड टूल
लैब टूल
- Chrome के DevTools के नेटवर्क पैनल में
- WebPageTest
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);
संसाधन के अनुरोधों को मेज़र करना
TTFB सिर्फ़ नेविगेशन के अनुरोधों पर नहीं, बल्कि सभी अनुरोधों पर लागू होता है. खास तौर पर,
क्रॉस-ऑरिजिन सर्वर पर होस्ट किए गए रिसॉर्स, उन सर्वर के लिए कनेक्शन सेट अप करते समय इंतज़ार कर सकते हैं. फ़ील्ड में मौजूद संसाधनों के लिए TTFB को मापने के लिए, PerformanceObserver में Resource Timing API का इस्तेमाल करें:
new PerformanceObserver((entryList) => {
const entries = entryList.getEntries();
for (const entry of entries) {
// Some resources might have a responseStart value of 0 if they're being
// cached, or if a cross-origin resource is 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 को बेहतर बनाने के बारे में दिशा-निर्देश पाने के लिए, टीटीएफ़बी को ऑप्टिमाइज़ करने के बारे में हमारी पूरी गाइड देखें.