การโต้ตอบกับ Next Paint (INP)

ข้อมูลการใช้งาน Chrome แสดงให้เห็นว่าเวลา 90% ของผู้ใช้ในหน้าเว็บนั้นเกิดขึ้นหลังจากหน้าเว็บโหลด ดังนั้น การวัดการตอบสนองอย่างละเอียดตลอดวงจรชีวิต��องหน้าเว็บจึงเป็นเรื่องสำคัญ เมตริก INP จะประเมินข้อมูลนี้

การตอบสนองที่ดีหมายความว่าหน้าเว็บตอบสนองต่อการโต้ตอบอย่างรวดเร็ว เมื่อหน้าเว็บตอบสนองต่อการโต้ตอบ เบราว์เซอร์จะแสดงการตอบกลับด้วยภาพในเฟรมถัดไปที่แสดง การแสดงผลผลป้อนกลับจะบอกคุณ เช่น มีการเพิ่มสินค้าที่คุณเพิ่มลงในรถเข็นช็อปปิ้งออนไลน์แล้ว เมนูการนำทางบนอุปกรณ์เคลื่อนที่เปิดขึ้นหรือไม่ เนื้อหาของแบบฟอร์มการเข้าสู่ระบบได้รับการตรวจสอบสิทธิ์โดยเซิร์ฟเวอร์หรือไม่ และอื่นๆ

การโต้ตอบบางอย่างอาจใช้เวลานานกว่าการโต้ตอบอื่นๆ โดยปกติ แต่สำหรับการโต้ตอบที่ซับซ้อนเป็นพิเศษ คุณควรแสดงผลป้อนกลับภาพเบื้องต้นอย่างรวดเร็วเพื่อแจ้งให้ผู้ใช้ทราบว่ามีบางอย่างเกิดขึ้น เฟรมถัดไปที่เบราว์เซอร์จะแสดงเป็นโอกาสแรกสุดในการดำเนินการนี้

ดังนั้น วัตถุประสงค์ของ INP ไม่ใช่การวัดผลลัพธ์ทั้งหมดที่จะเกิดขึ้นจากการโต้ตอบ เช่น การดึงข้อมูลเครือข่ายและการอัปเดต UI จากการดำเนินการแบบไม่พร้อมกันอื่นๆ) แต่เป็นการวัดเวลาที่ระบบบล็อกการวาดครั้งถัดไป การตอบสนองด้วยภาพล่าช้าอาจทำให้ผู้ใช้รู้สึกว่าหน้าเว็บตอบสนองไม่เร็วพอ และ INP ได้รับการพัฒนาขึ้นเพื่อช่วยนักพัฒนาซอฟต์แวร์วัดประสบการณ์ของผู้ใช้ในส่วนนี้

ในวิดีโอต่อไปนี้ ตัวอย่างทางด้านขวาให้เห็นภาพทันทีว่าหีบเพลงกำลังเปิดขึ้นมา ตัวอย่างด้านซ้ายแสดงการตอบสนองที่ไม่ดีและผลกระทบที่อาจเกิดขึ้นกับประสบการณ์ของผู้ใช้

คู่มือนี้จะอธิบายวิธีการทํางานของ INP, วิธีวัดผล และชี้ไปยังแหล่งข้อมูลสําหรับการปรับปรุง

INP คืออะไร

INP เป็นเมตริกที่ประเมินการตอบสนองโดยรวมของหน้าเว็บต่อการโต้ตอบของผู้ใช้ โดยสังเกตระยะเวลาในการตอบสนองของการคลิก แตะ และการโต้ตอบด้วยแป้นพิมพ์ทั้งหมดที่เกิดขึ้นตลอดอายุการเข้าชมหน้าเว็บของผู้ใช้ ค่า INP สุดท้ายคือการโต้ตอบที่ยาวที่สุดที่สังเกตได้ โดยที่ไม่ได้สนใจข้อมูลผิดปกติทางสถิติ

การโต้ตอบคือกลุ่มของตัวแฮนเดิลเหตุการณ์ที่เริ่มทํางานระหว่างท่าทางสัมผัสของผู้ใช้ตามตรรกะเดียวกัน เช่น การโต้ตอบด้วยการ "แตะ" ในอุปกรณ์หน้าจอสัมผัสประกอบด้วยเหตุการณ์หลายรายการ เช่น 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

ทดสอบความรู้ของคุณ