परफ़ॉर्मेंस मेज़र करने के लिए टूल इस्तेमाल करें

Sam Dutton

कम डेटा लागत के साथ बेहतर परफ़ॉर्म करने वाली और रिज़िलिएंट साइट बनाने के कई मुख्य लक्ष्य हैं.

हर लक्ष्य के लिए, आपको ऑडिट की ज़रूरत होगी.

मकसद	क्यों?	क्या टेस्ट करना है?
निजता, सुरक्षा, और डेटा की अखंडता को पक्का करना. साथ ही, एपीआई के बेहतर इस्तेमाल की सुविधा चालू करना	एचटीटीपीएस का इस्तेमाल करना क्यों ज़रूरी है	साइट के सभी पेजों/रास्तों और ऐसेट के लिए एचटीटीपीएस लागू किया गया हो.
लोड करने की परफ़ॉर्मेंस को बेहतर बनाना	53% उपयोगकर्ता ऐसी साइटों को छोड़ देते हैं जिन्हें लोड होने में तीन सेकंड से ज़्यादा लगते हैं	JavaScript और सीएसएस, जिन्हें एसिंक्रोनस तौर पर या बाद में लोड किया जा सकता है. इंटरैक्टिव होने में लगने वाले समय और पेलोड साइज़ के लिए लक्ष्य सेट करें: उदाहरण के लिए, 3G पर टीटीआई. परफ़ॉर्मेंस बजट सेट करें.
पेज का साइज़ कम करना	• सीमित डेटा वाले प्लान का इस्तेमाल करने वाले उपयोगकर्ताओं के लिए, डेटा की लागत कम करना • वेब ऐप्लिकेशन के स्टोरेज की ज़रूरतों को कम करना — यह खास तौर पर, कम स्पेसिफ़िकेशन वाले डिवाइसों का इस्तेमाल करने वाले उपयोगकर्ताओं के लिए ज़रूरी है • होस्टिंग और कॉन्टेंट दिखाने की लागत कम करना • कॉन्टेंट दिखाने की परफ़ॉर्मेंस, भरोसेमंदता, और रिज़िलिएंस को बेहतर बनाना	पेज के साइज़ का बजट सेट करें: उदाहरण के लिए, शुरुआती लोड 400 केबी से कम होना चाहिए. ज़्यादा JavaScript का इस्तेमाल न करें. फ़ाइल के साइज़ की जांच करके, बड़ी इमेज, मीडिया, एचटीएमएल, सीएसएस, और JavaScript ढूंढें. ऐसी इमेज ढूंढें जिन्हें लेज़ी लोड किया जा सकता है. साथ ही, कवरेज टूल की मदद से, इस्तेमाल न किए गए कोड की जांच करें.
संसाधन के अनुरोधों को कम करना	• लोड होने में लगने वाले समय से जुड़ी समस्याओं को कम करना • विज्ञापन दिखाने की लागत कम करना • विज्ञापन दिखाने की परफ़ॉर्मेंस, भरोसेमंदता, और रिज़िलिएंस को बेहतर बनाना	किसी भी तरह के संसाधन के लिए, ज़रूरत से ज़्यादा या ग़ैर-ज़रूरी अनुरोध देखें. उदाहरण के लिए: बार-बार लोड होने वाली फ़ाइलें, कई वर्शन में लोड होने वाला JavaScript, कभी इस्तेमाल न की गई सीएसएस, कभी न देखी गई इमेज (या लेज़ी लोड की जा सकने वाली इमेज).
स्‍मृति उपयोग अनुकूलित करें	मेमोरी, नई समस्या बन सकती है. खास तौर पर, मोबाइल डिवाइसों पर	Chrome टास्क मैनेजर का इस्तेमाल करके, होम पेज लोड करने और साइट की अन्य सुविधाओं का इस्तेमाल करने के दौरान, अपनी साइट की तुलना दूसरी साइटों से करें. इससे आपको पता चलेगा कि आपकी साइट कितनी ज़्यादा या कम मेमोरी का इस्तेमाल करती है.
सीपीयू लोड कम करना	मोबाइल डिवाइसों में सीपीयू की संख्या सीमित होती है. खास तौर पर, कम स्पेसिफ़िकेशन वाले डिवाइसों में	ज़्यादा JavaScript का इस्तेमाल न करें. कवरेज टूल की मदद से, इस्तेमाल न किए गए JavaScript और सीएसएस ढूंढें. ज़्यादा डीओएम साइज़ और पहली बार लोड होने पर ग़ैर-ज़रूरी स्क्रिप्ट चलने की जांच करें. एक से ज़्यादा वर्शन में लोड की गई JavaScript या ऐसी लाइब्रेरी ढूंढें जिनसे थोड़ा बदलाव करके बचा जा सकता है.

