टोटल ब्लॉकिंग टाइम (TBT), उन मेट्रिक में से एक है जिन्हें लाइटहाउस रिपोर्ट के परफ़ॉर्मेंस सेक्शन में ट्रैक किया जाता है. हर मेट्रिक, पेज के लोड होने की स्पीड से जुड़ी जानकारी को कैप्चर करती है.
लाइटहाउस रिपोर्ट में TBT को मिलीसेकंड में दिखाया जाता है:
![लाइटहाउस टोटल ब्लॉकिंग टाइम ऑडिट का स्क्रीनशॉट](https://developer.chrome.com/static/docs/lighthouse/performance/lighthouse-total-blocking-time/image/a-screenshot-the-lightho-78f54ec872364.png?authuser=6&hl=hi)
TBT क्या मापता है
TBT किसी पेज को उपयोगकर्ता के इनपुट का जवाब देने से ब्लॉक होने की कुल अवधि मापता है. इन गतिविधियों में माउस क्लिक, स्क्रीन टैप या कीबोर्ड दबाना शामिल है. कुल योग का हिसाब लगाने के लिए, फ़र्स्ट कॉन्टेंटफ़ुल पेंट और इंटरैक्टिव में लगने वाले समय के बीच के सभी लंबे टास्क के ब्लॉक करने वाले हिस्से को जोड़ा जाता है. 50 मि॰से॰ से ज़्यादा समय तक चलने वाला कोई भी टास्क लंबा टास्क होता है. 50 मि॰से॰ के बाद की अवधि, ब्लॉक करने वाला हिस्सा है. उदाहरण के लिए, अगर लाइटहाउस 70 मि॰से॰ लंबे टास्क का पता लगाता है, तो ब्लॉक करने वाला हिस्सा 20 मि॰से॰ होगा.
लाइटहाउस आपका TBT स्कोर कैसे तय करता है
आपका TBT स्कोर, मोबाइल डिवाइस पर लोड होने पर आपके पेज के TBT समय और लाखों वास्तविक साइटों के TBT समय की तुलना करता है. लाइटहाउस स्कोर थ्रेशोल्ड कैसे सेट किए जाते हैं, यह जानने के लिए मेट्रिक स्कोर तय करने का तरीका देखें.
इस टेबल में आपके टीबीटी स्कोर को समझने का तरीका बताया गया है:
TBT समय (मिलीसेकंड में) |
कलर-कोडिंग |
---|---|
0 से 200 | हरा (तेज़) |
200-600 | नारंगी (मध्यम) |
600 से ज़्यादा | लाल (धीमा) |
टीबीटी स्कोर को बेहतर बनाने का तरीका
Chrome DevTools के परफ़ॉर्मेंस पैनल की मदद से, लंबे टास्क की मुख्य वजह का पता लगाने का तरीका जानने के लिए, मेरे लंबे टास्क की वजह क्या है? देखें.
आम तौर पर, लंबे टास्क करने की सबसे सामान्य वजहें ये हैं:
- JavaScript बिना वजह लोड होना, पार्स करना या लागू करना. परफ़ॉर्मेंस पैनल में अपने कोड का विश्लेषण करते समय आपको पता चल सकता है कि मुख्य थ्रेड ऐसा काम कर रहा है जो पेज को लोड करने के लिए ज़रूरी नहीं है. कोड को अलग-अलग हिस्सों में बांटने की मदद से JavaScript पेलोड कम करने, इस्तेमाल नहीं होने वाले कोड को हटाने या तीसरे पक्ष के JavaScript को बेहतर तरीके से लोड करने से आपका टीबीटी स्कोर बेहतर हो सकता है.
- अधूरे JavaScript स्टेटमेंट. उदाहरण के लिए, परफ़ॉर्मेंस पैनल में अपने कोड का विश्लेषण करने के बाद, मान लें कि
आपको
document.querySelectorAll('a')
पर कोई ऐसा कॉल दिखता है जो 2,000 नोड दिखाता है. सिर्फ़ 10 नोड दिखाने वाले खास सिलेक्टर का इस्तेमाल करने के लिए, अपने कोड की रीफ़ैक्टर करने से आपका टीबीटी स्कोर बेहतर होगा.
परफ़ॉर्मेंस के कुल स्कोर को बेहतर बनाने का तरीका
अगर आपके पास किसी खास मेट्रिक पर फ़ोकस करने की कोई खास वजह न हो, तो आम तौर पर अपने पूरे परफ़ॉर्मेंस स्कोर को बेहतर बनाने पर फ़ोकस करना बेहतर होता है.
अपनी लाइटहाउस रिपोर्ट के अवसर सेक्शन का इस्तेमाल करके, यह तय करें कि आपके पेज के लिए किन सुधारों से सबसे ज़्यादा फ़ायदा होगा. अवसर जितना अहम होगा, आपके परफ़ॉर्मेंस स्कोर पर उतना ही ज़्यादा असर होगा. उदाहरण के लिए, नीचे दिया गया लाइटहाउस स्क्रीनशॉट दिखाता है कि रेंडर ब्लॉक करने वाले रिसॉर्स को हटाने से सबसे बड़ा सुधार होगा:
![लाइटहाउस: अवसर सेक्शन](https://developer.chrome.com/static/docs/lighthouse/performance/interactive/image/lighthouse-opportunities-ec2197d9dce25_1920.png?authuser=6&hl=hi)
अपनी लाइटहाउस रिपोर्ट में पहचाने गए अवसरों का पता लगाने का तरीका जानने के लिए, परफ़ॉर्मेंस ऑडिट लैंडिंग पेज देखें.
रिसॉर्स
- Total ब्लॉकिंग टाइम के ऑडिट के लिए सोर्स कोड
- क्या लंबे JavaScript टास्क की वजह से, 'इंटरैक्टिव टाइम' में देरी हो रही है?
- फ़र्स्ट इनपुट डिले को ऑप्टिमाइज़ करें
- पहला कॉन्टेंटफ़ुल पेंट
- टाइम टू इंटरैक्टिव
- कोड को बांटने की सुविधा की मदद से, JavaScript पेलोड कम करें
- इस्तेमाल न होने वाले कोड को हटाना
- तीसरे पक्ष के संसाधनों को बेहतर तरीके से लोड करना