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