वेबसाइटों की ऑडिटिंग के लिए, कई तरह के टूल और तकनीकें उपलब्ध हैं:

• सिस्‍टम टूल
• ब्राउज़र में पहले से मौजूद टूल
• ब्राउज़र एक्सटेंशन
• ऑनलाइन टेस्ट के लिए आवेदन
• एम्युलेटर टूल
• Analytics
• सर्वर और कारोबार के सिस्टम से मिली मेट्रिक
• स्क्रीन और वीडियो रिकॉर्डिंग
• मैन्युअल तरीके से जांच करने की सुविधा

यहां आपको पता चलेगा कि हर तरह के ऑडिट के लिए कौनसा तरीका सही है.

ध्यान दें: ज़्यादातर वेब पेजों के लिए, इमेज सबसे ज़्यादा जगह और सबसे ज़्यादा अनुरोध लेती हैं. कनेक्टिविटी खराब होने पर, इंतज़ार का समय बढ़ जाता है. इसलिए, वेब को मोबाइल पर उपलब्ध कराने के साथ-साथ, इमेज फ़ाइल के ज़्यादा अनुरोधों की समस्या बढ़ रही है. इमेज भी बैटरी खर्च करती हैं: ज़्यादा इमेज के अनुरोध, ज़्यादा रेडियो का इस्तेमाल, और ज़्यादा बैटरी खर्च होना. सिर्फ़ इमेज को रेंडर करने के लिए भी ज़्यादा बैटरी खर्च होती है – और यह इमेज के साइज़ और संख्या के हिसाब से होता है. मेमोरी के लिए भी यही बात लागू होती है: पिक्सल डाइमेंशन में थोड़ी सी बढ़ोतरी करने पर, मेमोरी के इस्तेमाल में काफ़ी बढ़ोतरी होती है. मोबाइल पर इमेज का इस्तेमाल करने पर, खास तौर पर कम स्पेसिफ़िकेशन वाले डिवाइसों पर, मेमोरी की समस्या हो सकती है. ज़्यादा साइज़ वाली इमेज, सीमित डेटा प्लान का इस्तेमाल करने वाले लोगों के लिए भी समस्या पैदा करती हैं. ज़रूरत से ज़्यादा इमेज हटाएं! अगर इन्हें हटाया नहीं जा सकता, तो इन्हें ऑप्टिमाइज़ करें: कंप्रेस करने की सुविधा को ज़्यादा से ज़्यादा बढ़ाएं, पिक्सल डाइमेंशन कम करें, और उस फ़ॉर्मैट का इस्तेमाल करें जिससे आपको सबसे छोटा फ़ाइल साइज़ मिलता हो. बैनर और बैकग्राउंड जैसी 'हीरो इमेज' को ऑप्टिमाइज़ करना आसान है.

संसाधन के अनुरोध रिकॉर्ड करें: संख्या, साइज़, टाइप, और समय

किसी साइट की ऑडिटिंग करते समय, अपने ब्राउज़र के नेटवर्क टूल की मदद से पेजों की जांच करना एक अच्छा तरीका है. अगर आपको यह नहीं पता कि यह कैसे किया जाता है, तो Chrome DevTools के नेटवर्क पैनल के लिए, शुरू करने की गाइड देखें. इसी तरह के टूल, Firefox, Safari, Internet Explorer, और Edge के लिए भी उपलब्ध हैं.

