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