फ़ीडबैक चाहिए: रिस्पॉन्सिव परफ़ॉर्मेंस के लिए एक्सपेरिमेंटल मेट्रिक

वेब पर रिस्पॉन्सिवनेस को मापने के हमारे प्लान के बारे में अपडेट.

Hongbo Song

इस साल की शुरुआत में, Chrome स्पीड मेट्रिक्स टीम ने आइडिया मिल रहे थे जिनके लिए हम नई रिस्पॉन्सिवनेस मेट्रिक होगी. हम एक ऐसी मेट्रिक बनाना चाहते हैं जो इसमें अलग-अलग इवेंट के लाइव होने में लगने वाला समय शामिल होता है. साथ ही, इससे इवेंट की पूरी जानकारी मिलती है यह हमेशा के लिए किसी पेज के रिस्पॉन्स में लगने वाला समय होता है.

पिछले कुछ महीनों में हमने इस मेट्रिक में काफ़ी तरक्की की है और हम आपको इंटरैक्शन में लगने वाले समय को मापने के तरीके के बारे में जानकारी देना चाहते हैं एग्रीगेशन के कुछ खास विकल्पों के बारे में बताएं, जिनकी परफ़ॉर्मेंस की जांच की जा रही है का जवाब देने के लिए इस्तेमाल किया जा सकता है.

हम डेवलपर और साइट के मालिकों से सुझाव लेना चाहेंगे, ताकि कुल इनपुट के हिसाब से, इनमें से कौनसा विकल्प सबसे सही होगा के रिस्पॉन्सिव होने में मदद मिलती है.

इंटरैक्शन में लगने वाले समय को मेज़र करना

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

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

हमने अपने समाचार संगठन के लिए, इंटरैक्शन इस्तेमाल करने में मदद मिलती है. इंटरैक्शन ऐसे इवेंट के ग्रुप होते हैं जो उपयोगकर्ता के एक ही लॉजिकल जेस्चर के हिस्से के तौर पर भेजा जाए (उदाहरण के लिए: pointerdown, click, और pointerup).

किसी इवेंट के ग्रुप से इंटरैक्शन के इंतज़ार का कुल समय मेज़र करने का तरीका वीडियो बनाते समय, हम दो संभावित तरीकों पर विचार कर रहे हैं:

• इवेंट में लगने वाला ज़्यादा से ज़्यादा समय: इंटरैक्शन के इंतज़ार का समय, सबसे ज़्यादा समय के बराबर है इंटरैक्शन ग्रुप में किसी भी इवेंट से होने वाले एक इवेंट की अवधि.
• इवेंट का कुल समय: इंटरैक्शन के इंतज़ार का समय, सभी इवेंट का कुल समय होता है अवधि के लिए.

उदाहरण के लिए, नीचे दिए गए डायग्राम में कुंजी दबाने पर होने वाला इंटरैक्शन दिखाया गया है, जिसमें एक keydown और एक keyup इवेंट के. इस उदाहरण में, एक अवधि के ओवरलैप होने की जानकारी दी गई है पर सेट है. बटन दबाने पर होने वाली बातचीत में लगने वाले समय को मापने के लिए, हम max(keydown duration, keyup duration) या sum(keydown duration, keyup duration) - duration overlap इस्तेमाल कर सकते हैं:

हर तरीके के अपने फ़ायदे और नुकसान हैं. साथ ही, हमें ज़्यादा डेटा इकट्ठा करना है और सुझाव, शिकायत या राय सबमिट करें.

हर पेज पर होने वाले सभी इंटरैक्शन एक साथ जोड़ें

जब हम सभी इंटरैक्शन के शुरू और खत्म होने में लगने वाले समय को मेज़र कर लेते हैं, तो अगले यह चरण किसी पेज विज़िट के लिए कुल स्कोर तय करना है. इसमें ज़्यादा जानकारी होने की संभावना को कम करते हैं.

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

