#perfmatters: परफ़ॉर्मेंस निंजा के लिए टूल की तकनीकें
परफ़ॉर्मेंस विशेषज्ञ बनने के लिए, डेवलपमेंट टूल के बारे में अच्छी तरह जानना ज़रूरी है. Colt ने परफ़ॉर्मेंस के तीन मुख्य पहलुओं के बारे में बताया: नेटवर्क, कंप्यूट, और रेंडर. साथ ही, उन्होंने हर क्षेत्र की मुख्य समस्या के बारे में बताया और उन्हें ढूंढने और खत्म करने के लिए उपलब्ध टूल के बारे में जानकारी दी.
- अब Android पर Chrome की प्रोफ़ाइल, डेस्कटॉप पर इस्तेमाल किए जाने वाले DevTools की मदद से बनाई जा सकती है.
- परफ़ॉर्मेंस से जुड़े काम के लिए, डेटा इकट्ठा करना, अहम जानकारी हासिल करना, और कार्रवाई करना, यह एक बार-बार होने वाला लूप है.
- उन ऐसेट को प्राथमिकता दें जो आपके पेजों के लिए, रेंडरिंग के अहम पाथ पर हैं.
- पेंट करने से बचें, क्योंकि यह बहुत महंगा होता है.
- अपने ऐप्लिकेशन में, अहम समय के दौरान मेमोरी चर्न आउट और कोड को लागू करने से बचें.
#perfmatters: नेटवर्क की परफ़ॉर्मेंस को ऑप्टिमाइज़ करना
आम तौर पर, नेटवर्क और इंतज़ार का समय, साइट के पेज लोड होने में लगने वाले कुल समय का 70% होता है. यह एक बड़ा प्रतिशत है. इसका मतलब यह भी है कि इस पर किए गए किसी भी सुधार से, आपके उपयोगकर्ताओं को काफ़ी फ़ायदा मिलेगा. इस टॉक में, इल्या ने Chrome में किए गए हाल ही के बदलावों के बारे में बताया है. इन बदलावों से, पेज लोड होने में लगने वाला समय कम हो जाएगा. साथ ही, इल्या ने कुछ ऐसे बदलावों के बारे में भी बताया है जिन्हें अपने एनवायरमेंट में किया जा सकता है. इनसे नेटवर्क लोड को कम से कम रखने में मदद मिलेगी.
- Chrome M27 में, संसाधन शेड्यूलर की नई और बेहतर सुविधा है.
- Chrome M28 ने SPDY साइटों को और भी तेज़ बना दिया है.
- Chrome की कैश मेमोरी को पूरी तरह से बदल दिया गया है.
- SPDY / एचटीटीपी/2.0, ट्रांसफ़र की स्पीड को काफ़ी बेहतर बनाता है. Nginx, Apache, और Jetty (सिर्फ़ तीन नाम) के लिए, बेहतर SPDY मॉड्यूल उपलब्ध हैं.
- QUIC, यूडीपी के आधार पर बनाया गया एक नया और एक्सपेरिमेंटल प्रोटोकॉल है. अभी इसका इस्तेमाल शुरू ही हुआ है, लेकिन इससे उपयोगकर्ताओं को फ़ायदा मिलेगा.
#perfmatters: 60fps लेआउट और रेंडरिंग
अपने प्रोजेक्ट में 60fps तक की फ़्रेम रेट हासिल करना, उपयोगकर्ता के जुड़ाव से सीधे तौर पर जुड़ा है. साथ ही, यह प्रोजेक्ट की सफलता के लिए ज़रूरी है. इस बातचीत में, नैट और टॉम ने Chrome की रेंडरिंग पाइपलाइन के बारे में बताया. साथ ही, फ़्रेम ड्रॉप होने की कुछ सामान्य वजहों और उनसे बचने के तरीकों के बारे में भी बताया.
- एक फ़्रेम 16 मिलीसेकंड का होता है. इसमें JavaScript, स्टाइल कैलकुलेशन, पेंटिंग, और कंपोजिंग शामिल है.
- पेंटिंग की कीमत बहुत ज़्यादा है. पेंट स्टॉर्म में, महंगे पेंट का काम बार-बार बिना ज़रूरत के किया जाता है.
- लेयर का इस्तेमाल, पेंट किए गए एलिमेंट को कैश मेमोरी में सेव करने के लिए किया जाता है.
- इनपुट हैंडलर (टच और माउसव्हील के लिसनर), ऐप्लिकेशन के तेज़ी से काम करने की सुविधा को खत्म कर सकते हैं. इसलिए, अगर हो सके, तो इनका इस्तेमाल न करें. जहां उन्हें कम से कम नहीं रखा जा सकता.
#perfmatters: इंस्टैंट मोबाइल वेब ऐप्लिकेशन
क्रिटिकल रेंडरिंग पाथ से उन सभी चीज़ों (JavaScript, एचटीएमएल, सीएसएस, इमेज) का पता चलता है जिनकी ज़रूरत ब्राउज़र को पेज को पेंट करने से पहले होती है. क्रिटिकल रेंडरिंग पाथ पर ऐसेट की डिलीवरी को प्राथमिकता देना ज़रूरी है. खास तौर पर, नेटवर्क की समस्या वाले डिवाइसों के उपयोगकर्ताओं के लिए, जैसे कि मोबाइल नेटवर्क पर काम करने वाले स्मार्टफ़ोन. ब्रैयन ने बताया कि Google की टीम ने PageSpeed Insights की वेबसाइट के लिए, ऐसेट की पहचान करने और उन्हें प्राथमिकता देने की प्रोसेस को कैसे पूरा किया. इससे वेबसाइट के लोड होने में लगने वाला समय 20 सेकंड से घटकर सिर्फ़ 1 सेकंड पर आ गया!
- रेंडर को ब्लॉक करने वाली JavaScript और सीएसएस को हटाएं.
- दिखने वाले कॉन्टेंट को प्राथमिकता दें.
- स्क्रिप्ट को एसिंक्रोनस तरीके से लोड करें.
- शुरुआती व्यू को सर्वर-साइड पर एचटीएमएल के तौर पर रेंडर करें और JavaScript की मदद से बेहतर बनाएं.
- रेंडर करने में रुकावट डालने वाली सीएसएस को कम करें. शुरुआती व्यूपोर्ट दिखाने के लिए सिर्फ़ ज़रूरी स्टाइल डिलीवर करें. इसके बाद, बाकी स्टाइल डिलीवर करें.
- रेंडर करने में देरी करने वाली सीएसएस में इनलाइन किए गए बड़े डेटा यूआरआई, रेंडर की परफ़ॉर्मेंस के लिए नुकसानदेह होते हैं. ये ऐसे रिसॉर्स को ब्लॉक कर रहे हैं जहां इमेज यूआरएल ब्लॉक नहीं कर रहे हैं.