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

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

AutoWebPerf (AWP) क्या है?

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 UX रिपोर्ट (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 रिपॉज़िटरी में ज़्यादा जानें.