التعقيبات المطلوبة: مقياس تجريبي لاستجابة

تحديث بشأن خططنا لقياس مدى الاستجابة على الويب.

Hongbo Song

في وقت سابق من هذا العام، شارك فريق مقاييس السرعة في Chrome بعض الأفكار التي كنا نفكر فيها مقياس سرعة الاستجابة الجديد. نريد تصميم مقياس يسجّل بشكل أفضل وقت الاستجابة الشامل للأحداث الفردية ويقدّم صورة أكثر شمولية الاستجابة العامة للصفحة طوال عمرها.

لقد أحرزنا تقدمًا كبيرًا في هذا المقياس خلال الأشهر القليلة الماضية، أردنا مشاركة تحديث حول كيفية تخطيطنا لقياس وقت استجابة التفاعل أيضًا لنقدّم بعض خيارات التجميع المحددة التي نفكر في قياسها الاستجابة العامة لصفحة الويب.

نودّ تلقّي ملاحظات من المطوّرين ومالكي المواقع الإلكترونية بشأن أي من هذه الخيارات سيكون أكثر تمثيلاً للمدخل العام مدى استجابة صفحاتهم.

قياس وقت استجابة التفاعل

تجدر الإشارة إلى أنّ مقياس مهلة الاستجابة الأولى (FID) يسجّل وقت التأخير من وقت استجابة الإدخال. أي أن الوقت بين عندما يتفاعل المستخدِم مع الصفحة إلى الوقت الذي تكون فيه معالِجات الحدث القدرة على تشغيلها.

باستخدام هذا المقياس الجديد، نخطّط لتوسيع نطاقه ليشمل الحدث بالكامل. المدة، من البيانات التي أدخلها المستخدِم المبدئي إلى أن يتمّ عرض الإطار التالي بعد كلّ معالِجات الأحداث التي تم تشغيلها.

نخطط أيضًا لقياس التفاعلات بدلاً من أحداث فردية التفاعلات عبارة عن مجموعات من الأحداث يتم إرسالها كجزء من إيماءة المستخدم المنطقية نفسها (على سبيل المثال: "pointerdown" و"click" و"pointerup").

قياس إجمالي وقت استجابة التفاعل من مجموعة من الأحداث الفردية ندرس منهجين محتملين هما:

• الحد الأقصى لمدة الحدث: وقت استجابة التفاعل يساوي الأكبر مدة حدث واحد من أي حدث في مجموعة التفاعل.
• إجمالي مدة الحدث: وقت استجابة التفاعل هو مجموع كل الأحداث. والمدد، مع تجاهل أي تداخل.

على سبيل المثال، يوضّح الرسم البياني التالي تفاعل ضغطة مفتاح يتكون من من فعالية keydown وkeyup. في هذا المثال، هناك تداخل في المدة بين هذين الحدثين. لقياس وقت الاستجابة لتفاعل الضغط على المفاتيح، يمكننا استخدام max(keydown duration, keyup duration) أو sum(keydown duration, keyup duration) - duration overlap:

هناك إيجابيات وسلبيات لكل منهج، ونود جمع المزيد من البيانات تعليقات قبل الانتهاء من تحديد وقت الاستجابة.

تجميع كل التفاعلات لكل صفحة

وبمجرد أن نتمكن من قياس وقت الاستجابة التام بين الأطراف لجميع التفاعلات، هو تحديد نتيجة مجمّعة لزيارة إحدى الصفحات، والتي قد تحتوي على أكثر من تفاعل واحد.

بعد استكشاف عدد من الخيارات، حصرنا خياراتنا في والاستراتيجيات الموضحة في القسم التالي، والتي نتناول في وتجميع بيانات المستخدم الحقيقي في Chrome. نحن نخطط لنشر نتائج النتائج بمجرد حصولنا على الوقت لجمع بيانات كافية، لكننا أيضًا نبحث للحصول على الملاحظات المباشرة من مالكي المواقع الإلكترونية حول الاستراتيجية التي يجب تعكس بشكل أكثر دقة أنماط التفاعل على صفحاتهم.

خيارات استراتيجيات التجميع

للمساعدة في شرح كل استراتيجية من الاستراتيجيات التالية، يمكنك الاطّلاع على مثال عن زيارة صفحة. يتكون من أربعة تفاعلات:

أسوأ وقت استجابة للتفاعل

أكبر وقت استجابة للتفاعل الفردي الذي حدث في الصفحة. بناءً على مثال على التفاعلات المذكورة أعلاه، سيكون أسوأ وقت استجابة للتفاعل هو 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. ستكون القيمة النهائية أكبر تفاعل متبقي مقارنةً بالميزانية.
• الخيار 2: احتساب أكبر 10 تفاعلات من الميزانية واختيار من تلك القائمة اعتمادًا على إجمالي عدد التفاعلات. نظرًا لـ N إجمالي التفاعلات، حدد القيمة الأكبر (N / 50 + 1) أو القيمة العاشرة للصفحات التي تحتوي على أكثر من 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 مجموعة تحتوي على "[مقاييس الاستجابة]" في سطر الموضوع. نحن نبحث حقًا أتوق إلى سماع ما تفكر فيه!