ข้อมูลการใช้งาน 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 มีไว้เพื่อช่วยคุณในกระบวนการระบุการโต้ตอบที่ช้าในสนาม และการใช้ข้อมูลใน Labs เพื่อช่วยระบุสาเหตุและเพิ่มประสิทธิภาพ
บันทึกการเปลี่ยนแปลง
บางครั้งเราอาจพบข้อบกพร่องใน API ที่ใช้วัดเมตริก และบางครั้งก็พบในคําจํากัดความของเมตริกเอง ด้วยเหตุนี้ จึงต้องมีการทําการเปลี่ยนแปลงในบางครั้ง และการเปลี่ยนแปลงเหล่านี้อาจปรากฏเป็นการเพิ่มประสิทธิภาพหรือการถดถอยในรายงานและหน้าแดชบอร์ดภายใน
เพื่อช่วยให้คุณจัดการเรื่องนี้ได้ การเปลี่ยนแปลงทั้งหมดในการใช้งานหรือคําจํากัดความของเมตริกเหล่านี้จะแสดงในบันทึกการเปลี่ยนแปลงนี้
หากมีความคิดเห็นเกี่ยวกับเมตริกเหล่านี้ โปรดแสดงความคิดเห็นใน Google Group ของ web-vitals-feedback
ทดสอบความรู้ของคุณ
เป้าหมายหลักของเมตริก INP คืออะไร
ระบบจะสังเกตการโต้ตอบประเภทใดต่อไปนี้เพื่อวัตถุประสงค์ในการคํานวณ INP (เลือกได้มากกว่า 1 ข้อ)
"เวลาในการตอบสนอง" ของการโต้ตอบสำหรับ INP มีคำจำกัดความว่าอย่างไร
INP กับ FID แตกต่างกันอย่างไร
ข้อมูล INP อาจไม่พร้อมใช้งานสําหรับหน้าเว็บในเครื่องมืออย่าง PageSpeed Insights ในสถานการณ์ใด
กลยุทธ์ใดที่มีประสิทธิภาพมากที่สุดในการจำลองการโต้ตอบที่ช้าในสภาพแวดล้อมห้องทดลอง
✨ แบบทดสอบนี้สร้างโดย Gemini 1.5 และผ่านการตรวจสอบโดยเจ้าหน้าที่ แชร์ความคิดเห็น