शुरुआती जानकारी
आज के समय में, अपनी साइट के लिए सबसे ज़रूरी यह पक्का करना है कि फ़ोन या टैबलेट से साइट पर जाने पर उसकी परफ़ॉर्मेंस अच्छी हो. आगे पढ़ें और जानें कि Chrome DevTools और Android डिवाइस का इस्तेमाल करके, अपनी साइट को मोबाइल ब्राउज़र के लिए ऑप्टिमाइज़ कैसे करें.
मोबाइल वेब के लिए ऑप्टिमाइज़ करना इतना अहम क्यों है?
परफ़ॉर्मेंस
जैसे-जैसे हम 2G और 3G से 4G में ट्रांज़िशन कर रहे हैं, वैसे-वैसे मोबाइल डिवाइस में तेज़ी से सीपीयू, ज़्यादा रैम, ज़्यादा रैम, और ज़्यादा तेज़ जीपीयू और तेज़ नेटवर्क ऐक्सेस होता जा रहा है. तेज़ी से आगे बढ़ने के बावजूद, हमारे कंप्यूटर की तुलना में मोबाइल डिवाइस कम काम करते हैं. अगर आसान शब्दों में कहें, तो नेटवर्क के रिसॉर्स लोड होने में ज़्यादा समय लगता है, इमेज को अनपैक करने में ज़्यादा समय लगता है, पेज को पेंट करने में ज़्यादा समय लगता है, और स्क्रिप्ट को लागू करने में ज़्यादा समय लगता है. यह मान लेना सुरक्षित है कि किसी मोबाइल डिवाइस पर आपका पेज 5 से 10 गुना धीमे चलता है.
बैटरी
मोबाइल डिवाइस खास तौर पर बैटरी से चलने वाले होते हैं. मोबाइल डिवाइस के उपयोगकर्ता चाहते हैं कि बैटरी ज़्यादा से ज़्यादा चले. एक उप-सबसे अच्छी साइट बैटरी को ज़रूरत से ज़्यादा तेज़ी से खर्च कर सकती है. बैटरी के तेज़ी से खर्च होने को कम करने के लिए नेटवर्क ट्रैफ़िक कम करें और पेंट कम करें. जब आप किसी संसाधन को फ़ेच करते हैं, तो वाई-फ़ाई या सेल रेडियो चालू होना चाहिए, जिससे बैटरी खत्म हो जाती है. जब ब्राउज़र किसी एलिमेंट को पेंट करता है, तो सीपीयू और जीपीयू का इस्तेमाल बढ़ जाता है, जिससे बैटरी भी खर्च हो जाती है.
दिलचस्पी
परफ़ॉर्मेंस की मेट्रिक को बेहतर बनाने के लिए वह मेट्रिक आपके लिए सबसे अहम है. Facebook में हम स्क्रोलिंग पर ध्यान देते हैं. A/B टेस्ट में, हमने स्क्रोलिंग को 60fps से कम करके 30 FPS (फ़्रेम प्रति सेकंड) तक कम कर दिया था. जुड़ाव छोटा किया गया. हमने ठीक कहा, इसलिए इसे स्क्रोल करना मायने रखता है.
Edge कॉन्फ़्रेंस में Facebook
मोबाइल उपयोगकर्ता जल्द ही साइट पर आने और बाहर जाने की उम्मीद करते हैं. सबसे तेज़ी से लोड होने वाली साइट पर सबसे ज़्यादा लोग जुड़ते हैं.
परफ़ॉर्मेंस मैनेज करना
Chrome में डेवलपर के लिए बेहतरीन टूल होते हैं. इस लेख में आपको इन टूल का इस्तेमाल करके, अपनी मोबाइल साइट पर प्रोफ़ाइल बनाने का तरीका बताया गया है. अगर आपको Chrome DevTools के बारे में पहले से पता है, तो यह अच्छी बात है! अगर नहीं, तो ये बेहतरीन ट्यूटोरियल देखें:
आपने सभी निर्देशों के बारे में जान लिया है, तो आइए देखते हैं कि DevTools की मदद से अपनी मोबाइल साइट को कैसे तेज़ी से लोड किया जा सकता है. अगर आपने Android के लिए Chrome DevTools का पहली बार इस्तेमाल किया है, तो लेख में सबसे नीचे दी गई शुरुआती निर्देश देखें.
रिमोट तरीके से Chrome DevTools का इस्तेमाल करना
कंप्यूटर से टेदर किए गए Android डिवाइस से. डेस्कटॉप Chrome पर, http://localhost:9222 पर जाएं और अपने Android डिवाइस पर अपनी साइट खोलें. आपको अपने Android डिवाइस पर खुले हुए टैब की सूची पर ले जाया जाएगा. ‘जांचे जा सकने वाले पेज’ की सूची से अपना पेज चुनें.
और आपको उस पेज के लिए Chrome DevTools पर ले जाया जाएगा.
आह... वह जाना-पहचाना Chrome DevTools टूलबार मौजूद है. रिमोट Chrome DevTools के बारे में सबसे अहम बात यह है कि ये वही DevTools हैं जिनका इस्तेमाल आज आप अपने डेस्कटॉप पर कर रहे हैं. फ़र्क़ सिर्फ़ यह है कि आपका Android डिवाइस सिर्फ़ पेज के लिए ज़िम्मेदार है, जबकि डेस्कटॉप DevTools के लिए ज़िम्मेदार है. हुड के तहत, वही डेटा इकट्ठा किया जाता है और वही सुविधाएं उपलब्ध होती हैं.
उदाहरण के लिए, मैंने अपने फ़ोन पर www.sfgate.com/movies पर विज़िट किया. अपने डेस्कटॉप पर Chrome DevTools का इस्तेमाल करते हुए मैंने एलिमेंट टूल में div पर कर्सर घुमाया और जैसा कि यह डेस्कटॉप पर दिखता है, उसी तरह मेरे Android डिवाइस पर भी div को विज़ुअल तौर पर हाइलाइट किया जाता है.
एलिमेंट टूल का इस्तेमाल, स्टाइल को चालू और बंद करने के लिए भी किया जा सकता है. यह तब मददगार होगा, जब हम पेंट करने के समय की जांच करेंगे.
नेटवर्क ऐक्सेस पर लाइट शेडिंग
नेटवर्क की परफ़ॉर्मेंस का डेटा इंपोर्ट होना चाहिए और मोबाइल वेब के लिए यह और भी ज़रूरी हो जाता है. हमारे डेस्कटॉप और लैपटॉप कंप्यूटर की तुलना में, मोबाइल डिवाइस अक्सर धीमे कनेक्शन पर होते हैं. यह पक्का करने के लिए कि आप सही काम कर रहे हैं, नेटवर्क टूल में जाकर रिकॉर्ड करें को दबाकर, नेटवर्क स्नैपशॉट लें.
स्क्रीनशॉट में Google Search से आने वाले नेटवर्क ट्रैफ़िक को दिखाया गया है. अपनी साइट के नेटवर्क अनुरोधों पर नज़र रखें और उन्हें कम करने के तरीके ढूंढें. अगर आपकी साइट, सर्वर को पोल कराने के अनुरोध करती है, तो हो सकता है कि आप उपयोगकर्ता की गतिविधि पर ध्यान देना चाहें. साथ ही, उस समय पोलिंग से बचना चाहें, जब उपयोगकर्ता कुछ समय से इस्तेमाल न कर रहा हो. नेटवर्क टूल की मदद से आप रॉ एचटीटीपी हेडर देख सकते हैं. ऐसा तब किया जा सकता है, जब मोबाइल नेटवर्क इनमें से कोई भी बदलाव न कर रहे हों.
पेंट टाइम को ऑप्टिमाइज़ करना
मोबाइल वेब ब्राउज़र की सबसे बड़ी रुकावटें अपने पेज को पेंट करना है. पेंटिंग, किसी खास स्टाइल वाले पेज पर किसी एलिमेंट को बनाने की प्रोसेस है. अगर किसी एक एलिमेंट को पेंट करना महंगा होता है, तो पूरे पेज की पेंटिंग कम हो जाती है. Chrome, पहले से पेंट किए गए एलिमेंट को ऑफ़स्क्रीन बफ़र में कैश मेमोरी में सेव करने की कोशिश करता है. हालांकि, मोबाइल पर जीपीयू रैम की संख्या सीमित है. इसलिए, स्क्रीन के बाहर कैश मेमोरी में सेव किए जा सकने वाले एलिमेंट की संख्या सीमित की जा सकती है. इससे ज़्यादा पेंट करने में मदद मिलती है. साथ ही, हर पेंट डेस्कटॉप की तुलना में ज़्यादा धीमा होता है. रिस्पॉन्सिव स्क्रोलिंग के लिए, आपको पेंट करने में लगने वाले समय को कम करना होगा.
Chrome 25 में लगातार पेज को रीपेंट करने वाला मोड शामिल है. लगातार पेज को फिर से पेंट करने वाले मोड में, पेंट किए गए एलिमेंट को कभी भी कैश मेमोरी में सेव नहीं किया जाता. इसकी जगह, हर फ़्रेम में सभी एलिमेंट को पेंट किया जाता है. हर फ़्रेम पर सभी एलिमेंट को पेंट करने पर, एलिमेंट को चालू और बंद और स्टाइल को चालू और बंद करके पेंट टाइम की A/B टेस्टिंग की जा सकती है. यह प्रोसेस मैन्युअल है, लेकिन यह ट्रैक करने के लिए एक बहुत अच्छा टूल है कि आपके पेज के हर एलिमेंट को पेंट करना कितना खर्चीला है. क्लब का पहला नियम ऑप्टिमाइज़ करना है कि आप क्या पाने की कोशिश कर रहे हैं. आइए, एक आसान उदाहरण से इसे समझें.
सबसे पहले, पेज को लगातार फिर से पेंट करने वाले मोड को चालू करें:
चालू करने के बाद, आपके Android डिवाइस के ऊपर दाएं कोने में एक ग्राफ़ दिखेगा. ग्राफ़ का x-ऐक्सिस समय को दिखाता है, जो फ़्रेम में बंटा होता है. ग्राफ़ का y-ऐक्सिस, मिलीसेकंड में पेंट समय को मापता है. यह देखा जा सकता है कि मेरे डिवाइस पर, पेज को पेंट करने में 14 मिलीसेकंड लगते हैं. इस्तेमाल की गई जीपीयू मेमोरी के साथ, पेंट करने में लगने वाला कम से कम और ज़्यादा से ज़्यादा समय भी दिखाया जाता है.
प्रयोग के तौर पर, मैंने चुने गए एलिमेंट की स्टाइल को display: none पर सेट किया है. आइए देखते हैं कि अभी पेज को पेंट करना
कितना महंगा है.
पेंट करने में लगने वाला समय, हर फ़्रेम के लिए करीब 14 मिलीसेकंड से लेकर प्रति फ़्रेम 4 मिलीसेकंड तक हो गया. दूसरे शब्दों में, उस एलिमेंट को बनाने में करीब 10 मिलीसेकंड लगे. एलिमेंट को चालू और बंद करने की प्रोसेस के साथ-साथ स्टाइल को चालू और बंद करके, अपने पेज के महंगे हिस्सों को तुरंत छोटा किया जा सकता है. याद रखें, जल्दी पेंट करने का मतलब है कम जैंक, लंबी बैटरी, और उपयोगकर्ताओं से ज़्यादा जुड़ाव. अगर आपको इसके बारे में ज़्यादा जानकारी चाहिए, तो लगातार पेज रीपेंट मोड से जुड़े इस शानदार लेख को ज़रूर पढ़ें.
बेहतर सुविधाएं
ट्रेसिंग के बारे में
डेस्कटॉप Chrome में उपलब्ध कई बेहतर डेवलपर सुविधाएं Android Chrome में भी उपलब्ध हैं. उदाहरण के लिए, about:gpu-internals, about:appcache-internals और about:net-internals उपलब्ध हैं. किसी पेचीदा समस्या की जांच करते समय, कभी-कभी आपको ज़्यादा डेटा की ज़रूरत होती है, ताकि समस्या की वजह का पता लगाया जा सके. डेस्कटॉप पर, हो सकता है कि आप about:tracing का इस्तेमाल कर रहे हों. अगर आपको about:tracing के बारे में पहले से जानकारी नहीं है, तो यह वीडियो देखें जिसमें about:tracing प्रोफ़ाइलिंग टूल को इस्तेमाल करने और इसके बारे में ज़्यादा जानने के बारे में बताया गया है. Android Chrome से उसी डेटा को कैप्चर किया जा सकता है. शुरू करने के लिए यह तरीका अपनाएं:
- adb_trace.py डाउनलोड करें
- कमांड लाइन से adb_trace.py चलाएं
- Android पर Chrome इस्तेमाल करें
- कमांड लाइन पर Enter दबाएं और adb_trace.py स्क्रिप्ट बंद करें.
adb_trace.py के पूरा होने के बाद आपके पास एक JSON फ़ाइल होगी, जिसे आप डेस्कटॉप Chrome के about:tracing में लोड कर सकते हैं.
शुरुआती गाइड
अब जबकि हमने यह समीक्षा कर ली है कि रिमोट Chrome DevTools क्या कर सकता है, तो आइए जानते हैं कि रिमोट डीबगिंग सेशन में कैसे शुरुआत की जाए. अगर आपने पहले उनका इस्तेमाल नहीं किया है,तो शुरू करने के तरीके के बारे में ज़्यादा जानकारी देने वाले निर्देश पढ़ें. अगर आपने पहले भी इनका इस्तेमाल किया है, लेकिन बिलकुल भूल गए हैं कि इन्हें कैसे इस्तेमाल करना है, तो हमने यहां इसके बारे में छोटे से निर्देश दिए हैं.
1. Android SDK टूल इंस्टॉल करें
वेब के लिए डेवलप करते समय, आपको लग सकता है कि Android SDK टूल इंस्टॉल क्यों करना पड़ रहा है. SDK टूल में adb (Android डीबग ब्रिज) शामिल है. यह ज़रूरी है कि डेस्कटॉप Chrome आपके Android डिवाइस से कनेक्ट हो. Chrome सीधे Android डिवाइस के साथ बात नहीं करता है, बल्कि यह adb के ज़रिए कम्यूनिकेशन को रूट करता है.
2. अपने डिवाइस पर यूएसबी डीबग करने की सुविधा चालू करें
यूएसबी डीबग करने की सुविधा को चालू करने का विकल्प, Android की सेटिंग में मिल सकता है. इसे चालू करें.
3. डिवाइस से कनेक्ट करें
अगर आपने अब तक अपने Android डिवाइस को यूएसबी के ज़रिए डेस्कटॉप से कनेक्ट नहीं किया है, तो अब उसे कनेक्ट करें. अगर आपने पहली बार यूएसबी डीबग करने का इस्तेमाल किया है, तो आपको यह प्रॉम्प्ट दिखेगा:
अगर अक्सर रिमोट डीबग सेशन किए जाते हैं, तो मेरा सुझाव है कि 'इस कंप्यूटर से हमेशा अनुमति दें' चुनें.
4. पुष्टि करें कि आपका डिवाइस ठीक से कनेक्ट है
अपने कमांड प्रॉम्प्ट से adb डिवाइस चलाएं. आपको अपना डिवाइस, सूची में दिखेगा.
5. Chrome में यूएसबी डीबग करने की सुविधा चालू करें
सेटिंग > बेहतर > DevTools खोलें और यूएसबी वेब डीबग करने की सुविधा चालू करें विकल्प को चुनें. इसका तरीका यहां दिखाया गया है:
6. आपके Android डिवाइस से DevTools कनेक्शन बनाना
नीचे दिए गए निर्देश का इस्तेमाल करें:
adb forward tcp:9222 localabstract:chrome_devtools_remote
adb के ज़रिए आपकी डेस्कटॉप मशीन और आपके Android डिवाइस के बीच पुल बनाता है. अगर आपको इसमें कोई समस्या आती है, तो सेटअप करने के बारे में ज़्यादा जानकारी देने वाले निर्देश यहां पढ़ें.
7. पुष्टि की जा रही है कि आप इस्तेमाल करने के लिए तैयार हैं
अपने डेस्कटॉप पर Chrome खोलकर और http://localhost:9222 पर जाकर, पुष्टि करें कि आपका डिवाइस ठीक से कनेक्ट है. अगर आपको 404, कोई दूसरी गड़बड़ी मिलती है या आपको कुछ ऐसा नहीं दिखता है:
सेटअप के बारे में ज़्यादा जानकारी देने के निर्देश यहां पढ़ें.
नतीजा
मोबाइल उपयोगकर्ता अक्सर जल्दी में होते हैं और वे आपके पेज से वह ज़रूरी जानकारी तुरंत पाना चाहते हैं. मोबाइल साइट बिल्डर के तौर पर, यह पक्का करना आपकी ज़िम्मेदारी है कि पेज तेज़ी से लोड हो और मोबाइल पर अच्छा परफ़ॉर्म करे. अगर ऐसा नहीं होता है, तो उपयोगकर्ता का जुड़ाव कम हो जाएगा. रिमोट Chrome DevTools, अपने डेस्कटॉप वर्शन की तरह ही काम करते हैं. इसका यूज़र इंटरफ़ेस (यूआई) इतना मिलता-जुलता है कि आपको टूल का नया सेट सीखने की ज़रूरत नहीं है. दूसरे शब्दों में, आपका वर्क फ़्लो पूरा होता है. याद रखें, Facebook से परफ़ॉर्मेंस से जुड़ी समस्याओं का पता नहीं चलता और न ही आपकी साइट भी. अच्छा परफ़ॉर्म करने वाली साइटों पर ज़्यादा यूज़र ऐक्टिविटी होती है.