PageSpeed Insights API और Chrome UX (CrUX) Report API की मदद से, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को मेज़र करना

1. शुरू करने से पहले

इस कोडलैब में, आपको PageSpeed Insights API और CrUX API की मदद से, किसी वेब पेज की वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को मेज़र करने का तरीका बताया गया है.

दोनों एपीआई, वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाला एक जैसा डेटा दिखाते हैं. हालांकि, हर एपीआई के अलग-अलग फ़ायदे हैं. PageSpeed Insights API, फ़ील्ड से मिले CrUX डेटा के साथ-साथ Lighthouse से मिला डेटा भी उपलब्ध कराता है. Lighthouse, Google का ऑटोमेटेड और ओपन सोर्स टूल है. यह वेब पेजों की जांच करता है और उन्हें बेहतर बनाने के तरीके सुझाता है. CrUX API, Lighthouse का डेटा उपलब्ध नहीं कराता. इसलिए, यह तेज़ी से काम करता है.

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

• सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी). यह मेट्रिक, लोड परफ़ॉर्मेंस को मेज़र करती है. साथ ही, पेज लोड होने की शुरुआत के 2.5 सेकंड के अंदर यह मेट्रिक ट्रिगर होनी चाहिए.
• फ़र्स्ट इनपुट डिले (एफ़आईडी). यह इंटरैक्टिविटी को मेज़र करता है और इसे 100 मिलीसेकंड के अंदर पूरा होना चाहिए.
• कुल लेआउट शिफ़्ट (सीएलएस). यह विज़ुअल स्टैबिलिटी को मेज़र करता है और इसकी वैल्यू 0.1 से कम होनी चाहिए.

ज़रूरी शर्तें

• वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाला लेख
• कमांड लाइन की बुनियादी जानकारी
• वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के थ्रेशोल्ड तय करने के बारे में लेख

आपको क्या सीखने को मिलेगा

• PageSpeed Insights API की मदद से, किसी वेब पेज की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को मेज़र करें.
• CrUX API की मदद से, किसी वेब पेज की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक मेज़र करें.

आपको किन चीज़ों की ज़रूरत होगी

