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

Sam Dutton

कम डेटा लागत वाली, बेहतर परफ़ॉर्म करने वाली साइट बनाने के कई मुख्य मकसद हैं.

हर मकसद के लिए, आपको ऑडिट करना होगा.

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

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

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

नीचे बताया गया है कि हर तरह के ऑडिट के लिए कौनसा तरीका काम का है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Chrome का टास्क मैनेजर — मेमोरी और सीपीयू की गड़बड़ियों से सावधान रहें!

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

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

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

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

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

  

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

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

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

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

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

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

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

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

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

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

Google Analytics, नेविगेशन समय एपीआई के डेटा का इस्तेमाल करता है.

ऐसा हो सकता है कि आप इनमें से किसी एक 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,
      });
     }
    });

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

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

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

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

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

सुविधाओं के बेहतर इस्तेमाल के लिए, तुलना करने से पहले और बाद के डेटा की तुलना करना एक शानदार तरीका हो सकता है!

और क्या?

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

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

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