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