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