• Google खाता
• कमांड लाइन का ऐक्सेस
• अपनी पसंद का टेक्स्ट एडिटर
• अपनी पसंद का वेब ब्राउज़र
• अपनी पसंद का यूआरएल (इस कोडलैब में https://developers.google.com का इस्तेमाल किया गया है.)

2. PageSpeed Insights API की मदद से, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक मेज़र करना

1. अगर आपको किसी यूआरएल के डेस्कटॉप वर्शन के लिए परफ़ॉर्मेंस डेटा चाहिए, तो PageSpeed Insights API से डेटा का अनुरोध करें और उसे response.txt फ़ाइल में सेव करें:

curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"

YOUR_URL प्लेसहोल्डर को अपने यूआरएल से बदलें.

एपीआई स्ट्रिंग के आखिर में देखें कि strategy क्वेरी पैरामीटर को desktop वैल्यू पर सेट किया गया है. इससे डेस्कटॉप डेटा के लिए अनुरोध का पता चलता है.

2. अगर आपको किसी यूआरएल के मोबाइल वर्शन के लिए परफ़ॉर्मेंस डेटा चाहिए, तो PageSpeed Insights API से डेटा का अनुरोध करें और उसे response.txt फ़ाइल में सेव करें:

curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"

YOUR_URL प्लेसहोल्डर को अपने यूआरएल से बदलें.

एपीआई स्ट्रिंग के आखिर में देखें कि strategy क्वेरी पैरामीटर की वैल्यू mobile पर सेट है. इससे मोबाइल डेटा के लिए अनुरोध का पता चलता है.

3. अपने टेक्स्ट एडिटर में, response.txt फ़ाइल खोलें. इसके बाद, loadingExperience प्रॉपर्टी ढूंढें:

response.txt

   "loadingExperience": {
    "id": "https://developers.google.com/",
    "metrics": {
      "LARGEST_CONTENTFUL_PAINT_MS": {
        "percentile": 1714,
        "distributions": [
          {
            "min": 0,
            "max": 1000,
            "proportion": 0.49701860391159164
          },
          {
            "min": 1000,
            "max": 3000,
            "proportion": 0.40071951025600261
          },
          {
            "min": 3000,
            "proportion": 0.10226188583240581
          }
        ],
        "category": "AVERAGE"
      },
  },

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

• percentile प्रॉपर्टी, हर मेट्रिक के लिए 75वां पर्सेंटाइल दिखाती है.
• distributions प्रॉपर्टी से पता चलता है कि हर मेट्रिक के लिए, कितने प्रतिशत पेज व्यू को अच्छी, सुधार की ज़रूरत है या खराब रेटिंग मिली है.
• category प्रॉपर्टी, हर मेट्रिक की परफ़ॉर्मेंस को धीमा, औसत या तेज़ के तौर पर क्लासिफ़ाई करती है.

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

4. originLoadingExperience प्रॉपर्टी ढूंढें:

response.txt

  "originLoadingExperience": {
    "id": "https://developers.google.com",
    "metrics": {
      "LARGEST_CONTENTFUL_PAINT_MS": {
        "percentile": 1649,
        "distributions": [
          {
            "min": 0,
            "max": 1000,
            "proportion": 0.488838781075378
          },
          {
            "min": 1000,
            "max": 3000,
            "proportion": 0.42709617576692827
          },
          {
            "min": 3000,
            "proportion": 0.084065043157693739
          }
        ],
        "category": "AVERAGE"
      },
  },

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

3. CrUX API की मदद से, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक मेज़र करना

एपीआई पासकोड पाना

1. Google Cloud Console में, Chrome UX खोजें. इसके बाद, ड्रॉप-डाउन मेन्यू में Chrome UX Report API चुनें.
2. Chrome UX Report API पेज पर, चालू करें पर क्लिक करें. इसके बाद, चालू करें बटन के मैनेज करें बटन में बदलने का इंतज़ार करें. इसके बाद, मैनेज करें को चुनें.
3. नेविगेशन मेन्यू में, क्रेडेंशियल पर क्लिक करें. इसके बाद, क्रेडेंशियल बनाएं > एपीआई पासकोड को चुनें और एपीआई पासकोड कॉपी करें.

अनुरोध करना

1. अपनी कमांड लाइन से, CrUX API से अपने यूआरएल के लिए परफ़ॉर्मेंस डेटा का अनुरोध करें और उसे response.txt फ़ाइल में सेव करें:

curl -o response.txt 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY' 'Content-Type: application/json' --data '{"url":"YOUR_URL"}'

YOUR_API_KEY प्लेसहोल्डर को अपने एपीआई पासकोड से बदलें. इसके बाद, YOUR_URL प्लेसहोल्डर को अपने यूआरएल से बदलें.

चेतावनी: यह कमांड macOS, Linux, और Windows के लिए Git BASH पर लागू होती है. अगर आपकी मशीन पर कोई दूसरा ऑपरेटिंग सिस्टम या कमांड लाइन चल रही है, तो आपको कमांड में थोड़ा बदलाव करना पड़ सकता है. उदाहरण के लिए, अगर Windows पर कमांड शेल का इस्तेमाल किया जाता है, तो आपको पैरामीटर के लिए सिंगल कोट के बजाय डबल कोट का इस्तेमाल करना होगा. इसके बाद, आपको मौजूदा डबल कोट से पहले स्लैश लगाना होगा, ताकि अंदर के कोट से बचा जा सके.

2. अपने टेक्स्ट एडिटर में, response.txt फ़ाइल खोलें:

response.txt

{
  "record": {
    "key": {
      "url": "https://developers.google.com/"
    },
    "metrics": {
      "cumulative_layout_shift": {
        "histogram": [
          {
            "start": "0.00",
            "end": "0.10",
            "density": 0.47784335300590036
          },
          {
            "start": "0.10",
            "end": "0.25",
            "density": 0.32379713914174157
          },
          {
            "start": "0.25",
            "density": 0.19835950785235579
          }
        ],
        "percentiles": {
          "p75": "0.23"
        }
      },
    }
  },
}

CrUX API के जवाब में, वेबसाइट की परफ़ॉर्मेंस से जुड़ी अहम जानकारी की हर मेट्रिक के लिए यह जानकारी मिलती है:

• histogram प्रॉपर्टी से पता चलता है कि किसी मेट्रिक के लिए, कितने प्रतिशत उपयोगकर्ताओं को खराब, सामान्य या अच्छा अनुभव मिला.
• percentiles प्रॉपर्टी, किसी दी गई मेट्रिक के लिए 75वें पर्सेंटाइल के ऑब्ज़र्वेशन को दिखाती है.

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

4. बधाई हो

बधाई हो! आपने PageSpeed Insights API और CrUX API की मदद से, किसी वेब पेज की परफ़ॉर्मेंस की अहम जानकारी को मेज़र किया हो.

ज़्यादा जानें

• PageSpeed Insights API का इस्तेमाल शुरू करना
• CrUX API का इस्तेमाल करना
• Web Vitals