INP คืออะไร? วิธีวัดและปรับปรุงประสิทธิภาพการตอบสนองของหน้าเว็บ

ที่อยู่ URL

developer.chrome.com/docs/web-platform/optimize-inp

องค์ประกอบของ INP

• Input delay (ความหน่วงของอินพุต): “เริ่มต้นเมื่อผู้ใช้เริ่มโต้ตอบกับหน้าเว็บ และสิ้นสุดเมื่อ event callbacks สำหรับการโต้ตอบนั้นเริ่มทำงาน”
• Processing duration (ระยะเวลาประมวลผล): “ประกอบด้วยเวลาที่ใช้ในการทำงานของ event callbacks ให้เสร็จสมบูรณ์”
• Presentation delay (ความหน่วงในการแสดงผล): หลักฐานที่มีอยู่ยืนยันว่านี่คือองค์ประกอบที่สาม แต่ไม่มีคำจำกัดความที่สมบูรณ์; การโต้ตอบประกอบด้วย “ความหน่วงของอินพุต ระยะเวลาประมวลผล และความหน่วงในการแสดงผล”

คำแนะนำที่สามารถนำไปปฏิบัติได้

• ทำให้ทุกองค์ประกอบของการโต้ตอบ “สั้นที่สุดเท่าที่จะเป็นไปได้” แทนที่จะปรับเฉพาะ input delay เพียงอย่างเดียว
• สำหรับ input delay สูง ให้ตรวจสอบงานอื่นที่ครอบครอง main thread ก่อนที่ callbacks ของการโต้ตอบจะเริ่มทำงาน; การโต้ตอบนั้น “อาจไม่ใช่สาเหตุโดยตรงของ INP ที่ช้า”
• สำหรับ processing duration สูง ให้ลดหรือเลื่อนงานที่ดำเนินการโดย event handlers เพราะ “event handlers ของการโต้ตอบเป็นสาเหตุโดยตรงของ INP ที่ช้า”
• ตรวจสอบ listeners ทั้งจาก first-party, framework, library และ third-party: “โค้ดใดๆ ที่ทำงานใน event listener ใดๆ จะทำให้การโต้ตอบล่าช้า”
• สำหรับ presentation delay สูง ให้ตรวจสอบงานเรนเดอร์ของเบราว์เซอร์หลังจาก callbacks แต่ข้อมูลที่มีอยู่ไม่ได้ระบุคำแนะนำที่สมบูรณ์ของ Chrome

หลักฐานไม่เพียงพอที่จะอ้างอิงคำจำกัดความของ presentation delay หรือคำแนะนำในการแก้ไขทั้งหมดอย่างสมบูรณ์

เกณฑ์ของ INP

• ต่ำกว่า 200 มิลลิวินาที: ดี
• ระหว่าง 200 ถึง 500 มิลลิวินาที: ต้องปรับปรุง
• มากกว่า 500 มิลลิวินาที: แย่