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