बदलाव करने से पहले, नतीजों का रिकॉर्ड रखना न भूलें. नेटवर्क अनुरोधों के लिए, यह स्क्रीनशॉट जितना आसान हो सकता है — प्रोफ़ाइल डेटा को JSON फ़ाइल के तौर पर भी सेव किया जा सकता है. टेस्ट के नतीजों को सेव और शेयर करने के तरीके के बारे में यहां ज़्यादा जानकारी दी गई है.

नेटवर्क के इस्तेमाल का ऑडिट शुरू करने से पहले, ब्राउज़र कैश मेमोरी बंद करें, ताकि आपको पहले लोड की परफ़ॉर्मेंस के सटीक आंकड़े मिल सकें. अगर पहले से ही किसी सर्विस वर्कर के ज़रिए कैश मेमोरी का इस्तेमाल किया जा रहा है, तो Cache API का स्टोरेज खाली करें. आपके पास गुप्त (निजी) विंडो का इस्तेमाल करने का विकल्प है. इससे आपको ब्राउज़र कैश मेमोरी को बंद करने या पहले से कैश मेमोरी में सेव की गई एंट्री को हटाने की चिंता नहीं करनी पड़ेगी.

यहां कुछ मुख्य सुविधाएं और मेट्रिक दी गई हैं, जिन्हें आपको ब्राउज़र टूल की मदद से देखना चाहिए:

• लोड की परफ़ॉर्मेंस: Lighthouse, लोड मेट्रिक की खास जानकारी देता है. पेज लोड होने के दौरान, उपयोगकर्ता के अहम पलों के बारे में Addy Osmani ने बेहतरीन जानकारी दी है.
• संसाधनों को लोड और पार्स करने के साथ-साथ, मेमोरी के इस्तेमाल के लिए टाइमलाइन इवेंट. ज़्यादा जानने के लिए, मेमोरी और JavaScript प्रोफ़ाइलिंग चलाएं.
• पेज का कुल साइज़ और फ़ाइलों की संख्या.
• JavaScript फ़ाइलों की संख्या और साइज़.
• खास तौर पर, बड़ी JavaScript फ़ाइलें (जैसे, 100 केबी से ज़्यादा).
• इस्तेमाल न किया गया JavaScript. Chrome के कवरेज टूल का इस्तेमाल करके, इसकी जांच की जा सकती है.
• इमेज फ़ाइलों की कुल संख्या और साइज़.
• बहुत बड़ी इमेज फ़ाइलें.
• इमेज फ़ॉर्मैट: क्या PNG ऐसे हैं जिन्हें JPEG या SVG में बदला जा सकता है? क्या WebP का इस्तेमाल फ़ॉलबैक के साथ किया जाता है?
• रिस्पॉन्सिव इमेज बनाने के लिए इस्तेमाल होने वाली तकनीकों (जैसे कि srcset) का इस्तेमाल किया गया है या नहीं.
• एचटीएमएल फ़ाइल का साइज़.
• सीएसएस फ़ाइलों की कुल संख्या और साइज़.
• इस्तेमाल न की गई सीएसएस. (Chrome में, कवरेज पैनल का इस्तेमाल करें.)
• वेब फ़ॉन्ट (इसमें आइकॉन फ़ॉन्ट भी शामिल हैं) जैसी अन्य एसेट के गलत इस्तेमाल की जांच करें.
• पेज लोड होने में रुकावट डालने वाली किसी भी चीज़ के लिए, DevTools की टाइमलाइन देखें.

