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

Sam Dutton

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

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

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

• सिस्‍टम टूल
• ब्राउज़र में पहले से मौजूद टूल
• ब्राउज़र एक्सटेंशन
• ऑनलाइन टेस्ट के लिए आवेदन
• एम्युलेटर टूल
• 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 स्निफ़िंग का इस्तेमाल करती हैं. आपको डिवाइस सिम्युलेशन के साथ-साथ, रिमोट डीबगिंग का इस्तेमाल करके, असल हार्डवेयर पर भी जांच करनी पड़ सकती है.

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

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

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

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

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

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

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

  

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

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

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

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