Google เปลี่ยนตัวชี้วัด First Input Delay (FID) เป็น Interaction to Next Paint (INP) ตั้งแต่มีนาคม 2024 เว็บไซต์ที่ INP ไม่ผ่านเกณฑ์จะถูกลดอันดับจริง บทความนี้อธิบายว่า INP คืออะไร ต่างจาก FID อย่างไร เกณฑ์ผ่านอยู่ที่เท่าไหร่ และวิธีลดค่า INP ให้ผ่าน

INP คืออะไร

Interaction to Next Paint (INP) วัดเวลาตั้งแต่ผู้ใช้คลิก แตะ หรือกดคีย์บอร์ด จนถึงตอนที่หน้าจอตอบสนองด้วยการเปลี่ยนแปลง visual ค่า INP คือค่าที่แย่ที่สุดจากทุก interaction ในเซสชัน (หรือค่าที่ใกล้เคียงแย่ที่สุดถ้ามี interactions เยอะ)

INP ต่างจาก FID อย่างไร

มิติFID (เลิกใช้แล้ว)INP (ใช้ปัจจุบัน)
วัดอะไรเฉพาะ first interactionทุก interaction ตลอด page lifecycle
ครอบคลุมแค่ input delay (ก่อน event handler)Input delay + processing + presentation delay
สะท้อนจริงอาจพลาดปัญหาที่เกิดหลัง first interactionจับทุกปัญหา responsiveness ตลอดเซสชัน

เกณฑ์ผ่าน INP

ค่า INPสถานะหมายความว่า
≤ 200msดี (Good)ผู้ใช้รู้สึกว่าเว็บตอบสนองทันที
200-500msต้องปรับปรุงผู้ใช้เริ่มรู้สึกว่าช้า
> 500msแย่ (Poor)ผู้ใช้รู้สึกว่าเว็บค้าง อาจกดออก

สาเหตุหลักที่ทำให้ INP สูง

  • Long Tasks บน Main Thread — JavaScript ที่ทำงานนานเกิน 50ms บล็อก main thread ทำให้เว็บตอบสนอง interaction ไม่ได้
  • Third-party Scripts — แชท, analytics, ads ที่ทำงานหนัก
  • Large DOM Size — DOM ที่มี elements เยอะมากทำให้ layout/paint ช้า
  • Event Handlers ที่หนัก — click handler ที่ทำงานซับซ้อนโดยไม่แยก task
  • Hydration ใน Frameworks — React/Next.js hydration ที่บล็อก main thread

วิธีลดค่า INP

เทคนิคทำอะไรผลลัพธ์
Yield to Main Threadแบ่ง long task เป็น chunks ด้วย scheduler.yield() หรือ setTimeoutMain thread ว่างสำหรับ interaction
Defer Third-partyโหลด non-critical scripts ด้วย defer/async หรือ Partytownลด main thread blocking
Reduce DOM Sizeลบ elements ที่ไม่จำเป็น ใช้ virtualization สำหรับ list ยาวLayout/paint เร็วขึ้น
Web Workersย้าย heavy computation ออกจาก main threadMain thread ว่าง 100%
Debounce/Throttleจำกัดความถี่ของ event handlersลด processing time
Optimize Renderingใช้ CSS contain, will-change อย่างเหมาะสมลด presentation delay

วิธีตรวจสอบ INP

  • Chrome DevTools → Performance tab — record interaction แล้วดู event timing
  • PageSpeed Insights — แสดงค่า INP จาก field data (CrUX)
  • Web Vitals Extension — แสดงค่า INP real-time ขณะใช้เว็บ
  • Search Console → Core Web Vitals report — ดูภาพรวมทุกหน้า

คำถามที่พบบ่อยเกี่ยวกับ INP

INP มีผลต่ออันดับ Google จริงไหม

จริง INP เป็นหนึ่งใน Core Web Vitals ที่ Google ใช้เป็นปัจจัยจัดอันดับ ตั้งแต่มีนาคม 2024 เว็บที่ INP ไม่ผ่านจะเสียเปรียบในการแข่งขัน

Webflow มีปัญหา INP ไหม

Webflow เองไม่ค่อยมีปัญหา INP เพราะ output เป็น static HTML/CSS แต่ถ้าเพิ่ม third-party scripts เยอะ (chat widget, analytics, tracking pixels) ก็จะมีปัญหาได้ วิธีแก้คือ defer scripts ที่ไม่จำเป็น

INP กับ FID ค่าไหนสำคัญกว่า

FID เลิกใช้แล้วตั้งแต่มีนาคม 2024 ตอนนี้ INP เป็นตัวชี้วัดเดียวสำหรับ responsiveness ใน Core Web Vitals ไม่ต้องดู FID อีกต่อไป

ปรับปรุง INP ของเว็บคุณ

ถ้าเว็บไซต์ของคุณ INP ไม่ผ่านเกณฑ์ เริ่มจากตรวจสอบด้วย PageSpeed Insights แล้วจัดลำดับแก้ตาม impact ถ้าต้องการทีมที่เชี่ยวชาญ Web Performance Optimization — คุยกับเรา

บทความแนะนำ