ข้อมูลการใช้ Chrome แสดงให้เห็นว่า 90% ของเวลาในหน้าเว็บของผู้ใช้นั้นถูกใช้ไปหลังจากโหลด ดังนั้น การวัดการตอบสนองอย่างรอบคอบตลอดวงจรจึงเป็นสิ่งสำคัญ นี่คือข้อมูลที่เมตริก INP ประเมิน
การตอบสนองที่ดีหมายถึงหน้าเว็บตอบสนองต่อการโต้ตอบอย่างรวดเร็ว เมื่อหน้าเว็บตอบสนองต่อการโต้ตอบ เบราว์เซอร์จะแสดงการตอบสนองด้วยภาพในเฟรมถัดไปที่แสดงภาพ ความคิดเห็นที่เป็นภาพจะบอกคุณว่ามีการเพิ่มสินค้าลงในรถเข็นช็อปปิ้งออนไลน์จริงๆ หรือไม่ เมนูการนำทางบนอุปกรณ์เคลื่อนที่จะเปิดขึ้นหรือไม่ เซิร์ฟเวอร์ตรวจสอบสิทธิ์เนื้อหาของแบบฟอร์มการเข้าสู่ระบบอยู่หรือไม่ ฯลฯ
โดยปกติการโต้ตอบบางอย่างจะใช้เวลานานกว่ารายการอื่นๆ แต่สำหรับการโต้ตอบที่ซับซ้อนเป็นพิเศษ สิ่งสำคัญคือต้องนำเสนอภาพเบื้องต้นอย่างรวดเร็วเพื่อบอกผู้ใช้ว่าบางอย่างกำลังเกิดขึ้น เฟรมถัดไปที่เบราว์เซอร์จะแสดงคือโอกาสแรกสุดในการดำเนินการดังกล่าว
ดังนั้น Intent ของ INP จึงไม่ใช่การวัดผลกระทบสุดท้ายจากการโต้ตอบทั้งหมด เช่น การดึงข้อมูลเครือข่ายและการอัปเดต UI จากการดำเนินการแบบไม่พร้อมกันอื่นๆ) แต่เป็นเวลาที่การแสดงผลถัดไปถูกบล็อก การชะลอฟีดแบ็กที่เป็นภาพอาจทำให้ผู้ใช้รู้สึกว่าหน้าเว็บตอบสนองได้ไม่เร็วพอ และ INP ก็ได้รับการพัฒนาขึ้นมาเพื่อช่วยให้นักพัฒนาซอฟต์แวร์สามารถวัดประสบการณ์ของผู้ใช้ในส่วนนี้ได้
ในวิดีโอต่อไปนี้ ตัวอย่างทางด้านขวาให้เห็นภาพทันทีว่าหีบเพลงกำลังเปิดขึ้นมา ตัวอย่างทางด้านซ้ายคือการตอบสนองที่ไม่ดี และวิธีสร้างประสบการณ์ที่ไม่ดีแก่ผู้ใช้
คู่มือนี้อธิบายวิธีการทำงานของ INP, วิธีวัดผล และบอกแหล่งข้อมูลเพื่อนำไปปรับปรุง
INP คืออะไร
INP เป็นเมตริกที่ประเมินการตอบสนองโดยรวมของหน้าเว็บต่อการโต้ตอบของผู้ใช้ โดยสังเกตเวลาในการตอบสนองของการโต้ตอบคลิก การแตะ และแป้นพิมพ์ทั้งหมดที่เกิดขึ้นตลอดอายุของการเข้าชมหน้าเว็บของผู้ใช้ ค่า INP สุดท้ายคือการโต้ตอบที่ยาวที่สุดที่สังเกตได้ โดยที่ไม่ได้สนใจข้อมูลผิดปกติทางสถิติ
INP คํานวณโดยสังเกตการโต้ตอบทั้งหมดที่เกิดขึ้นกับหน้าเว็บ สำหรับเว็บไซต์ส่วนใหญ่ ระบบจะรายงานการโต้ตอบกับเวลาในการตอบสนองที่แย่ที่สุดเป็น INP
อย่างไรก็ตาม สำหรับหน้าที่มีการโต้ตอบจำนวนมาก การสะอึกแบบสุ่มอาจส่งผลให้มีการโต้ตอบที่มีความหน่วงสูงผิดปกติในหน้าที่ตอบสนองตามอุปกรณ์ ยิ่งมีการโต้ตอบเกิดขึ้นในหน้าหนึ่งๆ มากเท่าใด ก็ยิ่งมีแนวโน้มที่จะเกิดการโต้ตอบมากขึ้นเท่านั้น
เราจะไม่สนใจการโต้ตอบสูงสุด 1 ครั้งสำหรับการโต้ตอบทุกๆ 50 ครั้งเพื่อให้วัดการตอบสนองจริงได้ดีขึ้นสำหรับหน้าเว็บที่มีการโต้ตอบสูง ประสบการณ์การใช้งานหน้าเว็บส่วนใหญ่จะมีการโต้ตอบไม่เกิน 50 ครั้ง ดังนั้นการโต้ตอบที่แย่ที่สุดจึงมักได้รับการรายงานบ่อยที่สุด จากนั้นระบบจะรายงานเปอร์เซ็นไทล์ที่ 75 ของการดูหน้าเว็บทั้งหมดตามปกติ ซึ่งจะนําค่าผิดปกติออกเพิ่มเติมเพื่อให้ได้ค่าที่ผู้ใช้ส่วนใหญ่ได้รับประสบการณ์หรือดีกว่า
การโต้ตอบคือกลุ่มของเครื่องจัดการเหตุการณ์ที่เริ่มทำงานระหว่างท่าทางสัมผัสของผู้ใช้เชิงตรรกะเดียวกัน เช่น "แตะ" การโต้ตอบในอุปกรณ์หน้าจอสัมผัสนั้นรวมถึงหลายเหตุการณ์ เช่น pointerup
, pointerdown
และ click
การโต้ตอบอาจเกิดขึ้นจาก JavaScript, CSS, ตัวควบคุมเบราว์เซอร์ในตัว (เช่น องค์ประกอบแบบฟอร์ม) หรือการควบคุมดังกล่าวรวมกัน
เวลาในการตอบสนองของการโต้ตอบประกอบด้วยระยะเวลาที่ยาวที่สุดเพียงช่วงเดียวของกลุ่มเครื่องจัดการเหตุการณ์ที่ขับเคลื่อนการโต้ตอบ นับตั้งแต่เวลาที่ผู้ใช้เริ่มการโต้ตอบไปจนถึงขณะที่เบราว์เซอร์วาดเฟรมถัดไป
คะแนน 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 เพื่อแนะนํากระบวนการระบุการโต้ตอบที่เกิดขึ้นช้าในภาคสนาม และใช้ข้อมูลในห้องทดลองเพื่อช่วยคุณระบุสาเหตุและเพิ่มประสิทธิภาพ
บันทึกการเปลี่ยนแปลง
บางครั้งอาจพบข้อบกพร่องใน API ที่ใช้ในการวัดเมตริก และบางครั้งอาจพบข้อบกพร่องในคำจำกัดความของเมตริกเอง ด้วยเหตุนี้ บางครั้งจึงอาจต้องมีการเปลี่ยนแปลง และการเปลี่ยนแปลงเหล่านี้อาจแสดงเป็นการปรับปรุงหรือความถดถอยในรายงานภายในและแดชบอร์ดของคุณ
การเปลี่ยนแปลงทั้งหมดที่เกิดขึ้นกับการใช้งานหรือคำจำกัดความของเมตริกเหล่านี้จะปรากฏในบันทึกการเปลี่ยนแปลงนี้เพื่อช่วยคุณจัดการเรื่องนี้
หากคุณมีความคิดเห็นเกี่ยวกับเมตริกเหล่านี้ ให้ระบุในกลุ่ม Google Web-vitals-feedback
ทดสอบความรู้ของคุณ
เป้าหมายหลักของเมตริก INP คืออะไร
การโต้ตอบประเภทใดต่อไปนี้เป็นไปตามวัตถุประสงค์ของการคำนวณ INP (เลือกได้มากกว่า 1 ข้อ)
"เวลาในการตอบสนอง" เป็นอย่างไรบ้าง ของการโต้ตอบที่กำหนดไว้สำหรับ INP
INP และ FID แตกต่างกันอย่างไร
ข้อมูล INP อาจไม่พร้อมใช้งานสำหรับหน้าเว็บในเครื่องมือ เช่น PageSpeed Insights ในสถานการณ์ใดบ้าง
อะไรคือกลยุทธ์ที่มีประสิทธิภาพมากที่สุดในการสร้างการโต้ตอบที่ช้าซ้ำในสภาพแวดล้อมของห้องทดลอง
✨ แบบทดสอบนี้สร้างขึ้นโดย Gemini 1.5 และได้รับการตรวจสอบโดยเจ้าหน้าที่ แชร์ความคิดเห็น