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

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

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

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

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

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

คู่มือนี้จะอธิบายวิธีการทำงานของ 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 จึงจำเป็นต่อการวัดประสบการณ์ของผู้ใช้สำหรับหน้าเว็บระดับบนสุด เนื่องจาก 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 จะบอกคุณได้ว่ามีปัญหาหรือไม่ แต่ CrUX จะไม่สามารถบอกได้ว่าอะไรเป็นสาเหตุของปัญหา โซลูชัน RUM จะช่วยให้คุณทราบรายละเอียดเพิ่มเติมเกี่ยวกับหน้าเว็บ ผู้ใช้ หรือการโต้ตอบของผู้ใช้ที่ประสบปัญหาด้านการตอบสนอง ความสามารถในการระบุแหล่งที่มาของ INP ในการโต้ตอบแต่ละรายการจะไม่เป็นการคาดเดาและเสียเวลาโดยเปล่าประโยชน์

ในห้องทดลอง

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

วิธีปรับปรุง INP

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

บันทึกการเปลี่ยนแปลง

ในบางครั้ง ระบบจะพบข้อบกพร่องใน API ที่ใช้วัดเมตริก และบางครั้งพบในคำนิยามของเมตริกด้วย ด้วยเหตุนี้ บางครั้งต้องมีการเปลี่ยนแปลงและการเปลี่ยนแปลงเหล่านี้อาจแสดงเป็นการปรับปรุงหรือการถดถอยในรายงานและแดชบอร์ดภายในของคุณ

การเปลี่ยนแปลงทั้งหมดที่เกิดขึ้นกับการใช้งานหรือคำจำกัดความของเมตริกเหล่านี้จะปรากฏในบันทึกการเปลี่ยนแปลงนี้เพื่อช่วยคุณจัดการ

หากคุณมีความคิดเห็นเกี่ยวกับเมตริกเหล่านี้ โปรดระบุไว้ในกลุ่ม Google web-vitals-feedback

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