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

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

Gilberto Cocchi
Gilberto Cocchi
Jonathan Chen
Jonathan Chen

AutoWebPerf (AWP) क्या है?

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

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

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

AWP का इस्तेमाल किस लिए किया जाता है?

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

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

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

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

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

Data Studio में ऑडिट के नतीजों को विज़ुअलाइज़ करना

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

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

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 Spreadsheets API कनेक्टर देखें.

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

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

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