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

Brendan Kenny

Elizabeth Sweeny

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

सुझाया गया मेज़रमेंट

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

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

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

PageSpeed Insights पर जाएं

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

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

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

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

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 API से, आपके उपयोगकर्ताओं के पेज की परफ़ॉर्मेंस की खास जानकारी के साथ-साथ, सीडब्ल्यूवी की रीयल-टाइम वैल्यू और पेज पर मौजूदा विज़िट की मुख्य मेट्रिक, दोनों की जानकारी मिलती है.

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

परफ़ॉर्मेंस से जुड़ी समस्याओं का विश्लेषण करना (लैब डेटा)

लाइटहाउस यूज़र फ़्लो का इस्तेमाल करें

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

Lighthouse यूज़र फ़्लो का इस्तेमाल करके, एक ही सीरीज़ को ऑटोमेटेड किया जा सकता है. INP, Lighthouse 9.6 के बाद से यूज़र फ़्लो में उपलब्ध है.

टूल की उपलब्धता की जानकारी

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

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

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

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