ข้อมูลการใช้งาน Chrome แสดงให้เห็นว่าเวลา 90% ของผู้ใช้ในหน้าเว็บนั้นเกิดขึ้นหลังจากหน้าเว็บโหลด ดังนั้น การวัดการตอบสนองอย่างละเอียดตลอดวงจรชีวิตของหน้าเว็บจึงเป็นเรื่องสำคัญ เมตริก INP จะประเมินข้อมูลนี้
การตอบสนองที่ดีหมายความว่าหน้าเว็บตอบสนองต่อการโต้ตอบอย่างรวดเร็ว เมื่อหน้าเว็บตอบสนองต่อการโต้ตอบ เบราว์เซอร์จะแสดงการตอบกลับด้วยภาพในเฟรมถัดไปที่แสดง การแสดงผลผลป้อนกลับจะบอกคุณ เช่น มีการเพิ่มสินค้าที่คุณเพิ่มลงในรถเข็นช็อปปิ้งออนไลน์แล้ว เมนูการนำทางบนอุปกรณ์เคลื่อนที่เปิดขึ้นหรือไม่ เนื้อหาของแบบฟอร์มการเข้าสู่ระบบได้รับการตรวจสอบสิทธิ์โดยเซิร์ฟเวอร์หรือไม่ และอื่นๆ
การโต้ตอบบางอย่างอาจใช้เวลานานกว่าการโต้ตอบอื่นๆ โดยปกติ แต่สำหรับการโต้ตอบที่ซับซ้อนเป็นพิเศษ คุณควรแสดงผลป้อนกลับภาพเบื้องต้นอย่างรวดเร็วเพื่อแจ้งให้ผู้ใช้ทราบว่ามีบางอย่างเกิดขึ้น เฟรมถัดไปที่เบราว์เซอร์จะแสดงเป็นโอกาสแรกสุดในการดำเนินการนี้
ดังนั้น วัตถุประสงค์ของ INP ไม่ใช่การวัดผลลัพธ์ทั้งหมดที่จะเกิดขึ้นจากการโต้ตอบ เช่น การดึงข้อมูลเครือข่ายและการอัปเดต UI จากการดำเนินการแบบไม่พร้อมกันอื่นๆ) แต่เป็นการวัด���วลาที่ระบบบล็อกการวาดครั้งถัดไป การตอบสนองด้วยภาพล่าช้าอาจทำให้ผู้ใช้รู้สึกว่าหน้าเว็บตอบสนองไม่เร็วพอ และ INP ได้รับการพัฒนาขึ้นเพื่อช่วยนักพัฒนาซอฟต์แวร์วัดประสบการณ์ของผู้ใช้ในส่วนนี้
ในวิดีโอต่อไปนี้ ตัวอย่างทางด้านขวาให้เห็นภาพทันทีว่าหีบเพลงกำลังเปิดขึ้นมา ตัวอย่างด้านซ้ายแสดงการตอบสนองที่ไม่ดีและผลกระทบที่อาจเกิดขึ้นกับประสบการณ์ของผู้ใช้
คู่มือนี้จะอธิบายวิธีการทํางานของ INP, วิธีวัดผล และชี้ไปยังแหล่งข้อมูลสําหรับการปรับปรุง
INP คืออะไร
INP เป็นเมตริกที่ประเมินการตอบสนองโดยรวมของหน้าเว็บต่อการโต้ตอบของผู้ใช้ โดยสังเกตระยะเวลาในการตอบสนองของการคลิก แตะ และการโต้ตอบด้วยแป้นพิมพ์ทั้งหมดที่เกิดขึ้นตลอดอายุการเข้าชมหน้าเว็บของผู้ใช้ ค่า INP สุดท้ายคือการโต้ตอบที่ยาวที่สุดที่สังเกตได้ โดยที่ไม่ได้สนใจข้อมูลผิดปกติทางสถิติ
INP คำนวณโดยการสังเกตการโต้ตอบทั้งหมดที่เกิดขึ้นกับหน้าเว็บ สําหรับเว็บไซต์ส่วนใหญ่ ระบบจะรายงานการโต้ตอบที่มีเวลาในการตอบสนองแย่ที่สุดเป็น INP
อย่างไรก็ตาม สําหรับหน้าเว็บที่มีการโต้ตอบจํานวนมาก ปัญหาขัดข้องที่เกิดขึ้นแบบสุ่มอาจทําให้การโต้ตอบมีความล่าช้าสูงผิดปกติในหน้าเว็บที่ตอบสนองได้ดี ยิ่งมีการโต้ตอบเกิดขึ้นในหน้าหนึ่งๆ มากเท่าใด ก็ยิ่งมีแนวโน้มที่จะเกิดการโต้ตอบมากขึ้นเท่านั้น
เราจะละเว้นการโต้ตอบที่สูงที่สุด 1 รายการจากการโต้ตอบทุกๆ 50 ครั้ง เพื่อให้การวัดการตอบสนองจริงของหน้าเว็บที่มีการโต้ตอบจํานวนมากดีขึ้น ประสบการณ์การใช้งานหน้าเว็บส่วนใหญ่ไม่มีการโต้ตอบเกิน 50 ครั้ง ระบบจึงรายงานการโต้ตอบที่แย่ที่สุดบ่อยที่สุด จากนั้นระบบจะรายงานเปอร์เซ็นไทล์ที่ 75 ของการดูหน้าเว็บทั้งหมดตามปกติ ซึ่งจะนำค่าผิดปกติออกเพิ่มเติมเพื่อให้ได้ค่าที่ผู้ใช้ส่วนใหญ่ได้รับประสบการณ์หรือดีกว่า
การโต้ตอบคือกลุ่มของตัวแฮนเดิลเหตุการณ์ที่เริ่มทํางานระหว่างท่าทางสัมผัสของผู้ใช้ตามตรรกะเดียวกัน เช่น การโต้ตอบด้วยการ "แตะ" ในอุปกรณ์หน้าจอสัมผัสประกอบด้วยเหตุการณ์หลายรายการ เช่น pointerup, pointerdown และ click การโต้ตอบอาจเกิดจาก JavaScript, CSS, การควบคุมเบราว์เซอร์ในตัว (เช่น องค์ประกอบของแบบฟอร์ม) หรือทั้ง 2 อย่าง
เวลาในการตอบสนองของการโต้ตอบประกอบด้วยระยะเวลาที่ยาวที่สุดเพียงช่วงเดียวของกลุ่มเครื่องจัดการเหตุการณ์ที่กระตุ้นการโต้ตอบ ตั้งแต่เวลาที่ผู้ใช้เริ่มการโต้ตอบไปจนถึงตอนที่เบราว์เซอร์สามารถระบายสีเฟรมได้
คะแนน INP ที่ดีคืออะไร
การปักหมุดป้ายกำกับ เช่น "ดี" หรือ "แย่" บนเมตริกการตอบสนองนั้นทําได้ยาก ในด้านหนึ่ง คุณต้องการส่งเสริมแนวทางปฏิบัติด้านการพัฒนาที่ให้ความสำคัญกับการตอบสนองที่ดี ในทางกลับกัน คุณต้องคำนึงถึงความสามารถของอุปกรณ์ที่ผู้ใช้ใช้เพื่อกำหนดความคาดหวังในการพัฒนาที่ทำได้จริง เนื่องจากความสามารถของอุปกรณ์มีความหลากหลายอย่างมาก
เพื่อให้แน่ใจว่าคุณมอบประสบการณ์ของผู้ใช้ด้วยการตอบสนองที่ดี เกณฑ์ที่ดีในการวัดคือเปอร์เซ็นไทล์ที่ 75 ของการโหลดหน้าเว็บที่บันทึกในช่องนี้ โดยแบ่งกลุ่มระหว่างอุปกรณ์เคลื่อนที่และเดสก์ท็อป
- INP ที่ต่ำกว่าหรือเท่ากับ 200 มิลลิวินาทีหมายความว่าหน้าเว็บมีการตอบสนองที่ดี
- INP ที่มากกว่า 200 มิลลิวินาทีหรือต่ำกว่าหรือที่ 500 มิลลิวินาทีหมายความว่าการตอบสนองของหน้าเว็บต้องปรับปรุง
- INP ที่สูงกว่า 500 มิลลิวินาทีหมายความว่าหน้าเว็บตอบสนองได้ไม่ดี
การโต้ตอบมีอะไรบ้าง
สิ่งขับเคลื่อนหลักของการโต้ตอบมักคือ JavaScript แม้ว่าเบราว์เซอร์จะให้บริการอินเทอร์แอกทีฟผ่านการควบคุมที่ไม่ได้ขับเคลื่อนโดย JavaScript เช่น ช่องทำเครื่องหมาย ปุ่มตัวเลือก และการควบคุมที่ขับเคลื่อนโดย CSS
ระบบจะสังเกตเฉพาะการโต้ตอบประเภทต่อไปนี้ตามวัตถุประสงค์ของ INP
- คลิกโดยใช้เมาส์
- การแตะบนอุปกรณ์ที่มีหน้าจอสัมผัส
- การกดแป้นบนแป้นพิมพ์จริงหรือแป้นพิมพ์บนหน้าจอ
การโต้ตอบจะเกิดขึ้นในเอกสารหลักหรือใน iframe ที่ฝังอยู่ในเอกสาร เช่น การคลิก "เล่น" ในวิดีโอที่ฝัง ผู้ใช้ปลายทางจะไม่ทราบว่ามีอะไรอยู่ใน iframe หรือไม่ ดังนั้นจึงต้องใช้ INP ภายใน iframe เพื่อวัดประสบการณ์ของผู้ใช้สําหรับหน้าระดับบนสุด เนื่องจาก Web API ของ JavaScript ไม่มีสิทธิ์เข้าถึงเนื้อหาของ iframe ข้อมูลนี้จึงอาจแสดงเป็นความแตกต่างระหว่าง CrUX กับ RUM
การโต้ตอบสามารถประกอบด้วยหลายเหต��การณ์ เช่น การกดแป้นพิมพ์ประกอบด้วยเหตุการณ์ keydown, keypress และ keyup การโต้ตอบที่เกิดจากเหตุการณ์ pointerup และ pointerdown เหตุการณ์ที่มีระยะเวลานานที่สุดภายในการโต้ตอบคือปัจจัยที่ส่งผลต่อเวลาในการตอบสนองโดยรวมของการโต้ตอบ
INP ของหน้าเว็บจะคำนวณเมื่อผู้ใช้ออกจากหน้าเว็บ ผลลัพธ์ที่ได้คือค่าเดี่ยวที่แสดงถึงเวลาในการตอบสนองโดยรวมของหน้าเว็บตลอดอายุการใช้งาน INP ต่ำหมายความว่าหน้าเว็บตอบสนองต่ออินพุตของผู้ใช้ได้อย่างเสถียร
INP แตกต่างจาก First Input Delay (FID) อย่างไร
INP เป็นเมตริกที่สืบทอดมาจาก First Input Delay (FID) แม้ว่าเมตริกทั้งสองจะเป็นเมตริกการตอบสนอง แต่ FID จะวัดเฉพาะความล่าช้าในการป้อนข้อมูลของการโต้ตอบครั้งแรกในหน้าเว็บ INP ปรับปรุง FID โดยการสังเกตการโต้ตอบทั้งหมดในหน้าเว็บ ตั้งแต่เวลาในการตอบสนองต่อการป้อนข้อมูล ไปจนถึงเวลาที่ใช้ในการเรียกใช้ตัวแฮนเดิลเหตุการณ์ และสุดท้ายคือเวลาที่เบราว์เซอร์แสดงเฟรมถัดไป
ความแตกต่างเหล่านี้หมายความว่าทั้ง INP และ FID เป็นเมตริกการตอบสนองประเภทต่างๆ เมื่อ FID เป็นเมตริกการตอบสนองในการโหลดที่ออกแบบมาเพื่อประเมินการแสดงผลครั้งแรกของหน้าเว็บต่อ��ู้ใช้ INP จึงเป็นตัวบ่งชี้การตอบสนองโดยรวมที่เชื่อถือได้มากกว่า โดยไม่คำนึงถึงว่าการโต้ตอบกับหน้าเว็บเกิดขึ้นเมื่อใด
จะเกิดอะไรขึ้นหากไม่มีการรายงานค่า INP
หน้าเว็บอาจไม่แสดงค่า INP ปัญหานี้อาจเกิดขึ้นได้จากหลายสาเหตุ ซึ่งรวมถึงสาเหตุต่อไปนี้
- หน้าเว็บโหลดแล้ว แต่ผู้ใช้ไม่ได้คลิก แตะ หรือกดแป้นบนแป้นพิมพ์
- หน้าเว็บโหลดแล้ว แต่ผู้ใช้โต้ตอบกับหน้าเว็บโดยใช้ท่าทางสัมผัสที่ไม่ได้วัด เช่น การเลื่อนหรือวางเมาส์เหนือองค์ประกอบ
- หน้าเว็บมีการเข้าถึงโดยบ็อต เช่น Crawler ของ Search หรือเบราว์เซอร์แบบ Headless ที่ไม่ได้เขียนสคริปต์ให้โต้ตอบกับหน้าเว็บ
วิธีวัด INP
INP สามารถวัดได้ทั้งในภาคสนามและในห้องทดลอง เท่าที่คุณจะจําลองการโต้ตอบของผู้ใช้ในชีวิตจริงได้
ภาคสนาม
เส้นทางในการเพิ่มประสิทธิภาพ INP ควรเริ่มต้นด้วยข้อมูลภาคสนาม ข้อมูลภาคสนามจาก Real User Monitoring (RUM) ที่ดีที่สุดจะให้ข้อมูล INP ของหน้าเว็บ รวมถึงข้อมูลตามบริบทที่ไฮไลต์การโต้ตอบที่เฉพาะเจาะจงซึ่งทำให้เกิดค่า INP เอง ไม่ว่าจะเกิดการโต้ตอบระหว่างหรือหลังการโหลดหน้าเว็บ ประเภทของการโต้ตอบ (การคลิก การกดแป้นพิมพ์ หรือการแตะ) และช่วงเวลาอื่นๆ ที่มีคุณค่าซึ่งช่วยระบุการโต้ตอบส่วนใดที่ส่งผล��่อการตอบสนอง
หากเว็บไซต์มีสิทธิ์รวมอยู่ในรายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) คุณจะดูข้อมูลภาคสนามเกี่ยวกับ INP ได้อย่างรวดเร็วผ่าน CrUX ใน PageSpeed Insights (และ Core Web Vitals อื่นๆ) อย่างน้อยที่สุด คุณจะได้รับภาพระดับต้นทางของ INP ของเว็บไซต์ แต่ในบางกรณี คุณจะได้รับข้อมูลระดับ URL ด้วย
อย่างไรก็ตาม แม้ว่า CrUX จะบอกได้ว่ามีปัญหาหรือไม่ แต่จะไม่บอกสาเหตุของปัญหา โซลูชัน RUM ช่วยให้คุณดูรายละเอียดเพิ่มเติมเกี่ยวกับหน้าเว็บ ผู้ใช้ หรือการโต้ตอบของผู้ใช้ที่ประสบปัญหาด้านการตอบสนองได้ การระบุแหล่งที่มาของ INP กับการโต้ตอบแต่ละรายการจะช่วยหลีกเลี่ยงการคาดเดาและลดความพยายามที่สูญเปล่า
ในห้องทดลอง
คุณควรเริ่มทดสอบในห้องทดลองเมื่อคุณมีข้อมูลภาคสนามที่ชี้ว่าหน้าเว็บมีการโต้ตอบช้า ข้อมูลภาคสนามจะช่วยให้การจำลองการโต้ตอบที่มีปัญหาในห้องทดลองทำได้ง่ายขึ้��มาก
อย่างไรก็ตาม คุณอาจไม่มีข้อมูลภาคสนาม แม้ว่า INP สามารถวัดในเครื่องมือห้องทดลองบางอย่างได้ แต่ค่า INP ที่ได้สำหรับหน้าเว็บระหว่างการทดสอบในห้องทดลองจะขึ้นอยู่กับการโต้ตอบที่เกิดขึ้นระหว่างระยะเวลาการวัด พฤติกรรมของผู้ใช้นั้นคาดเดาได้ยากและเปลี่ยนแปลงได้อย่างมาก ซึ่งหมายความว่าการทดสอบในห้องทดลองอาจไม่แสดงปัญหาการโต้ตอบในลักษณะเดียวกับข้อมูลภาคสนาม นอกจากนี้ เครื่องมือทดสอบบางรายการจะไม่รายงาน INP ของหน้าเว็บเนื่องจากจะสังเกตเฉพาะการโหลดหน้าเว็บโดยไม่มีการโต้ตอบใดๆ ในกรณีเช่นนี้ เวลาการบล็อกทั้งหมด (TBT) อาจใช้เป็นเมตริกพร็อกซีที่สมเหตุสมผลสําหรับ INP แต��ไม่ได้เป็นตัวแทน INP
แม้ว่าเครื่องมือในห้องทดลองจะมีข้อจํากัดในการประเมิน INP ของหน้าเว็บ แต่ก็มีกลยุทธ์บางอย่างในการจำลองการโต้ตอบที่ช้าในห้องทดลอง กลยุทธ์ต่างๆ ได้แก่ การตามกระแสของผู้ใช้ที่เกิดขึ้นบ่อยและการทดสอบการโต้ตอบต่างๆ ตลอดเส้นทาง ตลอดจนการโต้ตอบกับหน้าเว็บในขณะที่เทรดหลักมักจะมีคนเยอะที่สุด เพื่อระบุการโต้ตอบที่ช้าระหว่างส่วนสำคัญของประสบการณ์ของผู้ใช้
วิธีปรับปรุง INP
มีคอลเล็กชันคําแนะนําเกี่ยวกับการเพิ่มประสิทธิภาพ INP เพื่อแนะนํากระบวนการระบุการโต้ตอบที่เกิดขึ้นช้าในภาคสนาม และใช้ข้อมูลในห้องทดลองเพื่อช่วยคุณระบุสาเหตุและเพิ่มประสิทธิภาพ
บันทึกการเปลี่ยนแปลง
บางครั้งอาจพบข้อบกพร่องใน API ที่ใช้ในการวัดเมตริก และบางครั้งอาจพบข้อบกพร่องในคำจำกัดความของเมตริกเอง ด้วยเหตุนี้ บางครั้งจึงอาจต้องมีการเปลี่ยนแปลง และการเปลี่ยนแปลงเหล่านี้อาจแสดงเป็นการปรับปรุงหรือความถดถอยในรายงานภายในและแดชบอร์ดของคุณ
เพื่อช่วยให้คุณจัดการเรื่องนี้ได้ การเปลี่ยนแปลงทั้งหมดในการใช้งานหรือคําจํากัดความของเมตริกเหล่านี้จะแสดงในบันทึกการเปลี่ยนแปลงนี้
หากคุณมีความคิดเห็นเกี่ยวกับเมตริกเหล่านี้ ให้ระบุในกลุ่ม Google Web-vitals-feedback
ทดสอบความรู้ของคุณ
เป้าหมายหลักของเมตริก INP คืออะไร
ระบบจะสังเกตการโต้ตอบประเภทใดต่อไปนี้เพื่อวัตถุประสงค์ในการคํานวณ INP (เลือกได้มากกว่า 1 ข้อ)
"เวลาในการตอบสนอง" ของการโต้ตอบกำหนดสำหรับ INP อย่างไร
INP และ FID แตกต่างกันอย่างไร
ข้อมูล INP อาจไม่พร้อมใช้งานสำหรับหน้าเว็บในเครื่องมือ เช่น PageSpeed Insights ในสถานการณ์ใดบ้าง
กลยุทธ์ใดที่มีประสิทธิภาพมากที่สุดในการจำลองการโต้ตอบที่ช้าในสภาพแวดล้อมห้องทดลอง
✨ แบบทดสอบนี้สร้างโดย Gemini 1.5 และตรวจสอบโดยเจ้าหน้าที่ แชร์ความคิดเห็น