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

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

Antoine Bisch

Gilberto Cocchi

Jonathan Chen

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, मॉड्यूलर पर आधारित एक लाइब्रेरी है, जिसमें तीन तरह के मॉड्यूल होते हैं:

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

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

AWP में, पहले से लागू किए गए कई डेटा इकट्ठा करने वाले और कनेक्टर शामिल हैं:

• पहले से लागू किए गए, डेटा इकट्ठा करने वाले टूल:
  • CrUX एपीआई
  • CrUX BigQuery
  • PageSpeed Insights एपीआई
  • WebPageTest API
• पहले से लागू किए गए कनेक्टर:
  • Google Sheets
  • JSON
  • CSV

एडब्ल्यूपी की मदद से ऑडिट ऑटोमेशन की सुविधा

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 चलाने के लिए, Unix जैसे एनवायरमेंट में crontab सेट अप किया जा सकता है:

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

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

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

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

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

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

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

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

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

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

AutoWebPerf डेटा स्टोर करने की जगह में ज़्यादा जानें.