ต้องการความคิดเห็น: เมตริกการตอบสนองแบบทดลอง

ข้อมูลอัปเดตเกี่ยวกับแผนการวัดการตอบสนองบนเว็บ

Hongbo Song

เมื่อต้นปีนี้ ทีมเมตริกความเร็วของ Chrome ได้แชร์แนวคิดบางส่วนที่เรากำลังพิจารณาเกี่ยวกับเมตริกการตอบสนองใหม่ เราต้องการออกแบบเมตริกที่จับเวลาในการตอบสนองตั้งแต่ต้นจนจบของแต่ละเหตุการณ์ได้ดีขึ้น และให้ภาพรวมของการตอบสนองโดยรวมของหน้าเว็บตลอดอายุการใช้งาน

เรามีความคืบหน้าไปมากเกี่ยวกับเมตริกนี้ในช่วง 2-3 เดือนที่ผ่านมา และอยากจะแชร์ข้อมูลอัปเดตเกี่ยวกับวิธีที่เราวางแผนในการวัดเวลาในการตอบสนองของการโต้ตอบ รวมถึงแนะนำตัวเลือกต่างๆ ในการรวมที่เรากำลังพิจารณาเพื่อคำนวณปริมาณการตอบสนองโดยรวมของหน้าเว็บ

เราอยากทราบความคิดเห็นจากนักพัฒนาซอฟต์แวร์และเจ้าของเว็บไซต์ว่าตัวเลือกเหล่านี้เหมาะที่จะบ่งบอกถึงการตอบสนองของอินพุตโดยรวมของหน้าเว็บ

วัดเวลาในการตอบสนองของการโต้ตอบ

จากการตรวจสอบ เมตริก First Input Delay (FID) จะบันทึกส่วนที่ล่าช้าของเวลาในการตอบสนองของอินพุต ซึ่งก็คือช่วงเวลาระหว่างเวลาที่ผู้ใช้โต้ตอบกับหน้าเว็บไปจนถึงเวลาที่ตัวแฮนเดิลเหตุการณ์เรียกใช้ได้

เราวางแผนที่จะขยายเมตริกใหม่นี้เพื่อให้ครอบคลุมระยะเวลาของเหตุการณ์แบบเต็ม ตั้งแต่อินพุตเริ่มต้นของผู้ใช้ไปจนถึงเฟรมถัดไปหลังจากที่ตัวแฮนเดิลเหตุการณ์ทั้งหมดทำงาน

นอกจากนี้ เรายังวางแผนที่จะวัดการโต้ตอบแทนที่จะวัดทีละเหตุการณ์ การโต้ตอบคือกลุ่มเหตุการณ์ที่ส่งโดยเป็นส่วนหนึ่งของท่าทางสัมผัสของผู้ใช้เชิงตรรกะเดียวกัน (เช่น pointerdown, click, pointerup)

ในการวัดเวลาในการตอบสนองทั้งหมดของการโต้ตอบจากกลุ่มระยะเวลาเหตุการณ์หนึ่งๆ เรากำลังพิจารณาแนวทางที่เป็นไปได้ 2 แนวทาง ดังนี้

• ระยะเวลาเหตุการณ์สูงสุด: เวลาในการตอบสนองของการโต้ตอบจะเท่ากับระยะเวลาของเหตุการณ์เดียวที่ใหญ่ที่สุดจากเหตุการณ์ใดๆ ในกลุ่มการโต้ตอบ
• ระยะเวลาเหตุการณ์ทั้งหมด: เวลาในการตอบสนองของการโต้ตอบคือผลรวมของระยะเวลาเหตุการณ์ทั้งหมด โดยไม่คำนึงถึงการทับซ้อนใดๆ

ตัวอย่างเช่น แผนภาพด้านล่างแสดงการโต้ตอบการกดแป้นที่ประกอบด้วย keydown และเหตุการณ์ keyup ในตัวอย่างนี้มีระยะเวลาทับซ้อนกันระหว่าง 2 เหตุการณ์นี้ หากต้องการวัดเวลาในการตอบสนองของการโต้ตอบของการกดแป้น เราอาจใช้ max(keydown duration, keyup duration) หรือ sum(keydown duration, keyup duration) - duration overlap ดังนี้

แต่ละวิธีมีทั้งข้อดีและข้อเสีย เราจึงอยากรวบรวมข้อมูลและความคิดเห็นเพิ่มเติมก่อนที่จะสรุปคำจำกัดความของเวลาในการตอบสนอง

รวมการโต้ตอบทั้งหมดต่อหน้า

เมื่อเราสามารถวัดเวลาในการตอบสนองตั้งแต่ต้นจนจบของการโต้ตอบทั้งหมดได้แล้ว ขั้นตอนต่อไปคือการกำหนดคะแนนรวมสำหรับการเข้าชมหน้าเว็บ ซึ่งอาจมีการโต้ตอบมากกว่า 1 ครั้ง

หลังจากสำรวจตัวเลือกจำนวนหนึ่ง เราได้จำกัดตัวเลือกให้แคบลงเหลือเพียงกลยุทธ์ที่ระบุไว้ในส่วนต่อไปนี้ ซึ่งแต่ละตัวเลือกเรากำลังรวบรวมข้อมูลผู้ใช้จริงใน Chrome อยู่ เราวางแผนที่จะเผยแพร่ผลการสืบค้นเมื่อรวบรวมข้อมูลได้เพียงพอ แต่ก็ต้องการความคิดเห็นโดยตรงจากเจ้าของเว็บไซต์เช่นกันว่ากลยุทธ์ใดจะสะท้อนถึงรูปแบบการโต้ตอบในหน้าเว็บของตนได้อย่างถูกต้องที่สุด