अगर तेज़ वाई-फ़ाई या तेज़ मोबाइल नेटवर्क से काम किया जा रहा है, तो कम बैंडविड्थ और ज़्यादा इंतज़ार के समय वाले इम्यूलेशन के साथ टेस्ट करें. मोबाइल के साथ-साथ डेस्कटॉप पर भी जांच करना न भूलें — कुछ साइटें अलग-अलग डिवाइसों के लिए अलग-अलग एसेट और लेआउट डिलीवर करने के लिए, UA स्निफ़िंग का इस्तेमाल करती हैं. आपको डिवाइस सिम्युलेशन के साथ-साथ, रिमोट डीबगिंग का इस्तेमाल करके, असल हार्डवेयर पर भी जांच करनी पड़ सकती है.

ध्यान दें: आम तौर पर, ब्राउज़र टूल का इस्तेमाल करके समस्याओं का पता लगाया जा सकता है. इसके लिए, नेटवर्क के रिस्पॉन्स की जांच करें और साइज़ के हिसाब से क्रम में लगाएं. उदाहरण के लिए: यहां 349 केबी की PNG इमेज को देखकर ऐसा लग रहा था कि इसमें कोई समस्या हो सकती है:

असल में, यह इमेज 1600 पिक्सल चौड़ी थी, जबकि एलिमेंट की ज़्यादा से ज़्यादा डिसप्ले चौड़ाई सिर्फ़ 400 पिक्सल थी. डिकंप्रेस करने के बाद, इमेज के लिए 4 एमबी से ज़्यादा मेमोरी की ज़रूरत होती है. यह मोबाइल फ़ोन के लिए काफ़ी ज़्यादा है. इमेज को 800 पिक्सल चौड़ी JPEG फ़ाइल के तौर पर फिर से सेव करने (दो गुना बड़ी स्क्रीन पर 400 पिक्सल की डिसप्ले चौड़ाई के साथ काम करने के लिए) और ImageOptim की मदद से ऑप्टिमाइज़ करने पर, 17 केबी की फ़ाइल बनाई जा सकती है: ओरिजनल PNG की तुलना ऑप्टिमाइज़ किए गए JPEG से करें.

इसमें 95% की बढ़ोतरी हुई है!

मेमोरी और सीपीयू लोड की जांच करना

बदलाव करने से पहले, मेमोरी और सीपीयू के इस्तेमाल का रिकॉर्ड रखें.

Chrome में, विंडो मेन्यू से टास्क मैनेजर को ऐक्सेस किया जा सकता है. किसी वेब पेज की ज़रूरी शर्तों की जांच करने का यह एक आसान तरीका है.

Chrome का टास्क मैनेजर — मेमोरी और सीपीयू का ज़्यादा इस्तेमाल करने वाले ऐप्लिकेशन के बारे में सावधान रहें!

पहले और बाद के लोड की परफ़ॉर्मेंस की जांच करना

Lighthouse, WebPagetest, और PageSpeed Insights, वेबसाइट के लोड होने की रफ़्तार, डेटा की लागत, और संसाधनों के इस्तेमाल का विश्लेषण करने के लिए काम के हैं. WebPagetest, स्टैटिक कॉन्टेंट को कैश मेमोरी में सेव करने की सुविधा, पहले बाइट में लगने वाला समय, और यह भी जांच करेगा कि आपकी साइट सीडीएन का असरदार तरीके से इस्तेमाल करती है या नहीं.

ध्यान दें: स्टैटिक कॉन्टेंट को कैश मेमोरी में सेव करने की सुविधा को चालू करना आसान है. इससे ब्राउज़र, पहली बार अनुरोध किए जाने पर एसेट को कैश मेमोरी में सेव कर सकते हैं. इसके लिए, अपने सर्वर को सही हेडर शामिल करने के लिए कॉन्फ़िगर करें. अगर कोई ब्राउज़र रिसॉर्स को कैश कर सकता है, तो उसे बाद की विज़िट पर उन्हें नेटवर्क से फिर से पाने की ज़रूरत नहीं होगी. इससे लोड होने की स्पीड बेहतर होती है, डेटा की लागत कम होती है, और नेटवर्क और सर्वर पर लोड कम होता है. ऐसा उन ब्राउज़र के लिए भी होता है जो सेवा वर्कर की मदद से कैश मेमोरी में डेटा सेव नहीं कर पाते. Cache API का इस्तेमाल करने पर भी, ब्राउज़र के कैश मेमोरी में सेव होने की सुविधा चालू करना ज़रूरी है. ज़्यादा जानने के लिए, PageSpeed टूल और वेब की बुनियादी बातें पर मौजूद संसाधन देखें. खास तौर पर, 'कैश मेमोरी में सेव किए गए रिस्पॉन्स को अमान्य करना और अपडेट करना' सेक्शन.

