AutoWebPerf की मदद से ऑडिट अपने-आप होने की सुविधा

यह एक नया मॉड्यूलर टूल है, जो कई सोर्स से परफ़ॉर्मेंस डेटा को अपने-आप इकट्ठा करने की सुविधा देता है.

AutoWebPerf (AWP) एक मॉड्यूलर टूल है. इसकी मदद से, कई सोर्स से परफ़ॉर्मेंस डेटा अपने-आप इकट्ठा होता है. फ़िलहाल, अलग-अलग दायरों (लैब और फ़ील्ड) के लिए वेबसाइट की परफ़ॉर्मेंस को मेज़र करने के लिए, कई टूल उपलब्ध हैं. जैसे, Chrome UX रिपोर्ट, PageSpeed Insights या WebPageTest. AWP, आसान सेटअप की मदद से कई ऑडिट टूल के साथ इंटिग्रेशन की सुविधा देता है. इससे, एक ही जगह पर साइट की परफ़ॉर्मेंस पर लगातार नज़र रखी जा सकती है.

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

इस टूल को GitHub पर, AutoWebPerf के सार्वजनिक रिपॉज़िटरी से ऐक्सेस किया जा सकता है.

AWP किस काम का है?

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

AWP, इंजन और पहले से बने एपीआई इंटिग्रेशन की सुविधा देता है. इनकी मदद से, प्रोग्राम के हिसाब से कॉन्फ़िगर किया जा सकता है, ताकि परफ़ॉर्मेंस मॉनिटर करने वाले अलग-अलग एपीआई से बार-बार की जाने वाली क्वेरी को ऑटोमेट किया जा सके.

उदाहरण के लिए, AWP की मदद से, अपने होम पेज पर हर दिन टेस्ट सेट किया जा सकता है. इससे, CrUX API से फ़ील्ड डेटा और PageSpeed Insights की Lighthouse रिपोर्ट से लैब डेटा कैप्चर किया जा सकता है. इस डेटा को समय के साथ लिखा और सेव किया जा सकता है. उदाहरण के लिए, Google Sheets में. इसके बाद, Data Studio डैशबोर्ड में इसे विज़ुअलाइज़ किया जा सकता है. AWP, पूरी प्रोसेस के ज़्यादातर हिस्से को ऑटोमेट करता है. इससे, समय के साथ लैब और फ़ील्ड के रुझानों को फ़ॉलो करने के लिए, यह एक बेहतरीन समाधान बन जाता है. ज़्यादा जानकारी के लिए, नीचे Data Studio में ऑडिट के नतीजे देखना लेख पढ़ें.

आर्किटेक्चर की खास जानकारी

AWP, मॉड्यूलर-आधारित लाइब्रेरी है. इसमें तीन तरह के मॉड्यूल होते हैं:

  • इंजन
  • कनेक्टर मॉड्यूल
  • gatherer मॉड्यूल

इंजन, किसी कनेक्टर (उदाहरण के लिए, किसी लोकल CSV फ़ाइल) से टेस्ट की सूची लेता है. इसके बाद, चुने गए डेटा इकट्ठा करने वाले टूल (जैसे कि PageSpeed Insights) की मदद से परफ़ॉर्मेंस ऑडिट करता है और नतीजों को आउटपुट कनेक्टर (उदाहरण के लिए, Google Sheets) में लिखता है.

AWP के आर्किटेक्चर का डायग्राम.

AWP में पहले से लागू किए गए कई कलेक्टर और कनेक्टर होते हैं:

AWP की मदद से ऑडिट को ऑटोमेट करना

AWP, आपके पसंदीदा ऑडिट प्लैटफ़ॉर्म की मदद से, परफ़ॉर्मेंस ऑडिट को ऑटोमेट करता है. जैसे, PageSpeed Insights, WebPageTest या CrUX API. AWP की मदद से, यह चुना जा सकता है कि टेस्ट की सूची कहां लोड की जाए और नतीजों को कहां सेव किया जाए.

उदाहरण के लिए, Google शीट में सेव किए गए टेस्ट की सूची के लिए ऑडिट चलाए जा सकते हैं. साथ ही, नीचे दिए गए निर्देश का इस्तेमाल करके, नतीजों को CSV फ़ाइल में लिखा जा सकता है:

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

बार-बार होने वाले ऑडिट