एग्रीगेशन रणनीतियों के विकल्प

नीचे दी गई हर रणनीति को समझाने के लिए, पेज विज़िट का उदाहरण देखें जिसमें चार इंटरैक्शन होते हैं:

सबसे खराब इंटरैक्शन इंतज़ार का समय

किसी पेज पर होने वाला सबसे बड़ा, व्यक्तिगत इंटरैक्शन इंतज़ार का समय. यह देखते हुए उदाहरण के तौर पर ऊपर दिए गए इंटरैक्शन के मामले में, सबसे खराब इंटरैक्शन इंतज़ार का समय 120 होगा मिसे.

बजट की रणनीतियां

उपयोगकर्ता अनुभव रिसर्च यह सुझाव देता है कि उपयोगकर्ता कुछ थ्रेशोल्ड से नीचे के समय को इस तरह नहीं समझ सकते नेगेटिव. इस रिसर्च के आधार पर, हम कई बजट रणनीतियों पर विचार कर रहे हैं हर इवेंट टाइप के लिए, यहां दिए गए थ्रेशोल्ड का इस्तेमाल करके:

इनमें से हर रणनीति सिर्फ़ उस इंतज़ार के समय पर विचार करेगी जो हर इंटरैक्शन के लिए बजट थ्रेशोल्ड. ऊपर दिए गए उदाहरण पेज विज़िट का इस्तेमाल करके, बजट से ज़्यादा रकम इस तरह होगी:

बजट की तुलना में सबसे खराब इंटरैक्शन प्रतीक्षा अवधि

बजट की तुलना में सबसे ज़्यादा एकल इंटरैक्शन इंतज़ार का समय. ऊपर दिए गए उदाहरण का इस्तेमाल करके, स्कोर max(20, 0, 10, 30) = 30 ms होगा.

बजट से ज़्यादा इंटरैक्शन इंतज़ार का समय

बजट पर सभी इंटरैक्शन लेटेंसी का कुल योग. ऊपर दिए गए उदाहरण का इस्तेमाल करके, स्कोर (20 + 0 + 10 + 30) = 60 ms होगा.

बजट की तुलना में इंटरैक्शन में लगने वाला औसत समय

बजट से ज़्यादा इंटरैक्शन के इंतज़ार में लगने वाले कुल समय को, इंटरैक्शन. ऊपर दिए गए उदाहरण का इस्तेमाल करने पर, स्कोर (20 + 0 + 10 + 30) / 4 = 15 ms होगा.

ज़्यादा क्वानटाइल अनुमान

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

• विकल्प 1: इस अवधि के दौरान सबसे बड़े और दूसरे सबसे बड़े इंटरैक्शन पर नज़र रखें और तय करें. हर 50 नए इंटरैक्शन के बाद, सबसे बड़े इंटरैक्शन को के लिए पिछले 50 सेट को चुनें और मौजूदा 50 के सेट में से सबसे बड़े इंटरैक्शन को जोड़ें. फ़ाइनल वैल्यू, बजट से ज़्यादा बचा हुआ इंटरैक्शन होगा.
• दूसरा विकल्प: बजट से ज़्यादा 10 इंटरैक्शन का हिसाब लगाएं और किसी एक उस सूची से कोई वैल्यू असाइन की जा सकती है. दिया गया N कुल इंटरैक्शन, (N / 50 + 1)वां सबसे बड़ा मान या 10वां मान चुनें की तुलना में 500 से ज़्यादा इंटरैक्शन वाले पेजों के लिए.

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});

सुझाव/राय दें या शिकायत करें

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

यहां बताए गए तरीकों पर कोई सामान्य सुझाव, शिकायत या राय ईमेल करें web-vitals-feedback Google "[रिस्पॉन्सिवनेस मेट्रिक]" वाला ग्रुप डालें. हम गड़बड़ी की वजह से, इसके बारे में हमें ज़रूर बताएं!