परिचय
आज के समय में, अपनी साइट के लिए सबसे ज़रूरी काम यह किया जा सकता है कि फ़ोन या टैबलेट से विज़िट करने पर, वह अच्छी तरह से काम करे. Chrome DevTools और Android डिवाइस का इस्तेमाल करके, मोबाइल ब्राउज़र के लिए अपनी साइट को ऑप्टिमाइज़ करने का तरीका जानें.
मोबाइल वेब के लिए ऑप्टिमाइज़ करना इतना ज़रूरी क्यों है?
परफ़ॉर्मेंस
मोबाइल डिवाइसों में अब तेज़ सीपीयू, ज़्यादा रैम, तेज़ जीपीयू, और तेज़ नेटवर्क ऐक्सेस मिल रहा है. ऐसा इसलिए, क्योंकि हम 2G और 3G से 4G पर स्विच कर रहे हैं. भले ही मोबाइल डिवाइसों में काफ़ी सुधार हुआ है, लेकिन कंप्यूटर की तुलना में इनकी क्षमता कम होती है. आसान शब्दों में कहें, तो नेटवर्क रिसॉर्स को लोड होने में ज़्यादा समय लगता है. साथ ही, इमेज को अनपैक करने, पेज को पेंट करने, और स्क्रिप्ट को लागू करने में ज़्यादा समय लगता है. यह मान लेना सही होगा कि आपका पेज, मोबाइल डिवाइस पर 5 से 10 गुना धीमी रफ़्तार से चलता है.
बैटरी
मोबाइल डिवाइस, सिर्फ़ बैटरी से चलते हैं. मोबाइल डिवाइस इस्तेमाल करने वाले लोग चाहते हैं कि बैटरी ज़्यादा से ज़्यादा समय तक चले. एक सब-ऑप्टिमल साइट, बैटरी को ज़रूरत से ज़्यादा तेज़ी से खत्म कर देगी. बैटरी की खपत कम करने के लिए, नेटवर्क ट्रैफ़िक और पेंट को कम करें. किसी संसाधन को फ़ेच करते समय, वाई-फ़ाई या सेल रेडियो चालू होना चाहिए. इससे बैटरी खर्च होती है. जब ब्राउज़र किसी एलिमेंट को पेंट करता है, तो सीपीयू और जीपीयू का इस्तेमाल बढ़ जाता है. इससे बैटरी भी खर्च होती है.
जुड़ाव
परफ़ॉर्मेंस का मकसद, आपके लिए सबसे अहम मेट्रिक को बढ़ाना है. Facebook में, हम स्क्रोलिंग पर ध्यान देते हैं. एक A/B टेस्ट में, हमने स्क्रोल करने की स्पीड को 60 एफ़पीएस से घटाकर 30 एफ़पीएस कर दिया. यूज़र ऐक्टिविटी सेक्शन को छोटा किया गया. हमने कहा, ठीक है, इसलिए स्क्रोल करना ज़रूरी है.
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 मिलीसेकंड लगे. एलिमेंट और स्टाइल को टॉगल करके, पेज के उन हिस्सों को तुरंत पहचाना जा सकता है जिन्हें लोड होने में ज़्यादा समय लगता है. याद रखें कि तेज़ी से पेंट होने का मतलब है कि कम जैंक, ज़्यादा बैटरी, और आपके उपयोगकर्ताओं की ज़्यादा दिलचस्पी. जब आप ज़्यादा जानकारी पाने के लिए तैयार हों, तो कंटीन्यूअस पेज रीपेंट मोड के बारे में यह शानदार लेख ज़रूर पढ़ें.
बेहतर सुविधाएं
about:tracing
डेस्कटॉप 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 इंस्टॉल करने की क्या ज़रूरत है. एसडीके में, adb (Android डीबग ब्रिज) शामिल है. डेस्कटॉप पर Chrome को आपके Android डिवाइस से कनेक्ट होना चाहिए. Chrome, Android डिवाइस से सीधे तौर पर कम्यूनिकेट नहीं करता है. इसके बजाय, यह adb के ज़रिए कम्यूनिकेट करता है.
2. अपने डिवाइस पर यूएसबी डीबगिंग की सुविधा चालू करना
यूएसबी डीबगिंग की सुविधा चालू करने का विकल्प, Android की सेटिंग में जाकर ढूंढा जा सकता है. इसे चालू करें.
3. डिवाइस से कनेक्ट करें
अगर आपने पहले से ऐसा नहीं किया है, तो अपने Android डिवाइस को यूएसबी के ज़रिए डेस्कटॉप से कनेक्ट करें. अगर आपने यूएसबी के ज़रिए डीबग करने की सुविधा का इस्तेमाल पहली बार किया है, तो आपको यह प्रॉम्प्ट दिखेगा:
अगर आपको अक्सर रिमोट डीबग सेशन करने हैं, तो हमारा सुझाव है कि आप ‘इस कंप्यूटर के लिए हमेशा अनुमति दें’ को चुनें.
4. पुष्टि करना कि आपका डिवाइस सही तरीके से कनेक्ट है
अपने कमांड प्रॉम्प्ट से adb devices चलाएं. आपको सूची में अपना डिवाइस दिखेगा.
5. Chrome में यूएसबी के ज़रिए डीबग करने की सुविधा चालू करना
सेटिंग > ऐडवांस > DevTools खोलें और यूएसबी वेब डीबगिंग चालू करें विकल्प को चुनें. इसके लिए, यहां दिया गया तरीका अपनाएं:
6. अपने Android डिवाइस से DevTools कनेक्शन बनाना
यह कमांड चलाएं:
adb forward tcp:9222 localabstract:chrome_devtools_remote
यह adb की मदद से, आपके डेस्कटॉप मशीन और Android डिवाइस के बीच एक ब्रिज बनाता है. अगर आपको यहां तक पहुंचने में कोई समस्या आती है, तो सेटअप करने के बारे में ज़्यादा जानकारी देने वाले निर्देश यहां पढ़ें.
7. यह पुष्टि की जा रही है कि आपके पास ज़रूरी अनुमतियां हैं
यह पुष्टि करें कि आपका डिवाइस सही तरीके से कनेक्ट है. इसके लिए, अपने डेस्कटॉप पर Chrome खोलें और http://localhost:9222 पर जाएं. अगर आपको 404 या कोई अन्य गड़बड़ी मिलती है या आपको यहां दी गई जानकारी जैसा कुछ नहीं दिखता है, तो:
सेटअप करने के बारे में ज़्यादा जानकारी पाने के लिए, यहां जाएं.
नतीजा
मोबाइल उपयोगकर्ताओं को अक्सर जल्दी होती है और उन्हें आपके पेज से तुरंत ज़रूरी जानकारी चाहिए होती है. मोबाइल साइट बनाने वाले के तौर पर, यह आपकी ज़िम्मेदारी है कि पेज तेज़ी से लोड हो और मोबाइल पर अच्छा परफ़ॉर्म करे. अगर ऐसा नहीं होता है, तो उपयोगकर्ता की दिलचस्पी कम हो जाएगी. रिमोट Chrome DevTools, डेस्कटॉप पर मौजूद Chrome DevTools की तरह ही काम करते हैं. इसका यूज़र इंटरफ़ेस (यूआई) काफ़ी हद तक एक जैसा है. इसलिए, आपको टूल का नया सेट सीखने की ज़रूरत नहीं है. दूसरे शब्दों में, आपका वर्कफ़्लो जारी रहता है. याद रखें, Facebook को परफ़ॉर्मेंस से जुड़ी समस्याएं आ सकती हैं और आपकी साइट को भी. अच्छा परफ़ॉर्म करने वाली साइटों पर, उपयोगकर्ता ज़्यादा समय बिताते हैं.