हमें खुशी है कि नई रिस्पॉन्सिव रिस्पॉन्स मेट्रिक, इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) के लिए टूल की सुविधा का पहला राउंड उपलब्ध है. मेट्रिक के बारे में जानने के लिए, आईएनपी मेट्रिक की आधिकारिक गाइड देखें.
सुझाया गया मेज़रमेंट
आईएनपी मेज़र करने का मकसद यह जानना होता है कि आपका पेज, उपयोगकर्ता के इनपुट का कितनी तेज़ी से जवाब देता है. व्यावहारिक डेटा पाने का सिर्फ़ एक तरीका यह है कि फ़ील्ड के डेटा का इस्तेमाल करके यह आकलन करें कि आपकी साइट पर आने वाले असल उपयोगकर्ताओं के लिए आपका पेज कैसा परफ़ॉर्म कर रहा है.
लैब में आईएनपी को मेज़र करने से, इवेंट के समय को बेहतर तरीके से समझने में मदद मिलती है और यह भी पता चलता है कि ऑप्टिमाइज़ेशन की ज़रूरत कहां है. लैब टूल, पेज के साथ अपने-आप इंटरैक्ट नहीं करते. इसलिए, आकलन करते समय उन्हें मैन्युअल इनपुट की ज़रूरत होती है या फिर उन्हें Puppeteer जैसे ऑटोमेशन टूल की मदद से स्क्रिप्ट करना पड़ता है. जब उपयोगकर्ताओं के सामान्य अनुभवों के आधार पर अहम इंटरैक्शन का पता चलता है, तो उनसे जुड़ी समस्याओं को पहचानने या स्क्रिप्ट के मुताबिक काम करने की कोशिश की जा सकती है. साथ ही, रिग्रेशन को रोकने के लिए, सीआई टेस्ट शामिल किए जा सकते हैं.
जानें कि आपके उपयोगकर्ताओं को कैसा अनुभव मिल रहा है (फ़ील्ड डेटा)
PageSpeed Insights पर जाएं
PageSpeed Insights टूल, Chrome User Experience (CrUX) Report API से फ़ील्ड डेटा लेता है. साथ ही, आपके पेज और ऑरिजिन की पिछले 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 कंसोल में मेज़र करने के तरीके के बारे में ज़्यादा पढ़ें.
वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाला Chrome एक्सटेंशन
वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाले एक्सटेंशन से, आपके उपयोगकर्ताओं के पेज की परफ़ॉर्मेंस की खास जानकारी (CrUX API से) और CWV की रीयल-टाइम वैल्यू और पेज पर मौजूदा विज़िट की मुख्य मेट्रिक, दोनों मिलती हैं.
Chrome के लिए, वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाला एक्सटेंशन इंस्टॉल करें.
परफ़ॉर्मेंस की समस्याओं का पता लगाना (लैब डेटा)
लाइटहाउस यूज़र फ़्लो का इस्तेमाल करें
DevTools के लाइटहाउस पैनल में मौजूद नए टाइमस्पैन मोड की मदद से, Lighthouse शुरू करें. इस रिपोर्ट में अब आईएनपी और एक ऑडिट शामिल है, ताकि रिस्पॉन्स से जुड़ी किसी भी समस्या का पता लगाया जा सके.
लाइटहाउस यूज़र फ़्लो का इस्तेमाल करके, इंटरैक्शन की एक जैसी सीरीज़ को अपने-आप लागू किया जा सकता है. आईएनपी मेट्रिक, Lighthouse 9.6 के बाद से यूज़र फ़्लो में उपलब्ध है.
टूल की उपलब्धता की जानकारी
- Chrome के लिए उपयोगकर्ता अनुभव रिपोर्ट (CrUX)
- BigQuery: आईएनपी,
interaction_to_next_paintके तौर पर उपलब्ध है - CrUX API: आईएनपी,
interaction_to_next_paintके तौर पर उपलब्ध है - CrUX डैशबोर्ड: इसमें आईएनपी डेटा शामिल है
- BigQuery: आईएनपी,
- PageSpeed Insights
- pagespeed.web.dev: CrUX एपीआई का पेज-लेवल और ऑरिजिन-लेवल आईएनपी फ़ील्ड डेटा, 'इंटरैक्शन टू नेक्स्ट पेंट' के तौर पर दिखाया गया
- PSI एपीआई: आईएनपी,
INTERACTION_TO_NEXT_PAINT_MSके तौर पर उपलब्ध है
web-vitalsJS लाइब्रेरीweb-vitalsमें आईएनपी की सहायता शामिल है
- वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाला Chrome एक्सटेंशन
- इसमें लोकल INP मेज़रमेंट और INP फ़ील्ड का डेटा शामिल होता है, बशर्ते CrUX API से यह डेटा उपलब्ध हो
- लाइटहाउस
- DevTools में लाइटहाउस पैनल: Chrome कैनरी में 'timespan' मोड में, आईएनपी मेज़रमेंट उपलब्ध है (104)
- लाइटहाउस एनपीएम मॉड्यूल: आईएनपी मेज़रमेंट, टाइमस्पैन में उपलब्ध है (सिंथेटिक इनपुट के लिए puppeteer का इस्तेमाल करें)
आने वाले समय में होने वाले काम और सुझाव, शिकायत या राय का अनुरोध
आने वाले समय में, Chrome की टूलिंग टीमें, आईएनपी के लिए डीबग करने की क्षमताओं और ऑप्टिमाइज़ेशन के सुझावों पर निवेश करना जारी रखेंगी.
अगर मेट्रिक की उपयोगिता से लेकर किसी भी चीज़ के बारे में आपका कोई सुझाव, शिकायत या राय है, तो कृपया उसे वेब-वाइटल-फ़ीडबैक Google ग्रुप को भेजें.