नतीजे सेव करना

• WebPagetest: टेस्ट के नतीजों का अपना यूआरएल होता है.
• PageSpeed Insights: ऑनलाइन PageSpeed Insights टूल में अब Chrome उपयोगकर्ता अनुभव रिपोर्ट का डेटा शामिल है. इससे, असल दुनिया में पेज की परफ़ॉर्मेंस के आंकड़े हाइलाइट किए जाते हैं.
• Lighthouse: डाउनलोड बटन पर क्लिक करके, Chrome DevTools के ऑडिट पैनल से रिपोर्ट सेव करें:

  

प्रोग्रेसिव वेब ऐप्लिकेशन की मुख्य ज़रूरी शर्तों की जांच करना

Lighthouse की मदद से, वेबसाइट की सुरक्षा, काम करने के तरीके, ऐक्सेस करने की सुविधा, परफ़ॉर्मेंस, और सर्च इंजन की परफ़ॉर्मेंस की जांच की जा सकती है. खास तौर पर, Lighthouse यह जांच करता है कि आपकी साइट पर पीडब्ल्यूए की सुविधाएं सही से लागू की गई हैं या नहीं. जैसे, सेवा वर्कर और वेब ऐप्लिकेशन मेनिफ़ेस्ट.

Lighthouse यह भी जांच करता है कि आपकी साइट, लोगों को ऑफ़लाइन अनुभव दे सकती है या नहीं.

Lighthouse रिपोर्ट को JSON के तौर पर डाउनलोड किया जा सकता है. इसके अलावा, अगर Lighthouse Chrome एक्सटेंशन का इस्तेमाल किया जा रहा है, तो रिपोर्ट को GitHub Gist के तौर पर शेयर किया जा सकता है: शेयर बटन पर क्लिक करें, 'व्यूअर में खोलें' चुनें. इसके बाद, नई विंडो में फिर से शेयर बटन पर क्लिक करें और 'Gist के तौर पर सेव करें' को चुनें.

Lighthouse के Chrome एक्सटेंशन से, किसी रिपोर्ट को gist में एक्सपोर्ट करना — शेयर बटन पर क्लिक करें

असल परफ़ॉर्मेंस को ट्रैक करने के लिए, आंकड़े, इवेंट ट्रैकिंग, और कारोबार की मेट्रिक का इस्तेमाल करना

अगर हो सके, तो बदलाव लागू करने से पहले Analytics डेटा का रिकॉर्ड रखें: बाउंस रेट, पेज पर बिताया गया समय, बाहर निकलने वाले पेज: आपके कारोबार की ज़रूरतों के हिसाब से जो भी काम का हो.

अगर हो सके, तो कारोबार और तकनीकी मेट्रिक रिकॉर्ड करें जिन पर असर पड़ सकता है. इससे, बदलाव करने के बाद नतीजों की तुलना की जा सकती है. उदाहरण के लिए: कोई ई-कॉमर्स साइट, हर मिनट के ऑर्डर को ट्रैक कर सकती है या स्ट्रेस और एंड्योरेंस टेस्टिंग के लिए आंकड़े रिकॉर्ड कर सकती है. पेज के साइज़ और संसाधन के अनुरोधों को कम करने पर, बैक-एंड स्टोरेज की लागत, सीपीयू की ज़रूरतें, दिखाने की लागत, और बेहतर परफ़ॉर्मेंस की संभावना बढ़ जाती है.

