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

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

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

मकसद क्यों? किसकी जांच करनी चाहिए?
निजता, सुरक्षा, और डेटा की अखंडता को पक्का करना. साथ ही, एपीआई के बेहतर इस्तेमाल की सुविधा चालू करना एचटीटीपीएस का इस्तेमाल करना क्यों ज़रूरी है एचटीटीपीएस को साइट के सभी पेजों/रूट और ऐसेट के लिए लागू किया गया.
लोड करने की परफ़ॉर्मेंस को बेहतर बनाना 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 स्निफ़िंग का इस्तेमाल करती हैं. आपको डिवाइस सिम्युलेशन के साथ-साथ, रिमोट डीबगिंग का इस्तेमाल करके, असल हार्डवेयर पर भी जांच करनी पड़ सकती है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Google 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 में स्क्रीनशॉट कैप्चर करें की तरह ही काम करती है. इससे आपको पेज के कॉम्पोनेंट के लोड होने की स्पीड का रीयल-टाइम रिकॉर्ड मिलता है: कौनसा कॉम्पोनेंट तेज़ी से लोड होता है और कौनसा धीरे. वीडियो रिकॉर्डिंग और स्क्रीनकास्ट को सेव करें, ताकि उनकी परफ़ॉर्मेंस की तुलना बाद में बेहतर हो सके.

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

और क्या?

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

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

whatdoesmysitecost.com का स्क्रीनशॉट

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