Interaction to Next Paint (INP) คืออะไร Web vital จะมี Metric ใหม่อีกแล้วหรอ?
ใช่ครับเรากำลังจะมี Metric ใหม่ Metric นี้ชื่อว่า Interaction to Next Paint (INP) จริงๆแล้ว INP เนี่ยน่าจะออกมาแทน First Input Delay (FID) สาเหตุเลยคือ FID เนี่ย Focus แค่ ตอนที่ First load เท่านั้น ทำให้ในโลกความเป็นจริงที่ interaction เกิดตลอดเวลานั้น FID ไม่ได้ช่วยอะไรเท่านั้นนอกจากบอกว่า Javascript ที่โหลดอยู่มีปริมาณมากขนาดไหน
INP คืออะไร ?
เอาสรุปสั้นๆเลยคือ INP คือ ค่าเวลาระหว่างเรากดปุ่ม หรือ interaction อะไรซักอย่างแล้วหน้าเว็บตอบสนอง เช่น ระยะเวลาตั้งแต่กดปุ่ม Show modal จน Modal ขึ้น หรือเวลาที่กด ปุ่ม Show แล้ว Item นั้นโชว์ขึ้นมา ซึ่งถ้าตัวเลขนี้มีค่าน้อยมากๆ ก็หมายความว่าเว็บของเรา Smooth มากๆนั่นเองภาพด้านล่างอธิบายได้ดีที่สุดเลย โดยเวลาวัด ตัว metric นี้จะเทส interaction ที่มีอยู่แล้วจัด Percentile แล้วเอาค่าเวลาของ Percentile ที่ 75 มาเป็นตัวบอกว่าเรามีค่า INP
อะไรทำให้ INP สูง?
หลักๆคือ Javascript ที่ยิ่งเรามีการ Process Javascript ที่สูงหลังจาก user กดปุ่ม ก็จะส่งผลให้ ค่า INP สูงไปด้วย เพราะว่าจะ render animation ต่อไปออกมาได้ก็อาจจะต้องผ่าน process ของ Javascript ที่เยอะมากๆ
Optimize ยังไง?
เราสามารถดูได้ว่า interaction ไหนของเราที่ทำงานช้างด้วย lib web-vitals
แล้วพอเราเจอว่าอะไรช้าคราวนี้อาจจะเป็นงานยากหน่อย ที่เราอาจจะต้องลงไปดูว่าอะไรของ function นั้นที่ทำให้มันช้า เช่นบางทีอาจจะมีการเรียก fetch ใน function เป็นเวลานาน หรือใน function นั้นอาจจะมีการ process array ที่มีขนาดใหญ่ซึ่งก็ต้องลงไปแก้กัน Google ก็มีวิธีแนะนำอยู่เหมือน (https://web.dev/optimize-inp/) กันแต่ผมอยากบอกว่าวิธีนี้โคตรจะยาก เพราะมันคือการแตก function ใหญ่ๆออกเป็น function เล็กๆเพื่อไม่ให้รอกัน เพื่อให้ Chrome มองว่ามันเป็นคนละ Task กัน แต่วิธีนี้ก็ไม่ได้สำเร็จรูปขนาดนั้น
แล้วต้องทำยังไง?
ผมบอกได้แค่ว่าเตรียมตัวให้พร้อมก็พอครับวันนี้ INP อาจจะยังไม่ได้เอามานับใน Web-vitals แต่เดี๋ยวมาแน่นอนแล้วบอกเลยว่าถ้าใครมีปัญหาอาจจะไม่ได้แก้ง่ายๆเหมือนเมื่อก่อนแล้วด้วย ตอนนี้ใครอยากรู้ว่าเว็บเรามีปัญหาอยู่มั้ย แนะนำให้ไปโหลด Chrome Extension ตัวนี้มาดูเราจะได้เห็นว่า Web-vitals ของเราตรงไหนที่มีปัญหาอยู่บ้าง