अगर आंकड़ों को लागू नहीं किया गया है, तो अब समय आ गया है! कारोबार की मेट्रिक और आंकड़ों से यह पता चलता है कि आपकी साइट काम कर रही है या नहीं. अगर ज़रूरी हो, तो बटन पर होने वाले क्लिक और वीडियो चलाने जैसी उपयोगकर्ता कार्रवाइयों के लिए, इवेंट ट्रैकिंग को शामिल करें. आपके पास लक्ष्य फ़्लो का विश्लेषण लागू करने का विकल्प भी है: ये वे पाथ होते हैं जिनसे आपके उपयोगकर्ता 'कन्वर्ज़न' पर पहुंचते हैं.

Google Analytics के साइट स्पीड सेक्शन पर नज़र रखकर, यह देखा जा सकता है कि परफ़ॉर्मेंस मेट्रिक, कारोबार की मेट्रिक से कैसे जुड़ी हैं. उदाहरण के लिए: 'होम पेज कितनी तेज़ी से लोड हुआ?' के मुकाबले 'क्या होम पेज से आने वाले लोगों ने कोई खरीदारी की?'

Google Analytics, Navigation Timing API के डेटा का इस्तेमाल करता है.

हो सकता है कि आप JavaScript परफ़ॉर्मेंस एपीआई या अपनी मेट्रिक में से किसी एक का इस्तेमाल करके डेटा रिकॉर्ड करना चाहें. उदाहरण के लिए:

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

ब्राउज़र के बंद होने और इंटरवेंशन की चेतावनियों की जांच करने के लिए, ReportingObserver का भी इस्तेमाल किया जा सकता है. यह असल उपयोगकर्ताओं से असल और लाइव मेज़रमेंट पाने के लिए कई एपीआई में से एक है.

असल दुनिया जैसा अनुभव: स्क्रीन और वीडियो रिकॉर्डिंग

मोबाइल और डेस्कटॉप पर पेज लोड होने की वीडियो रिकॉर्डिंग बनाएं. यह सुविधा, ज़्यादा फ़्रेम रेट पर और टाइमर डिसप्ले जोड़ने पर और भी बेहतर तरीके से काम करती है.

आपके पास स्क्रीनकास्ट सेव करने का भी विकल्प है. Android, iOS, और डेस्कटॉप प्लैटफ़ॉर्म के लिए, स्क्रीनकास्ट रिकॉर्ड करने वाले कई ऐप्लिकेशन उपलब्ध हैं. साथ ही, ऐसा करने के लिए स्क्रिप्ट भी उपलब्ध हैं.

पेज लोड को वीडियो रिकॉर्ड करने की सुविधा, WebPagetest में फ़िल्मस्ट्रिप व्यू या Chrome DevTools में स्क्रीनशॉट कैप्चर करें की तरह ही काम करती है. इससे आपको पेज के कॉम्पोनेंट के लोड होने की स्पीड का रीयल-टाइम रिकॉर्ड मिलता है: कौनसा कॉम्पोनेंट तेज़ी से लोड होता है और कौनसा धीरे. वीडियो रिकॉर्डिंग और स्क्रीनकास्ट सेव करें, ताकि बाद में किए गए सुधारों की तुलना की जा सके.

सुधारों को दिखाने का एक बेहतरीन तरीका है, पहले और बाद की इमेज को अगल-बगल में रखकर तुलना करना!

और क्या?

अगर ज़रूरी हो, तो वेब ब्लोट स्कोर पाएं. यह एक मज़ेदार जांच है. हालांकि, यह कोड ब्लोट को दिखाने या यह दिखाने का एक शानदार तरीका भी हो सकता है कि आपने कोड में सुधार किए हैं.

मेरी साइट की लागत क्या है?, यहां दिखाया गया है. इससे आपको अलग-अलग इलाकों में अपनी साइट को लोड करने की लागत के बारे में जानकारी मिलती है.

कई अन्य स्टैंडअलोन और ऑनलाइन टूल उपलब्ध हैं: perf.rocks/tools पर जाएं.