इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) टूल से जुड़ी सहायता

Brendan Kenny

Elizabeth Sweeny

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

मेज़रमेंट से जुड़ा सुझाव

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

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

जानें कि आपके असली उपयोगकर्ताओं को कैसा अनुभव मिल रहा है (फ़ील्ड डेटा)

PageSpeed Insights पर जाएं

PageSpeed Insights, Chrome के लिए उपयोगकर्ता अनुभव से जुड़ी रिपोर्ट (CrUX) के एपीआई से फ़ील्ड डेटा लेता है. साथ ही, पिछले 28 दिनों में आपके पेज और ऑरिजिन की परफ़ॉर्मेंस की खास जानकारी देता है. इस डेटा में अब आईएनपी भी शामिल है:

इसे PageSpeed Insights पर आज़माएं.

फ़ील्ड से, आईएनपी की अपनी वैल्यू इकट्ठा करना

अगर आपको किसी साइट के लिए, आईएनपी का डेटा खुद इकट्ठा करना है, तो ऐसा करने का सबसे आसान तरीका है कि web-vitals लाइब्रेरी का इस्तेमाल किया जाए. इसके बीटा वर्शन में, अब आईएनपी की पूरी सुविधा उपलब्ध है.

import {onINP} from 'web-vitals';

onINP(({value}) => {
  // Log the value to the console, or send it to your analytics provider.
  console.log(value);
});

web-vitalsके बारे में ज़्यादा पढ़ें. साथ ही, DevTools कंसोल में मेज़रमेंट करने का तरीका जानें.

Web Vitals का Chrome एक्सटेंशन

Web Vitals एक्सटेंशन, CrUX एपीआई से मिले डेटा के आधार पर, आपके उपयोगकर्ताओं को पेज पर मिलने वाले अनुभव की खास जानकारी देता है. साथ ही, पेज पर मौजूदा विज़िट के दौरान, सीवीडब्ल्यू और अहम मेट्रिक की रीयल-टाइम वैल्यू भी दिखाता है.

Chrome के लिए, Web Vitals एक्सटेंशन इंस्टॉल करें.

परफ़ॉर्मेंस से जुड़ी समस्याओं का पता लगाना (लैब डेटा)

Lighthouse के उपयोगकर्ता फ़्लो का इस्तेमाल करना

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

Lighthouse के उपयोगकर्ता फ़्लो का इस्तेमाल करके, इंटरैक्शन की एक ही सीरीज़ को ऑटोमेट किया जा सकता है. Lighthouse 9.6 से, उपयोगकर्ता फ़्लो में आईएनपी की सुविधा उपलब्ध है.

टूल की उपलब्धता से जुड़ी जानकारी

• Chrome के लिए उपयोगकर्ता अनुभव से जुड़ी रिपोर्ट (CrUX)
  • BigQuery: आईएनपी, interaction_to_next_paint के तौर पर उपलब्ध है
  • CrUX API: आईएनपी, interaction_to_next_paint के तौर पर उपलब्ध है
  • CrUX डैशबोर्ड: इसमें आईएनपी का डेटा शामिल है
• PageSpeed Insights
  • pagespeed.web.dev: CrUX एपीआई से मिला, पेज-लेवल और ऑरिजिन-लेवल का आईएनपी फ़ील्ड डेटा, 'पेज के रिस्पॉन्स में लगने वाला समय' के तौर पर दिखता है
  • PSI API: आईएनपी, INTERACTION_TO_NEXT_PAINT_MS के तौर पर उपलब्ध है
• web-vitals की JS लाइब्रेरी
  • web-vitals में, आईएनपी की सुविधा उपलब्ध है
• Web Vitals का Chrome एक्सटेंशन
  • इसमें, लोकल आईएनपी मेज़रमेंट और CrUX एपीआई से मिलने पर, आईएनपी फ़ील्ड डेटा शामिल होता है
• Lighthouse
  • DevTools में Lighthouse पैनल: Chrome Canary (104) में, 'टाइमस्पैन' मोड में आईएनपी मेज़रमेंट की सुविधा उपलब्ध है
  • Lighthouse npm मॉड्यूल: टाइमस्पैन में आईएनपी मेज़रमेंट की सुविधा उपलब्ध है. सिंथेटिक इनपुट के लिए, Puppeteer का इस्तेमाल करें

आने वाले समय में किए जाने वाले काम और सुझाव/राय देने या शिकायत करने का अनुरोध

आने वाले समय में, Chrome की टूलिंग टीमें, डीबग करने की सुविधाओं और आईएनपी के लिए ऑप्टिमाइज़ेशन के सुझावों पर काम करती रहेंगी.

अगर आपको मेट्रिक की उपयोगिता से लेकर, मेज़रमेंट में आसानी से जुड़ी किसी भी चीज़ के बारे में सुझाव/राय देनी है या शिकायत करनी है, तो कृपया web-vitals-feedback Google ग्रुप पर अपनी राय/सुझाव या शिकायत सबमिट करें.