1. शुरू करने से पहले
इस कोडलैब में आप PageSpeed Insights (पीएसआई) एपीआई और Chrome UX रिपोर्ट (CrUX) एपीआई की मदद से, वेब पेज की परफ़ॉर्मेंस के बारे में जानकारी देने का तरीका जान सकते हैं.
दोनों एपीआई वेबसाइट की परफ़ॉर्मेंस से जुड़ी जानकारी का एक जैसा डेटा देते हैं. हालांकि, हर एपीआई के फ़ायदे अलग-अलग होते हैं. फ़ील्ड से CrUX डेटा के अलावा, PSI एपीआई भी Lighthouse का डेटा देता है. यह YouTube का अपने-आप चलने वाला और ओपन सोर्स टूल है जो वेब पेजों का ऑडिट करता है और उन्हें बेहतर बनाने का सुझाव देता है. CrUX API, Lighthouse का डेटा नहीं देता है, इसलिए यह तेज़ी से काम करता है.
Google का सुझाव है कि आप मोबाइल और डेस्कटॉप डिवाइसों पर वेबसाइट की परफ़ॉर्मेंस की जानकारी का आकलन करें. वेबसाइट की परफ़ॉर्मेंस की जानकारी में ये तीन मेट्रिक शामिल हैं: ये सभी वेब पेजों पर लागू होती हैं और आपको उपयोगकर्ता के अनुभव के बारे में अहम जानकारी देती हैं:
- सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी). लोड परफ़ॉर्मेंस को मेज़र करता है. यह पेज लोड होने के 2.5 सेकंड के अंदर होना चाहिए.
- फ़र्स्ट इनपुट डिले (एफ़आईडी). इंटरैक्शन को मेज़र करता है और 100 मिलीसेकंड में होना चाहिए.
- कुल लेआउट शिफ़्ट (सीएलएस). विज़ुअल स्थिरता को मापता है और 0.1 के अंदर होना चाहिए.
ज़रूरी बातें
- वेब वाइटल रिपोर्ट.
- कोर वेब वाइटल मेट्रिक के थ्रेशोल्ड का लेख तय करना.
- कमांड लाइन इस्तेमाल करने के तरीके की बुनियादी जानकारी.
आप क्या कर सकते हैं
- पीएसआई एपीआई की मदद से, किसी वेब पेज और कोर वेब वाइटल रिपोर्ट को मेज़र करें.
- CrUX API की मदद से, किसी वेब पेज और कोर वेब वाइटल रिपोर्ट का आकलन करें.
आपको इनकी ज़रूरत होगी
- Google खाता
- कमांड लाइन का ऐक्सेस
- आपकी पसंद का टेक्स्ट एडिटर
- आपकी पसंद का एक वेब ब्राउज़र
- आपकी पसंद के यूआरएल का कोड (यह कोडलैब https://developers.google.com का इस्तेमाल करता है.)
2. पीएसआई एपीआई की मदद से वेबसाइट की परफ़ॉर्मेंस के बारे में जानकारी पाना
- अगर आपको किसी यूआरएल के डेस्कटॉप वर्शन की परफ़ॉर्मेंस का डेटा चाहिए, तो PageSpeed Insights API से डेटा का अनुरोध करने और इसे
response.txtफ़ाइल में सेव करने के लिए,curlनिर्देश चलाएं:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"
YOUR_URL प्लेसहोल्डर को यूआरएल से बदलें.
- अगर आपको किसी यूआरएल के मोबाइल वर्शन की परफ़ॉर्मेंस का डेटा चाहिए, तो पिछले चरण में दिए गए निर्देश में एपीआई स्ट्रिंग के आखिर में
strategyक्वेरी पैरामीटर को,mobileवैल्यू पर सेट करें:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
YOUR_URL प्लेसहोल्डर को यूआरएल से बदलें.
- अपने टेक्स्ट एडिटर में,
response.txtफ़ाइल खोलें औरloadingExperienceप्रॉपर्टी ढूंढें:
प्रतिसाद.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 प्रॉपर्टी का कॉन्टेंट खाली है, तो यूआरएल में ज़रूरत के मुताबिक परफ़ॉर्मेंस डेटा नहीं है. यह समस्या आम तौर पर तब आती है, जब आप कम ट्रैफ़िक वाले वेब पेजों की जांच करते हैं.
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 की मदद से, वेबसाइट कैसा प्रदर्शन कर रही है इसके बारे में जानकारी का आकलन करना
एपीआई कुंजी पाएं
- Google Cloud Console में,
Chrome UXखोजें और फिर ड्रॉप-डाउन मेन्यू में Chrome UX रिपोर्ट एपीआई चुनें. - Chrome UX रिपोर्ट एपीआई पेज पर, चालू करें पर क्लिक करें. इसके बाद, चालू करें बटन को मैनेज करने वाले बटन में बदलने का इंतज़ार करें. इसके बाद, मैनेज करें चुनें.
- नेविगेशन मेन्यू में, क्रेडेंशियल पर क्लिक करें और फिर क्रेडेंशियल बनाएं; API (एपीआई) कुंजी चुनें और एपीआई कुंजी कॉपी करें.
अनुरोध करें
- CrUX एपीआई से अपने यूआरएल के परफ़ॉर्मेंस डेटा का अनुरोध करें और अपनी कमांड लाइन से, इसे
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 प्लेसहोल्डर को अपने यूआरएल से बदलें.
- अपने टेक्स्ट एडिटर में
response.txtफ़ाइल खोलें:
प्रतिसाद.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 एपीआई रिस्पॉन्स, हर कोर वेब वाइटल रिपोर्ट के लिए, यह जानकारी देता है:
histogramप्रॉपर्टी से उन उपयोगकर्ताओं का प्रतिशत पता चलता है जिन्हें किसी मेट्रिक का धीमा, औसत या तेज़ अनुभव मिला.percentilesप्रॉपर्टी किसी खास मेट्रिक के लिए 75वां पर्सेंटाइल की जानकारी देती है.
अगर आपको गड़बड़ी का कोई ऐसा मैसेज दिखता है, जिसमें यह बताया गया हो कि डेटा मौजूद नहीं है, तो इसका मतलब है कि दिए गए यूआरएल के लिए परफ़ॉर्मेंस डेटा ज़रूरत के मुताबिक नहीं है. यह समस्या आम तौर पर तब आती है, जब आप कम ट्रैफ़िक वाले वेब पेजों की जांच करते हैं.
4. बधाई हो
बधाई हो! आपने PSI API और CrUX एपीआई की मदद से, वेब पेज की परफ़ॉर्मेंस से जुड़ी अहम जानकारी मापी है.