टीटीएफ़बी क्या है?
TTFB एक मेट्रिक है, जो किसी संसाधन के अनुरोध और जवाब का पहला बाइट शुरू होने के बीच के समय को मापता है.
startTime से responseStart के बीच बिताए गए समय को मापता है.
टीटीएफ़बी, अनुरोध के इन चरणों का योग है:
- रीडायरेक्ट समय
- सर्विस वर्कर के शुरू होने में लगने वाला समय (अगर लागू हो)
- DNS लुकअप
- कनेक्शन और TLS नेगोशिएशन
- जवाब का पहला बाइट आने तक अनुरोध करें
कनेक्शन को सेटअप करने में लगने वाले समय और बैकएंड पर, इंतज़ार के समय को कम करने से टीटीएफ़बी में कमी आएगी.
एक अच्छा TTFB स्कोर क्या होता है?
टीटीएफ़बी ने उपयोगकर्ता पर आधारित मेट्रिक, जैसे कि फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) और सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) से पहले काम किया है. इसलिए, हमारा सुझाव है कि आप नेविगेशन अनुरोधों का तेज़ी से जवाब दें, ताकि उपयोगकर्ताओं के 75वें पर्सेंटाइल को "अच्छे" थ्रेशोल्ड के अंदर एफ़सीपी का अनुभव हो. मोटे तौर पर गाइड के तौर पर, ज़्यादातर साइटों को 0.8 सेकंड या इससे कम समय का पहला बाइट का इस्तेमाल करना चाहिए.
टीटीएफ़बी को मापने का तरीका
टीटीएफ़बी को लैब या फ़ील्ड में यहां बताए गए तरीकों से मापा जा सकता है.
फ़ील्ड टूल
लैब टूल
- 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 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 की वैल्यू दिखा सकते हैं, क्योंकि कनेक्शन पहले से ही चालू है या रिसॉर्स को कैश मेमोरी से तुरंत वापस पाया जा सकता है.
टीटीएफ़बी को बेहतर बनाने का तरीका
टीटीएफ़बी को ऑप्टिमाइज़ करने के बारे में पूरी जानकारी देने वाली गाइड पब्लिश की गई है. इसका मकसद, आपको अपनी वेबसाइट के टीटीएफ़बी को बेहतर बनाने के बारे में ज़्यादा जानकारी देना है.