ตัวเลือกกลยุทธ์การรวม

เพื่อช่วยในการอธิบายกลยุทธ์แต่ละอย่างต่อไปนี้ ลองดูตัวอย่างการเข้าชมหน้าเว็บที่ประกอบด้วยการโต้ตอบ 4 อย่าง ได้แก่

เวลาในการตอบสนองของการโต้ตอบที่แย่ที่สุด

เวลาในการตอบสนองของการโต้ตอบแต่ละครั้งที่มีขนาดใหญ่ที่สุดที่เกิดขึ้นในหน้าเว็บ จากตัวอย่างการโต้ตอบที่ระบุไว้ข้างต้น เวลาในการตอบสนองที่แย่ที่สุดคือ 120 มิลลิวินาที

กลยุทธ์งบประมาณ

การวิจัยประสบการณ์ของผู้ใช้แนะนำว่าผู้ใช้อาจไม่เห็นว่าเวลาในการตอบสนองที่ต่ำกว่าเกณฑ์บางอย่างเป็นเชิงลบ จากการวิจัยนี้ เรากำลังพิจารณากลยุทธ์งบประมาณหลายอย่างที่ใช้ตามเกณฑ์ต่อไปนี้สำหรับกิจกรรมแต่ละประเภท

แต่ละกลยุทธ์เหล่านี้จะพิจารณาเฉพาะเวลาในการตอบสนองที่มากกว่าเกณฑ์งบประมาณต่อการโต้ตอบเท่านั้น เมื่อใช้ตัวอย่างการเข้าชมหน้าเว็บด้านบน จำนวน เกินงบประมาณจะเป็นดังนี้

เวลาในการตอบสนองของการโต้ตอบที่แย่ที่สุดเมื่อเทียบกับงบประมาณ

เวลาในการตอบสนองของการโต้ตอบเดียวที่มากที่สุดภายในงบประมาณ จากตัวอย่างข้างต้น คะแนนจะเป็น max(20, 0, 10, 30) = 30 ms

เวลาในการตอบสนองของการโต้ตอบทั้งหมดเกินงบประมาณ

ผลรวมของเวลาในการตอบสนองทั้งหมดของการโต้ตอบที่สูงกว่างบประมาณ จากตัวอย่างข้างต้น คะแนนจะเป็น (20 + 0 + 10 + 30) = 60 ms

เวลาในการตอบสนองของการโต้ตอบโดยเฉลี่ยเกินงบประมาณ

เวลาในการตอบสนองของการโต้ตอบที่ใช้งบประมาณเกินทั้งหมดหารด้วยจำนวนการโต้ตอบทั้งหมด จากตัวอย่างข้างต้น คะแนนจะเป็น (20 + 0 + 10 + 30) / 4 = 15 ms

การประมาณค่าควอนไทล์สูง

นอกจากนี้ เรายังพิจารณาการใช้ค่าประมาณแบบควอนไทล์สูงในการคำนวณเวลาในการตอบสนองที่มากที่สุดในการโต้ตอบให้น้อยที่สุด ซึ่งควรถือว่ายุติธรรมกับหน้าเว็บที่มีการโต้ตอบสูงและอาจมีแนวโน้มที่จะมีค่าที่ผิดปกติมาก เราได้ระบุกลยุทธ์การประมาณค่าควอนไทล์ที่เป็นไปได้ 2 แบบที่เราชอบ ดังนี้

• ตัวเลือกที่ 1: ติดตามการโต้ตอบที่ใหญ่ที่สุดและใหญ่เป็นอันดับ 2 มากกว่างบประมาณ หลังจากการโต้ตอบใหม่ทุกๆ 50 ครั้ง ให้นำการโต้ตอบที่มากที่สุดจากชุดก่อนหน้าที่มี 50 ครั้งออก และเพิ่มการโต้ตอบที่มากที่สุดจากชุดปัจจุบันที่มี 50 ครั้ง ค่าสุดท้ายจะเป็นการโต้ตอบที่เหลืออยู่มากที่สุดเมื่อเทียบกับงบประมาณ
• ตัวเลือกที่ 2: คำนวณการโต้ตอบได้มากที่สุด 10 ครั้งเหนืองบประมาณ แล้วเลือกค่าจากรายการดังกล่าวโดยขึ้นอยู่กับจำนวนการโต้ตอบทั้งหมด จากการโต้ตอบทั้งหมด N ครั้ง ให้เลือกค่าที่มากที่สุด (N / 50 + 1) หรือค่าที่ 10 สำหรับหน้าเว็บที่มีการโต้ตอบมากกว่า 500 ครั้ง

วัดตัวเลือกเหล่านี้ใน JavaScript

ตัวอย่างโค้ดต่อไปนี้สามารถใช้ระบุค่าของกลยุทธ์ 3 รายการแรกที่แสดงข้างต้น โปรดทราบว่ายังไม่สามารถวัดจำนวนการโต้ตอบทั้งหมดในหน้าเว็บใน 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 Group web-vitals-feedback พร้อม "[เมตริกที่ปรับเปลี่ยนตามอุปกรณ์]" ในบรรทัดเรื่อง เราหวังเป็นอย่างยิ่งว่าจะได้รับ ความคิดเห็นจากคุณ