تعديل على خططنا لقياس معدّل الاستجابة على الويب
في وقت سابق من هذا العام، شارك فريق مقاييس السرعة في Chrome بعض الأفكار التي كنا نفكر فيها لإنشاء مقياس جديد لسرعة الاستجابة. نريد تصميم مقياس يلتقط بشكل أفضل وقت الاستجابة الشامل للأحداث الفردية ويقدّم صورة أكثر شمولية لسرعة استجابة الصفحة بشكل عام طوال عمرها.
لقد أحرزنا تقدمًا كبيرًا في هذا المقياس خلال الأشهر القليلة الماضية، ونريد مشاركة معلومات حول الطريقة التي نخطط بها لقياس وقت استجابة التفاعل، بالإضافة إلى تقديم بعض خيارات التجميع المحددة التي نفكر فيها في تحديد مدى استجابة صفحة الويب بشكل عام.
نودّ أن نحصل على ملاحظات من المطوّرين ومالكي المواقع الإلكترونية بشأن أيّ من هذه الخيارات سيكون الأنسب لاستجابة صفحاتهم بشكل عام.
قياس وقت استجابة التفاعل
بهدف المراجعة، يسجّل مقياس "مهلة الاستجابة الأولى" (FID) جزء التأخير من وقت استجابة الإدخال. وهذا يعني، الفترة بين تفاعل المستخدم مع الصفحة والوقت الذي تكون فيه معالِجات الأحداث قابلة للتشغيل.
من خلال هذا المقياس الجديد، نخطط لتوسيع نطاقه ليشمل المدة الكاملة للحدث، بدءًا من البيانات الأولية التي أدخلها المستخدم وحتى عرض الإطار التالي بعد تشغيل جميع معالِجات الأحداث.
نخطط أيضًا لقياس
التفاعلات
بدلاً من الأحداث الفردية. التفاعلات هي مجموعات من الأحداث التي يتم إرسالها كجزء من إيماءة المستخدم المنطقية نفسها (على سبيل المثال:
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 تفاعلات مقارنةً بالميزانية واختر قيمة من تلك القائمة اعتمادًا على إجمالي عدد التفاعلات. من خلال قياس عدد التفاعلات (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});
إضافة ملاحظات
ونودّ تشجيع المطوّرين على تجربة مقاييس الاستجابة الجديدة هذه على مواقعهم الإلكترونية، وإعلامنا في حال اكتشاف أي مشكلة.
أرسل أي ملاحظات عامة حول الأساليب الموضحة هنا إلى مجموعة Google web-vitals-feedback على Google مع "[مقاييس الاستجابة]" في سطر الموضوع. نحن نتطلع حقًا إلى سماع رأيك!