वेब पर जवाब मिलने की संभावना को मापने से जुड़े हमारे प्लान से जुड़ा अपडेट.
इस साल की शुरुआत में, Chrome स्पीड मेट्रिक टीम ने कुछ ऐसे आइडिया शेयर किए थे जिन पर हम नई रिस्पॉन्सिव मेट्रिक वाली मेट्रिक के लिए विचार कर रहे थे. हम एक ऐसी मेट्रिक डिज़ाइन करना चाहते हैं, जो अलग-अलग इवेंट की शुरू से लेकर आखिर तक इंतज़ार के समय को बेहतर तरीके से कैप्चर करे. साथ ही, यह भी दिखाना है कि किसी पेज से पेज का रिस्पॉन्स मिलने में कितना समय लगा.
पिछले कुछ महीनों में हमने इस मेट्रिक में काफ़ी तरक्की की है. हम आपको इस बारे में अपडेट देना चाहते हैं कि इंटरैक्शन के इंतज़ार में लगने वाले समय को मापने के साथ-साथ एग्रीगेशन के कुछ खास विकल्प पेश करने हैं.
हम डेवलपर और साइट के मालिकों से यह सुझाव लेना चाहेंगे कि इनमें से कौनसा विकल्प उनके पेजों के लिए इनपुट के हिसाब से सबसे सही होगा.
इंटरैक्शन इंतज़ार का समय मापें
समीक्षा के तौर पर, फ़र्स्ट इनपुट डिले (एफ़आईडी) मेट्रिक, इनपुट के इंतज़ार के समय का देरी वाला हिस्सा कैप्चर करती है. इसका मतलब है कि उपयोगकर्ता के पेज से इंटरैक्ट करने के समय से लेकर, इवेंट हैंडलर चलाने की अनुमति मिलने तक के बीच का समय.
इस नई मेट्रिक की मदद से, हम इसे पूरे इवेंट की अवधि को कैप्चर करने के लिए उपलब्ध कराने की योजना बना रहे हैं. इसमें उपयोगकर्ता के शुरुआती इनपुट से लेकर सभी इवेंट हैंडलर के चलने के बाद, अगले फ़्रेम को पेंट करने तक का समय शामिल है.
हम अलग-अलग इवेंट के बजाय, इंटरैक्शन को मेज़र करने की भी योजना बना रहे हैं. इंटरैक्शन ऐसे इवेंट के ग्रुप होते हैं जो
उपयोगकर्ता के लॉजिकल जेस्चर के तौर पर भेजे जाते हैं. उदाहरण के लिए: pointerdown, click, pointerup.
अलग-अलग इवेंट की अवधि के एक ग्रुप से, इंटरैक्शन में लगने वाले कुल इंतज़ार का समय मापने के लिए, हम दो संभावित तरीकों पर विचार कर रहे हैं:
- इवेंट की ज़्यादा से ज़्यादा अवधि: इंटरैक्शन इंतज़ार का समय, इंटरैक्शन ग्रुप में किसी भी इवेंट की सबसे बड़ी एक इवेंट अवधि के बराबर होता है.
- इवेंट के इंतज़ार का कुल समय: इंटरैक्शन के इंतज़ार का समय, इवेंट की कुल अवधि को जोड़कर निकाला जाता है. इसमें ओवरलैप को अनदेखा किया जाता है.
उदाहरण के लिए, नीचे दिए गए डायग्राम में बटन दबाने वाला इंटरैक्शन दिखाया गया है. इसमें keydown और keyup इवेंट शामिल हैं. इस उदाहरण में, इन दोनों इवेंट की
अवधि ओवरलैप है. कुंजी प्रेस इंटरैक्शन की इंतज़ार के समय को मापने के लिए,
हम max(keydown duration, keyup duration) या sum(keydown duration, keyup duration) - duration overlap का इस्तेमाल कर सकते हैं:
हर तरीके के अपने फ़ायदे और नुकसान हैं. इंतज़ार का समय तय करने से पहले, हम ज़्यादा डेटा और सुझाव इकट्ठा करना चाहते हैं.
प्रति पेज सभी इंटरैक्शन एग्रीगेट करें
सभी इंटरैक्शन की इंतज़ार के समय का आकलन करने के बाद, अगला कदम पेज विज़िट का कुल स्कोर तय करना होता है, जिसमें एक से ज़्यादा इंटरैक्शन हो सकते हैं.
कई विकल्पों को एक्सप्लोर करने के बाद, हमने नीचे दिए गए सेक्शन में बताई गई रणनीतियों के हिसाब से अपनी पसंद के विकल्प तय किए हैं. फ़िलहाल, हम हर रणनीति के लिए Chrome पर असल उपयोगकर्ता का डेटा इकट्ठा कर रहे हैं. जब हमें काफ़ी डेटा इकट्ठा करने का समय मिल जाएगा, तब हम अपनी खोज के नतीजों को पब्लिश करेंगे. हालांकि, हम साइट के मालिकों से सीधे सुझाव भी लेते हैं कि उनके पेजों पर मौजूद इंटरैक्शन के पैटर्न को किस रणनीति से सबसे सही तरीके से दिखाया जा सकेगा.
एग्रीगेशन की रणनीतियों के विकल्प
इनमें से हर एक रणनीति को समझाने के लिए, चार इंटरैक्शन वाले पेज विज़िट के उदाहरण पर विचार करें:
| इंटरैक्शन | इंतज़ार का समय |
|---|---|
| क्लिक करें | 120 मि॰से॰ |
| क्लिक करें | 20 मि॰से॰ |
| बटन दबाने पर आवाज़ | 60 मि॰से॰ |
| बटन दबाने पर आवाज़ | 80 मि॰से॰ |
सबसे खराब इंटरैक्शन इंतज़ार का समय
किसी पेज पर होने वाले इंटरैक्शन का सबसे बड़ा और इंतज़ार का समय. ऊपर दिए गए इंटरैक्शन के उदाहरण के लिए, दिए गए उदाहरण में बताया गया है कि इंटरैक्शन का इंतज़ार का समय 120 मि॰से॰ होगा.
बजट की रणनीतियां
उपयोगकर्ता अनुभव पर किए गए रिसर्च से पता चलता है कि कुछ थ्रेशोल्ड से कम इंतज़ार के समय को शायद उपयोगकर्ता नेगेटिव न मानें. इस रिसर्च के आधार पर, हम हर तरह के इवेंट के लिए, इन थ्रेशोल्ड का इस्तेमाल करके कई बजट रणनीतियां बनाने पर विचार कर रहे हैं:
| इंटरैक्शन किस तरह का है | बजट की सीमा |
|---|---|
| क्लिक/टैप करें | 100 मि॰से॰ |
| खींचें और छोड़ें | 100 मि॰से॰ |
| कीबोर्ड | 50 मि॰से॰ |
इनमें से हर रणनीति सिर्फ़ उस इंतज़ार के समय पर विचार करेगी जो हर इंटरैक्शन के लिए तय किए गए बजट के थ्रेशोल्ड से ज़्यादा है. ऊपर दिए गए उदाहरण पेज विज़िट का इस्तेमाल करने पर, बजट से ज़्यादा रकम इस तरह दिखाई जाएगी:
| इंटरैक्शन | इंतज़ार का समय | बजट से ज़्यादा इंतज़ार का समय |
|---|---|---|
| क्लिक करें | 120 मि॰से॰ | 20 मि॰से॰ |
| क्लिक करें | 20 मि॰से॰ | 0 मि॰से॰ |
| बटन दबाने पर आवाज़ | 60 मि॰से॰ | 10 मि॰से॰ |
| बटन दबाने पर आवाज़ | 80 मि॰से॰ | 30 मि॰से॰ |
बजट की तुलना में सबसे खराब इंटरैक्शन इंतज़ार का समय
बजट के मुकाबले सिंगल इंटरैक्शन का सबसे बड़ा इंतज़ार का समय. ऊपर दिए गए उदाहरण का इस्तेमाल करने पर, स्कोर max(20, 0, 10, 30) = 30 ms होगा.
बजट के मुकाबले कुल इंटरैक्शन इंतज़ार का समय
बजट के ऊपर सभी इंटरैक्शन के इंतज़ार के समय का योग. ऊपर दिए गए उदाहरण का इस्तेमाल करने पर, स्कोर (20 + 0 + 10 + 30) = 60 ms होगा.
बजट के हिसाब से इंटरैक्शन का औसत इंतज़ार का समय
कुल ओवर-बजट इंटरैक्शन इंतज़ार के समय को इंटरैक्शन की कुल संख्या से विभाजित करने पर मिलने वाली संख्या. ऊपर दिए गए उदाहरण का इस्तेमाल करने पर स्कोर (20 + 0 + 10 + 30) / 4 = 15 ms होगा.
हाई क्वानटाइल अनुमान
बजट के मुकाबले सबसे बड़ी इंटरैक्शन इंतज़ार के समय का हिसाब लगाने के विकल्प के तौर पर, हमने ज़्यादा क्वानटाइल अनुमान का इस्तेमाल करने पर भी विचार किया. यह उन वेब पेजों के मुकाबले ठीक होना चाहिए जिन पर बहुत ज़्यादा इंटरैक्शन होते हैं और जिनमें बहुत ज़्यादा आउटलेयर होने की संभावना होती है. हमने अनुमान लगाने की दो ऐसी संभावित रणनीतियों की पहचान की है जो बहुत अच्छी क्वालिटी की हैं:
- पहला विकल्प: बजट के हिसाब से सबसे बड़े और दूसरे सबसे बड़े इंटरैक्शन को ट्रैक करें. हर 50 नए इंटरैक्शन के बाद, 50 के पिछले सेट में से सबसे बड़े इंटरैक्शन को छोड़ दें और मौजूदा 50 के सेट में से सबसे बड़े इंटरैक्शन को जोड़ें. फ़ाइनल वैल्यू, बजट के हिसाब से सबसे ज़्यादा बचा हुआ इंटरैक्शन होगा.
- दूसरा विकल्प: बजट के हिसाब से 10 सबसे बड़े इंटरैक्शन का हिसाब लगाएं और इंटरैक्शन की कुल संख्या के आधार पर उस सूची से कोई वैल्यू चुनें. इंटरैक्शन की कुल संख्या दिए जाने पर, 500 से ज़्यादा इंटरैक्शन वाले पेजों के लिए (N / 50 + 1) सबसे बड़ी वैल्यू या 10वीं वैल्यू चुनें.
JavaScript में इन विकल्पों का आकलन करना
नीचे दिए गए कोड के उदाहरण का इस्तेमाल करके, ऊपर दी गई पहली तीन रणनीतियों की वैल्यू तय की जा सकती है. ध्यान दें कि JavaScript में किसी पेज पर होने वाले इंटरैक्शन की कुल संख्या को अभी तक मेज़र नहीं किया जा सकता. इसलिए, इस उदाहरण में बजट रणनीति या ज़्यादा संख्या में अनुमान लगाने वाली रणनीतियों के लिए औसत इंटरैक्शन शामिल नहीं है.
const interactionMap = new Map();
let worstLatency = 0;
let worstLatencyOverBudget = 0;
let totalLatencyOverBudget = 0;
new PerformanceObserver((entries) => {
for (const entry of entries.getEntries()) {
// Ignore entries without an interaction ID.
if (entry.interactionId > 0) {
// Get the interaction for this entry, or create one if it doesn't exist.
let interaction = interactionMap.get(entry.interactionId);
if (!interaction) {
interaction = {latency: 0, entries: []};
interactionMap.set(entry.interactionId, interaction);
}
interaction.entries.push(entry);
const latency = Math.max(entry.duration, interaction.latency);
worstLatency = Math.max(worstLatency, latency);
const budget = entry.name.includes('key') ? 50 : 100;
const latencyOverBudget = Math.max(latency - budget, 0);
worstLatencyOverBudget = Math.max(
latencyOverBudget,
worstLatencyOverBudget,
);
if (latencyOverBudget) {
const oldLatencyOverBudget = Math.max(interaction.latency - budget, 0);
totalLatencyOverBudget += latencyOverBudget - oldLatencyOverBudget;
}
// Set the latency on the interaction so future events can reference.
interaction.latency = latency;
// Log the updated metric values.
console.log({
worstLatency,
worstLatencyOverBudget,
totalLatencyOverBudget,
});
}
}
// Set the `durationThreshold` to 50 to capture keyboard interactions
// that are over-budget (the default `durationThreshold` is 100).
}).observe({type: 'event', buffered: true, durationThreshold: 50});
सुझाव/राय दें या शिकायत करें
हम डेवलपर को सलाह देना चाहते हैं कि वे अपनी साइटों पर इन नए रिस्पॉन्सिवनेस मेट्रिक को आज़माएं. साथ ही, अगर आपको कोई समस्या मिलती है, तो हमें बताएं.
Google ग्रुप के लिए यहां बताए गए web-vitals-feedback सेक्शन में बताए गए तरीकों के बारे में, कोई भी सामान्य सुझाव ईमेल से ईमेल करें. इसकी सब्जेक्ट लाइन में "[रिस्पॉन्सिवनेस मेट्रिक]" शामिल होना चाहिए. हम आपके विचार जानने के लिए उत्सुक हैं!