रेंडरिंग टैब पर, परफ़ॉर्मेंस से जुड़े विकल्पों के इस रेफ़रंस की मदद से, रेंडरिंग परफ़ॉर्मेंस की समस्याओं के बारे में जानें.
पेंट फ़्लैशिंग की मदद से, फिर से पेंट की गई जगहों को हाइलाइट करें
यह विकल्प चालू रहने पर, रीपेंट करते समय Chrome, स्क्रीन पर हरे रंग का फ़्लैश दिखाता है.
फिर से पेंट किए जा रहे हिस्सों को देखने के लिए:
- इस डेमो पर रेंडरिंग टैब खोलें और पेंट फ़्लैश को चुनें.
- हरे रंग से हाइलाइट की गई रीपेंटिंग को देखें.
अगर, किसी दूसरे पेज पर, आपको पूरी स्क्रीन का फ़्लैश हरा या स्क्रीन के वे हिस्से दिखते हैं जिन्हें आपके हिसाब से पेंट किया जाना चाहिए, तो इनकी जांच करें.
लेआउट शिफ़्ट रीजन को हाइलाइट करें
लेआउट शिफ़्ट की वजह से अनचाहे तरीके से पेंट किया जा सकता है और यह न सिर्फ़ परेशान करने वाला हो सकता है, बल्कि नुकसान भी पहुंचा सकता है.
किसी पेज पर, लेआउट शिफ़्ट की जगह और समय देखने के लिए:
रेंडरिंग टैब खोलें और लेआउट शिफ़्ट क्षेत्र को चुनें.
पेज को रीफ़्रेश करें. लेआउट शिफ़्ट के हिस्से, कुछ हद तक बैंगनी रंग से हाइलाइट किए गए हैं.
लेयर के बॉर्डर वाली लेयर और टाइल देखें
पेज के सबसे ऊपर लेयर बॉर्डर और टाइल का ओवरले देखने के लिए, लेयर बॉर्डर का इस्तेमाल करें.
लेयर बॉर्डर चालू करने के लिए:
- रेंडरिंग टैब खोलें और लेयर बॉर्डर को चुनें.
- नारंगी और ऑलिव रंग की लेयर के बॉर्डर और हरे-पीले रंग की टाइल को देखें.
कलर-कोडिंग के बारे में ज़्यादा जानकारी पाने के लिए, debug_colors.cc में जाकर टिप्पणियां देखें.
फ़्रेम रेंडरिंग के आंकड़ों की मदद से, रीयल टाइम में फ़्रेम प्रति सेकंड देखें
फ़्रेम रेंडरिंग के आंकड़े एक ओवरले है, जो आपके व्यूपोर्ट के ऊपरी दाएं कोने में दिखता है.
फ़्रेम रेंडरिंग के आंकड़े खोलने के लिए:
- रेंडरिंग टैब खोलें और रेंडरिंग के आंकड़ों को फ़्रेम करें चेकबॉक्स को चालू करें.
- पेज के सबसे ऊपर दाएं कोने में मौजूद आंकड़े देखें.
फ़्रेम रेंडरिंग के आंकड़े ओवरले दिखाता है:
- पेज चलने पर, हर सेकंड दिखने वाले फ़्रेम का रीयल-टाइम अनुमान.
- तीन फ़्रेम टाइप के साथ प्लॉट के तौर पर फ़्रेम टाइमलाइन:
- फ़्रेम रेंडर हो गए हैं (नीली लाइन में)
- कुछ फ़्रेम दिखाए गए हैं (पीली लाइनें)
- छोड़े गए फ़्रेम (लाल लाइनें).
- जीपीयू रास्टर की स्थिति: चालू या बंद है. ज़्यादा जानकारी के लिए, जीपीयू रास्टराइज़ेशन पाने का तरीका देखें.
- जीपीयू मेमोरी का इस्तेमाल: इस्तेमाल की गई मेमोरी और ज़्यादा से ज़्यादा एमबी मेमोरी.
स्क्रोलिंग की परफ़ॉर्मेंस से जुड़ी समस्याओं का पता लगाना
स्क्रोल करने की परफ़ॉर्मेंस से जुड़ी समस्याओं का इस्तेमाल करके, पेज के उन एलिमेंट का पता लगाएं जिनमें स्क्रोल करने से जुड़े इवेंट लिसनर हैं. इनसे पेज की परफ़ॉर्मेंस पर बुरा असर पड़ सकता है.
उन एलिमेंट को देखने के लिए जो समस्या कर सकते हैं:
- रेंडरिंग टैब खोलें और स्क्रोल करने की परफ़ॉर्मेंस से जुड़ी समस्याएं चुनें.
- हाइलाइट किए गए जिन एलिमेंट में समस्या हो सकती है उन्हें देखें.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देखें
वेब की परफ़ॉर्मेंस की जानकारी, Google की एक ऐसी पहल है जिसमें क्वालिटी से जुड़े सभी सिग्नल के लिए एक ही दिशा-निर्देश दिए जाते हैं. ये सिग्नल, वेब पर लोगों को बेहतरीन अनुभव देने के लिए ज़रूरी हैं.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी, सभी वेब पेजों पर लागू होने वाली वेबसाइट की परफ़ॉर्मेंस की जानकारी का वह सबसेट है. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली हर मेट्रिक, उपयोगकर्ता अनुभव के अलग-अलग पहलू के बारे में बताती है. इसे फ़ील्ड में मेज़र किया जा सकता है और उपयोगकर्ता को ध्यान में रखकर बनाए गए अहम अनुभव के बारे में भी पता चलता है. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी में ये चीज़ें शामिल हैं:
- सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी): इससे लोडिंग की परफ़ॉर्मेंस का पता चलता है. लोगों को अच्छा अनुभव देने के लिए, पेज के पहली बार लोड होने के 2.5 सेकंड के अंदर एलसीपी दिखना चाहिए.
- इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी): इंटरैक्टिविटी को मापता है. उपयोगकर्ताओं को अच्छा अनुभव देने के लिए, पेजों का आईएनपी 200 मिलीसेकंड या इससे कम होना चाहिए.
- कुल लेआउट शिफ़्ट (सीएलएस): इससे विज़ुअल स्टैबिलिटी का पता चलता है. अच्छा उपयोगकर्ता अनुभव देने के लिए, पेजों का सीएलएस 0.1. या इससे कम होना चाहिए.
अपने पेज की वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली वैल्यू देखने के लिए, वेब की परफ़ॉर्मेंस की जानकारी देने वाले Chrome एक्सटेंशन का इस्तेमाल करें.