क्यों और क्या?
आपने शायद उन सभी अच्छी चीज़ों के बारे में सुना होगा जो प्रोग्रेसिव वेब ऐप्लिकेशन की तकनीक से आपकी साइट के लिए होती हैं. आपको सीधे तौर पर PWA की सुविधाएं जोड़ने का मन कर सकता है. ऐसा हो सकता है, लेकिन अगर आप पहले 'PWA के लिए तैयार' हों, तो आपको और बेहतर अनुभव मिलेगा.
PWA का इस्तेमाल, JavaScript को ब्लॉक करने या फूली हुई इमेज जैसी समस्याओं को ठीक करने के लिए नहीं किया जाएगा. PWA के लिए मज़बूत बुनियादी होना ज़रूरी है.
वेबसाइट की स्थिति देखने का तरीका क्या है? पहला कदम है साइट का ऑडिट: अच्छी तरह से काम करने वाली चीज़ों की निष्पक्ष समीक्षा. साथ ही, इसमें कहां (और कैसे) सुधार किया जा सकता है.
अपनी साइट या ऐप्लिकेशन को ऑडिट करने से आपको लचीला और बेहतर प्रदर्शन करने वाला अनुभव बनाने में मदद मिलेगी. साथ ही, इससे आपको कम से कम साइन-ऑफ़ करके भी आसानी से हासिल की जा सकने वाली परफ़ॉर्मेंस को हाइलाइट करने में मदद मिलेगी. ऑडिट से आपको डेटा पर आधारित डेवलपमेंट के लिए बेसलाइन भी मिलती है. क्या किसी बदलाव से चीज़ें बेहतर हुई हैं? आपकी साइट और प्रतिस्पर्धियों की तुलना में आपकी साइट कैसी है? आपको मेहनत को प्राथमिकता देने के लिए मेट्रिक मिलती हैं. साथ ही, सुधार करने के बाद इसकी तारीफ़ करने के लिए ठोस सबूत मिलते हैं.
अगर आपके पास सिर्फ़ 5 मिनट हैं...
अपने होम पेज पर Lighthouse चलाएं और रिपोर्ट का डेटा सेव करें. आपको परफ़ॉर्मेंस, सुलभता, सुरक्षा, और एसईओ में सुधार करने के लिए, आंकड़ों के आधार पर तैयार की गई बेसलाइन और कामों की सूची मिलती है.
अगर आपके पास सिर्फ़ 30 मिनट हैं...
हालांकि, शुरुआत करने के लिए Lighthouse अब भी सबसे अच्छा विकल्प है, लेकिन कुछ समय बाद, दूसरे टूल से भी नतीजे रिकॉर्ड किए जा सकते हैं:
- Chrome DevTools सुरक्षा पैनल: एचटीटीपीएस का इस्तेमाल.
- Chrome DevTools नेटवर्क पैनल: लोड होने में लगने वाला समय; एचटीएमएल, सीएसएस, JavaScript, इमेज, फ़ॉन्ट, और अन्य फ़ाइलों के लिए संसाधन साइज़ और अनुरोधों की संख्या.
- Chrome टास्क मैनेजर: अगर आपकी साइट लगातार काफ़ी ज़्यादा सीपीयू या दूसरे ऐप्लिकेशन के मुकाबले ज़्यादा मेमोरी का इस्तेमाल करती है, तो आपको मेमोरी लीक होने, टास्क चलाने या रिसॉर्स लोड होने से जुड़ी समस्याएं ठीक करनी पड़ सकती हैं. पक्का करें कि आपने अपनी साइट को उन डिवाइसों पर टेस्ट किया हो जो आपके उपयोगकर्ताओं को दिखाते हैं.
- WebPagetest: इसकी मदद से अलग-अलग जगहों और कनेक्शन के टाइप, कैश मेमोरी, फ़र्स्ट बाइट का समय, और सीडीएन के इस्तेमाल के लिए परफ़ॉर्मेंस की जानकारी दी जाती है.
- Pagespeed Insights: इसकी मदद से परफ़ॉर्मेंस, डेटा की लागत, और संसाधन के इस्तेमाल की जानकारी लोड होती है. इसमें, Chrome पर उपयोगकर्ता अनुभव की रिपोर्ट का वह डेटा भी शामिल होता है जिसमें उपयोगकर्ताओं की परफ़ॉर्मेंस के आंकड़ों को हाइलाइट किया जाता है.
- स्पीड स्कोरकार्ड और इंपैक्ट कैलकुलेटर: मिलते-जुलते ऐप्लिकेशन के साथ साइट की स्पीड की तुलना करें और साइट की स्पीड को बेहतर बनाने से कमाई की संभावना का अनुमान लगाएं.
पक्का करें कि आप अपनी वेबसाइट को पहली बार देखने वाले उपयोगकर्ता के तौर पर देखते हैं. साइट की गुप्त (निजी) विंडो खोलें या ब्राउज़र टूल का इस्तेमाल करके कैश मेमोरी में सेव करें और डिवाइस का स्टोरेज खाली करें. इससे यह पक्का होता है कि हर ऐसेट को लोकल कैश मेमोरी से नहीं, बल्कि नेटवर्क से लिया गया है. इससे आपको पहले लोड की परफ़ॉर्मेंस की सटीक जानकारी मिलती है.
असल दुनिया में होने वाले टेस्ट से कुछ बेहतर नहीं होता. अपनी साइट को उन ही डिवाइसों और कनेक्टिविटी के साथ आज़माएं जिन पर आपके उपयोगकर्ता काम करते हैं. साथ ही, अपने निजी अनुभव का रिकॉर्ड रखें.
अगर आपको तरह-तरह के टूल परेशान करने लगते हैं...
हमारी गाइड देखें: स्पीड टूल के बारे में कैसे सोचें.
अगर कुछ और नहीं है, तो Lighthouse का इस्तेमाल करके, यह पता लगाएं:
- एचटीटीपीएस: हर साइट को सभी ऐसेट को एचटीटीपीएस पर डिलीवर करना चाहिए.
- सर्वर की सेटिंग: आपके वेब सर्वर या सीडीएन को सही तरीके से कंप्रेस करने का इस्तेमाल करना चाहिए, एचटीटीपी/2 इस्तेमाल करना चाहिए, और सही हेडर शामिल करना चाहिए, ताकि आपके ब्राउज़र में रिसॉर्स को कैश मेमोरी में सेव किया जा सके.
- ऐसे स्क्रिप्ट एलिमेंट जिन्हें पेज पर सबसे नीचे ले जाया जा सकता है और/या जिन्हें एसिंक्रोनस या डेफ़र एट्रिब्यूट दिया जा सकता है.
- JavaScript और लाइब्रेरी, जिन्हें हटाया जा सकता है.
- इस्तेमाल नहीं किया गया सीएसएस और इस्तेमाल नहीं किया गया JavaScript.
- ज़्यादा कंप्रेशन वाले या छोटे पिक्सल डाइमेंशन के साथ सेव की जा सकने वाली इमेज.
- ऐसी इमेज फ़ाइलें जो किसी दूसरे फ़ॉर्मैट का इस्तेमाल करके छोटी सेव की जाएंगी, उदाहरण के लिए, PNG के तौर पर सेव की गई फ़ोटो.
दर्शक, हिस्सेदार, संदर्भ
रीफ़ैक्टरिंग की प्राथमिकताएं आपके दर्शकों, कॉन्टेंट, और काम करने के तरीके पर निर्भर करती हैं. आपकी साइट पर कौन आता है? वे इसका इस्तेमाल क्यों और कैसे करते हैं? आपका परफ़ॉर्मेंस बजट क्या है? अगर आपको इन सवालों के जवाब नहीं पता हैं, तो हमारे PWA ट्रेनिंग संसाधनों से ज़रूरी जानकारी इकट्ठा करने की कोशिश करें: आपके दर्शक, आपका कॉन्टेंट, और अपने सभी उपयोगकर्ताओं के लिए डिज़ाइन करें.
आपके हिस्सेदार कौन हैं और उनकी प्राथमिकताएं क्या हैं? इससे ऑडिट डेटा को स्ट्रक्चर करने, प्रज़ेंट करने, और शेयर करने के तरीके पर असर पड़ेगा.
अगर पूरी साइट का ऑडिट नहीं हो पा रहा है, तो पेज के आंकड़ों की जांच करके पता लगाएं कि आपको कहां फ़ोकस करना चाहिए. ज़्यादा बाउंस रेट, पेज पर बिताया गया समय कम होना, और पेज से बाहर निकलते समय अचानक दिखने वाले पेज इस बात के अच्छे संकेत हो सकते हैं कि कहां से शुरू करें. इसी तरह, कारोबार से जुड़ी मेट्रिक, जैसे कि होस्टिंग की लागत, विज्ञापन पर क्लिक, और कन्वर्ज़न. हिस्सेदारों से खास जानकारी पाएं कि उनके लिए कौनसा डेटा अहम है.
टेस्ट करें, रिकॉर्ड करें, ठीक करें, और दोहराएं
कोई भी बदलाव करने से पहले, अपनी साइट की स्थिति रिकॉर्ड करें. इससे, समस्याओं का पता लगाया जा सकेगा. साथ ही, यह भी तय किया जा सकेगा कि साइट पर कितने सुधार किए जा सकते हैं या नहीं किया जा सकता. इससे आपको डेवलेपमेंट की कोशिशों को सही साबित करने और उन्हें इनाम देने के लिए डेटा मिलता है.
अपनी साइट में एक से ज़्यादा पेज टाइप का टेस्ट करना न भूलें. ऐसा सिर्फ़ होम पेज पर ही नहीं, बल्कि साइट में भी किया जा सकता है. एक पेज वाले ऐप्लिकेशन के लिए, पहली बार लोड होने के अनुभव के साथ-साथ अलग-अलग कॉम्पोनेंट, रूट, और UX फ़्लो की जांच करें.