ข้อมูลการใช้ 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 เพื่อวัดประสบการณ์ของผู้ใช้สำหรับหน้าเว็บระดับบนสุด เนื่องจาก JavaScript Web API ไม่สามารถเข้าถึงเนื้อหาของ 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 ปัญหานี้อาจเกิดขึ้นได้จากหลายสาเหตุ เช่น
- หน้าเว็บโหลดแล้ว แต่ผู้ใช้ไม่เคยคลิก แตะ หรือกดปุ่มบนแป้นพิมพ์
- หน้าเว็บโหลดแล้ว แต่ผู้ใช้โต้ตอบกับหน้าเว็บโดยใช้ท่าทางสัมผัสที่ไม่ได้วัด เช่น การเลื่อนหรือวางเมาส์เหนือองค์ประกอบ
- บ็อต เช่น โปรแกรมรวบรวมข้อมูลการค้นหา หรือเบราว์เซอร์ที่ไม่มีส่วนหัวซึ่งไม่ได้กำหนดสคริปต์ให้โต้ตอบกับหน้าเว็บเพื่อเข้าถึงหน้าเว็บ
วิธีวัด INP
INP สามารถวัดได้ทั้งในภาคสนามและในห้องทดลอง ในขอบเขตที่คุณสามารถจำลองการโต้ตอบของผู้ใช้อย่างสมจริง
ภาคสนาม
โดยหลักการแล้ว เส้นทางการเพิ่มประสิทธิภาพ INP ของคุณจะเริ่มจากข้อมูลภาคสนาม วิธีที่ดีที่สุดคือข้อมูลช่องจากการตรวจสอบผู้ใช้จริง (RUM) จะให้ทั้งค่า INP ของหน้าเว็บ แต่ยังให้ข้อมูลบริบทที่ไฮไลต์ว่าการโต้ตอบใดส่งผลต่อค่า INP การโต้ตอบเกิดขึ้นระหว่างหรือหลังการโหลดหน้าเว็บ ประเภทของการโต้ตอบ (คลิก การกดแป้นพิมพ์ หรือแตะ) และช่วงเวลาที่มีคุณค่าอื่นๆ ที่จะช่วยให้คุณระบุได้ว่าการโต้ตอบส่วนใดส่งผลต่อการตอบสนอง
หากเว็บไซต์มีสิทธิ์รวมอยู่ในรายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) คุณจะดูข้อมูลภาคสนามเกี่ยวกับ INP ได้อย่างรวดเร็วผ่าน CrUX ใน PageSpeed Insights (และ Core Web Vitals อื่นๆ) อย่างน้อยที่สุด คุณจะได้รับรูปภาพระดับต้นทางของ INP ของเว็บไซต์ แต่ในบางกรณี คุณจะได้รับข้อมูลระดับ URL ด้วย
อย่างไรก็ตาม แม้ว่า CrUX จะบอกคุณได้หากมีปัญหา แต่ก็ไม่สามารถบอกคุณได้ว่าอะไรคือสาเหตุของปัญหา โซลูชัน RUM ช่วยให้คุณดูรายละเอียดเพิ่มเติมเกี่ยวกับหน้าเว็บ ผู้ใช้ หรือการโต้ตอบของผู้ใช้ที่ประสบปัญหาด้านการตอบสนองได้ การระบุแหล่งที่มาของ INP จากการโต้ตอบแต่ละครั้งจะช่วยให้คุณไม่ต้องคาดเดาและใช้ความพยายามอย่างสูญเปล่า
ในห้องทดลอง
หากจะให้ดี คุณควรเริ่มทดสอบในห้องทดลองเมื่อมีข้อมูลภาคสนามที่บ่งบอกว่าหน้าเว็บมีการโต้ตอบช้า ข้อมูลภาคสนามจะช่วยให้การจำลองการโต้ตอบที่มีปัญหาในห้องทดลองทำได้ง่ายขึ้นมาก
อย่างไรก็ตาม คุณอาจไม่มีข้อมูลภาคสนาม แม้ว่า INP จะวัดได้ในเครื่องมือทดสอบบางรายการ แต่ค่า INP ที่ได้จากหน้าเว็บระหว่างการทดสอบในเครื่องมือทดสอบจะขึ้นอยู่กับการโต้ตอบที่ดำเนินการในช่วงระยะเวลาการวัด พฤติกรรมของผู้ใช้นั้นอาจคาดเดาไม่ได้และมีความแปรผันสูง นั่นหมายความว่าการทดสอบของคุณในห้องทดลองอาจไม่แสดงการโต้ตอบกับปัญหาในรูปแบบเดียวกับที่ข้อมูลภาคสนามทำได้ นอกจากนี้ เครื่องมือห้องทดลองบางอย่างจะไม่รายงาน INP ของหน้าเว็บเพราะจะสังเกตเฉพาะการโหลดหน้าเว็บโดยไม่มีการโต้ตอบใดๆ ในกรณีดังกล่าว Total Block Time (TBT) อาจเป็นเมตริกพร็อกซีที่สมเหตุสมผลสำหรับ INP แต่ไม่สามารถใช้แทน INP ได้
แม้ว่าเครื่องมือในห้องทดลองจะมีข้อจำกัดในการประเมิน INP ของหน้าเว็บ แต่ก็มีกลยุทธ์บางอย่างในการสร้างการโต้ตอบที่ช้าในห้องทดลอง กลยุทธ์ต่างๆ ได้แก่ การติดตามเส้นทางที่ผู้ใช้ทั่วไปใช้และการทดสอบการโต้ตอบตลอดเส้นทาง รวมถึงการโต้ตอบกับหน้าเว็บขณะที่โหลด ซึ่งเป็นช่วงที่เธรดหลักมักจะทำงานหนักที่สุด เพื่อระบุการโต้ตอบที่ช้าในช่วงสําคัญของประสบการณ์ของผู้ใช้
วิธีปรับปรุง INP
คําแนะนําในการเพิ่มประสิทธิภาพ INP มีไว้เพื่อช่วยคุณในกระบวนการระบุการโต้ตอบที่ช้าในสนาม และการใช้ข้อมูลใน Labs เพื่อช่วยระบุสาเหตุและเพิ่มประสิทธิภาพ
บันทึกการเปลี่ยนแปลง
บางครั้งเราอาจพบข้อบกพร่องใน API ที่ใช้วัดเมตริก และบางครั้งก็พบในคําจํากัดความของเมตริกเอง ด้วยเหตุนี้ จึงต้องมีการทําการเปลี่ยนแปลงในบางครั้ง และการเปลี่ยนแปลงเหล่านี้อาจปรากฏเป็นการเพิ่มประสิทธิภาพหรือการถดถอยในรายงานและหน้าแดชบอร์ดภายใน
เพื่อช่วยให้คุณจัดการเรื่องนี้ได้ การเปลี่ยนแปลงทั้งหมดในการใช้งานหรือคําจํากัดความของเมตริกเหล่านี้จะแสดงในบันทึกการเปลี่ยนแปลงนี้
หากคุณมีความคิดเห็นเกี่ยวกับเมตริกเหล่านี้ ให้ระบุในกลุ่ม Google Web-vitals-feedback
ทดสอบความรู้ของคุณ
เป้าหมายหลักของเมตริก INP คืออะไร
ระบบจะสังเกตการโต้ตอบประเภทใดต่อไปนี้เพื่อวัตถุประสงค์ในการคํานวณ INP (เลือกได้มากกว่า 1 ข้อ)
"เวลาในการตอบสนอง" ของการโต้ตอบสำหรับ INP มีคำจำกัดความว่าอย่างไร
INP และ FID แตกต่างกันอย่างไร
ข้อมูล INP อาจไม่พร้อมใช้งานสำหรับหน้าเว็บในเครื่องมือ เช่น PageSpeed Insights ในสถานการณ์ใดบ้าง
กลยุทธ์ใดที่มีประสิทธิภาพมากที่สุดในการจำลองการโต้ตอบที่ช้าในสภาพแวดล้อมห้องทดลอง
✨ แบบทดสอบนี้สร้างโดย Gemini 1.5 และตรวจสอบโดยเจ้าหน้าที่ แชร์ความคิดเห็น