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