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

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

Hongbo Song

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

เมตริกนี้มีความคืบหน้าไปมากในช่วง 2-3 เดือนที่ผ่านมา และเรา เราจึงต้องการแจ้งข้อมูลอัปเดตเกี่ยวกับแผนการวัดเวลาในการตอบสนองของการโต้ตอบด้วย อย่างเช่นการแนะนำตัวเลือกการรวมข้อมูลที่เฉพาะเจาะจง 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 มิลลิวินาที

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

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

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

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

เวลาในการตอบสนองของการโต้ตอบเดียวที่ใหญ่ที่สุดเมื่อเทียบกับงบประมาณ จากตัวอย่างข้างต้น จะเป็น 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});

ความคิดเห็น

เราต้องการกระตุ้นให้นักพัฒนาแอปลองใช้เมตริกการปรับเปลี่ยนตามอุปกรณ์ใหม่ใน เว็บไซต์ของพวกเขา และแจ้งให้เราทราบหากคุณพบปัญหาใดๆ

โปรดส่งอีเมลความคิดเห็นทั่วไปเกี่ยวกับแนวทางที่ระบุไว้ที่นี่ไปยัง web-vitals-feedback Google กลุ่มที่มี "[เมตริกการตอบกลับ]" ในบรรทัดเรื่อง เรากำลังพิจารณา หวังว่าเราจะได้ฟังสิ่งที่คุณคิด