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

Brendan Kenny

Elizabeth Sweeny

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

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

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

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

ध्यान दें: लैब और फ़ील्ड, दोनों तरह के डेटा का फ़ायदा पाने के तरीके के बारे में ज़्यादा जानने के लिए, लैब और फ़ील्ड डेटा अलग-अलग क्यों हो सकते हैं और इस बारे में क्या करना चाहिए के बारे में पढ़ें.

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

PageSpeed Insights पर जाएं

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

इसे 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 एक्सटेंशन

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

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

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

Lighthouse के यूज़र फ़्लो का इस्तेमाल करना

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

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 में आईएनपी सहायता शामिल है
• वेब Vitals का Chrome एक्सटेंशन
  • CrUX API से उपलब्ध होने पर, इसमें लोकल आईएनपी मेज़रमेंट और आईएनपी फ़ील्ड डेटा शामिल होता है
• Lighthouse
  • DevTools में Lighthouse पैनल: Chrome Canary (104) में 'समयावधि' मोड में INP मेज़रमेंट उपलब्ध है
  • Lighthouse npm मॉड्यूल: समयावधि में INP मेज़रमेंट उपलब्ध है (सिंथेटिक इनपुट के लिए puppeteer का इस्तेमाल करें)

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

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

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