परिचय
आज के समय में, अपनी साइट के लिए सबसे ज़रूरी बात यह पक्का करना है कि फ़ोन या टैबलेट से साइट पर आने पर, वह अच्छी तरह से काम करे. आगे पढ़ें और जानें कि Chrome DevTools और Android डिवाइस का इस्तेमाल करके, मोबाइल ब्राउज़र के लिए अपनी साइट को कैसे ऑप्टिमाइज़ करें.
मोबाइल वेब के लिए ऑप्टिमाइज़ करना इतना ज़रूरी क्यों है?
परफ़ॉर्मेंस
2G और 3G से 4G पर माइग्रेट करने के दौरान, मोबाइल डिवाइसों में तेज़ सीपीयू, ज़्यादा रैम, तेज़ जीपीयू, और तेज़ नेटवर्क ऐक्सेस की सुविधा मिल रही है. मोबाइल डिवाइसों में लगातार बदलाव हो रहे हैं. हालांकि, इनकी तुलना में हमारे कंप्यूटर ज़्यादा बेहतर हैं. आसान शब्दों में कहें, तो नेटवर्क के रिसॉर्स लोड होने में ज़्यादा समय लगता है, इमेज को अनपैक करने में ज़्यादा समय लगता है, पेज को पेंट करने में ज़्यादा समय लगता है, और स्क्रिप्ट चलाने में ज़्यादा समय लगता है. यह मान लिया जा सकता है कि किसी मोबाइल डिवाइस पर आपका पेज 5 से 10 गुना धीमा चलता है.
बैटरी
मोबाइल डिवाइसों को सिर्फ़ बैटरी से चार्ज किया जाता है. मोबाइल डिवाइस के उपयोगकर्ता चाहते हैं कि उनकी डिवाइस की बैटरी ज़्यादा से ज़्यादा समय तक चले. सही तरीके से काम न करने वाली साइट, बैटरी को ज़रूरत से ज़्यादा तेज़ी से खर्च करेगी. बैटरी की खपत कम करने के लिए, नेटवर्क ट्रैफ़िक और पेंट की संख्या कम करें. किसी संसाधन को फ़ेच करने के लिए, वाई-फ़ाई या सेल रेडियो चालू होना चाहिए. इससे बैटरी खर्च होती है. जब ब्राउज़र किसी एलिमेंट को पेंट करता है, तो सीपीयू और जीपीयू का इस्तेमाल बढ़ जाता है. इससे बैटरी भी तेज़ी से खर्च होती है.
जुड़ाव
परफ़ॉर्मेंस की मदद से, वह मेट्रिक बढ़ाई जा सकती है जो आपके लिए सबसे अहम है. Facebook पर, स्क्रीन पर ऊपर से नीचे की ओर स्क्रोल करने की सुविधा का बहुत ज़्यादा इस्तेमाल किया जाता है. A/B टेस्ट में, हमने स्क्रीन पर 60fps से 30fps तक स्क्रॉल करने की स्पीड को धीमा किया. जुड़ाव छोटा किया गया. हमने कहा ठीक है, इसलिए स्क्रोल करना ज़रूरी है.
Edge Conference में 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 पर की गई खोज की वजह से मिले नेटवर्क ट्रैफ़िक की जानकारी दी गई है. आपकी साइट के नेटवर्क अनुरोधों पर नज़र रखें और उन्हें कम करने के तरीके खोजें. अगर आपकी साइट, सर्वर से पोलिंग के अनुरोध करती है, तो आपको उपयोगकर्ता की गतिविधि पर ध्यान देना चाहिए. साथ ही, जब उपयोगकर्ता कुछ समय तक साइट पर न हो, तो पोलिंग से बचना चाहिए. नेटवर्क टूल की मदद से आप रॉ एचटीटीपी हेडर देख सकते हैं. इससे उस स्थिति में मदद मिलती है, जब मोबाइल नेटवर्क उनमें बदलाव करते हों.
पेंट टाइम को ऑप्टिमाइज़ किया जा रहा है
मोबाइल वेब ब्राउज़र की सबसे बड़ी दिक्कतों में से एक है, अपने पेज को पेंट करना. पेंटिंग, पेज पर तय की गई स्टाइल के साथ एलिमेंट बनाने की प्रोसेस है. जब किसी एलिमेंट को पेंट करने में ज़्यादा समय लगता है, तो पूरे पेज को पेंट करने में भी ज़्यादा समय लगता है. Chrome, किसी ऑफ़स्क्रीन बफ़र में पहले से पेंट किए गए एलिमेंट को कैश मेमोरी में सेव करने की कोशिश करता है. हालांकि, मोबाइल पर जीपीयू रैम की उपलब्धता सीमित होती है. इसलिए, स्क्रीन से बाहर कैश मेमोरी में सेव किए जा सकने वाले एलिमेंट की संख्या भी सीमित होती है. इसका असर यह होता है कि ज़्यादा पेन्ट होते हैं और हर पेन्ट, डेस्कटॉप की तुलना में धीमा होता है. रिस्पॉन्सिव स्क्रोलिंग के लिए, आपको पेंट का समय कम से कम करना होगा.
Chrome 25 में, पेज को लगातार फिर से रंगने का मोड शामिल है. पेज को लगातार फिर से पेंट करने वाले मोड में, पेंट किए गए एलिमेंट कभी कैश मेमोरी में सेव नहीं किए जाते. इसके बजाय, हर फ़्रेम में सभी एलिमेंट को पेंट किया जाता है. सभी एलिमेंट को हर फ़्रेम पर पेंट करके पेंट करने के समय का A/B टेस्ट किया जा सकता है. एलिमेंट को चालू और बंद करके और स्टाइल को चालू और बंद करके टॉगल किया जा सकता है. हालांकि, यह प्रोसेस मैन्युअल तरीके से की गई है, लेकिन यह पता लगाने के लिए एक बेहतरीन टूल है कि आपके पेज पर हर एलिमेंट को पेंट करने की सुविधा कितनी महंगी है. ऑप्टिमाइज़ेशन क्लब का पहला नियम बेसलाइन हासिल करने के लिए ऑप्टिमाइज़ करना है. आइए, एक आसान उदाहरण से इसे समझते हैं.
सबसे पहले, पेज को लगातार फिर से रंगने का मोड चालू करें:
चालू करने के बाद, आपके Android डिवाइस के ऊपरी दाएं कोने में एक ग्राफ़ दिखेगा. ग्राफ़ का एक्स-ऐक्सिस, समय होता है, जिसे फ़्रेम में बांटा जाता है. ग्राफ़ के 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 Debug Bridge) शामिल है. डेस्कटॉप पर 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, असल में अपने डेस्कटॉप वर्शन की तरह काम करता है. यूज़र इंटरफ़ेस (यूआई) काफ़ी हद तक एक जैसा है. इसलिए, आपको टूल के नए सेट को सीखने की ज़रूरत नहीं है. दूसरे शब्दों में, आपका वर्कफ़्लो जारी रहता है. याद रखें कि Facebook और आपकी साइट, दोनों की परफ़ॉर्मेंस में समस्याएं आ सकती हैं. अच्छा परफ़ॉर्म करने वाली साइटों को ज़्यादा यूज़र ऐक्टिविटी मिलती है.