बार-बार होने वाले ऑडिट को रोज़, हर हफ़्ते या हर महीने की फ़्रीक्वेंसी में चलाया जा सकता है. उदाहरण के लिए, स्थानीय JSON में तय किए गए टेस्ट की सूची के लिए, हर दिन ऑडिट चलाए जा सकते हैं. जैसे:

{
  "tests": [
    {
      "label": "web.dev",
      "url": "https://web.dev",
      "gatherer": "psi"
    }
  ]
}

नीचे दिया गया निर्देश, लोकल JSON फ़ाइल से ऑडिट टेस्ट की सूची पढ़ता है. इसके बाद, लोकल मशीन पर ऑडिट चलाता है और नतीजों को लोकल CSV फ़ाइल में दिखाता है:

PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

बैकग्राउंड सेवा के तौर पर हर दिन ऑडिट चलाने के लिए, यहां दिए गए निर्देश का इस्तेमाल किया जा सकता है:

PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv

इसके अलावा, AWP को रोज़ के क्रॉन जॉब के तौर पर चलाने के लिए, यूनिक्स जैसे एनवायरमेंट में crontab सेट अप किया जा सकता है:

0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

AWP GitHub डेटा स्टोर करने की जगह में, रोज़ के ऑडिट और नतीजों को अपने-आप इकट्ठा करने के ज़्यादा तरीके देखे जा सकते हैं.

Data Studio में ऑडिट के नतीजे देखना

वेबसाइट की परफ़ॉर्मेंस की जानकारी को लगातार मेज़र करने के साथ-साथ, रुझानों का आकलन करना और AWP से इकट्ठा किए गए रीयल यूज़र मेट्रिक (RUM) या Chrome के लिए उपयोगकर्ता अनुभव से जुड़ी रिपोर्ट (CrUX) के डेटा की मदद से, संभावित रेग्रेशन का पता लगाना ज़रूरी है. ध्यान दें कि Chrome UX रिपोर्ट (CrUX), 28 दिनों के डेटा को इकट्ठा करती है. इसलिए, हमारा सुझाव है कि आप CrUX के साथ-साथ अपने RUM डेटा का भी इस्तेमाल करें, ताकि आपको जल्दी पता चल सके कि परफ़ॉर्मेंस में गिरावट आई है या नहीं.

Data Studio एक मुफ़्त विज़ुअलाइज़ेशन टूल है. इसमें परफ़ॉर्मेंस मेट्रिक को आसानी से लोड किया जा सकता है और रुझानों को चार्ट के तौर पर दिखाया जा सकता है. उदाहरण के लिए, यहां दिए गए टाइम सीरीज़ चार्ट में, Chrome UX रिपोर्ट के डेटा के आधार पर वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक दिख रही हैं. चार्ट में से एक में, हाल के हफ़्तों में कुल लेआउट शिफ़्ट में बढ़ोतरी दिख रही है. इसका मतलब है कि कुछ पेजों के लेआउट में स्थिरता में गिरावट आई है. इस स्थिति में, आपको इन पेजों की समस्याओं का विश्लेषण करने के लिए, प्राथमिकता तय करनी होगी.

Data Studio में, वेबसाइट की परफ़ॉर्मेंस की जानकारी वाले नतीजों का स्क्रीनशॉट.

डेटा इकट्ठा करने से लेकर विज़ुअलाइज़ेशन तक की पूरी प्रोसेस को आसान बनाने के लिए, यूआरएल की सूची के साथ AWP चलाया जा सकता है. इससे, नतीजों को Google Sheets में अपने-आप एक्सपोर्ट करने के लिए, यह कमांड इस्तेमाल किया जा सकता है:

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

स्प्रेडशीट में हर दिन की मेट्रिक इकट्ठा करने के बाद, एक ऐसा Data Studio डैशबोर्ड बनाया जा सकता है जो सीधे स्प्रेडशीट से डेटा लोड करता है और टाइम सीरीज़ चार्ट में रुझानों को प्लॉट करता है. Data Studio पर विज़ुअलाइज़ करने के लिए, डेटा सोर्स के तौर पर स्प्रेडशीट के साथ AWP को सेट अप करने के बारे में ज़्यादा जानने के लिए, Google स्प्रेडशीट एपीआई कनेक्टर देखें.

आगे क्या करना है?

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

AutoWebPerf रिपॉज़िटरी में ज़्यादा जानें.