INP คืออะไร? เกณฑ์ผ่าน + วิธีลดดีเลย์อินพุต (2025)

INP (Interaction to Next Paint) คือค่าวัดความไวต่อการแตะ/คลิก โดยพิจารณาอินเทอร์แอ็กชันที่ช้าที่สุดเกือบทั้งหมดของหน้า เกณฑ์ผ่านคือ ≤200 ms; 200–500 ms ต้องปรับปรุง; >500 ms แย่ วิธีลดคือหั่น Long Tasks, ลด JS/สคริปต์ที่สาม และทำแฮนด์เลอร์ให้เบา

INP คืออะไร (เข้าใจเร็ว)

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

เกณฑ์ผ่าน (Threshold 2025)

อาการ → สาเหตุ → วิธีแก้ (โฟกัสมือถือ)

โค้ดตัวอย่าง: หั่น Long Tasks ให้ INP ดีขึ้น

// แบ่งงานหนักเป็นชิ้นเล็ก & ยกไปช่วงว่าง
function chunkWork(items, doChunk) {
  const DEADLINE_MS = 50; // ไม่บล็อกเมนเธรดนาน
  function run() {
    const start = performance.now();
    while (items.length && performance.now() - start < DEADLINE_MS) {
      doChunk(items.shift());
    }
    if (items.length) {
      (window.requestIdleCallback || setTimeout)(run, 0);
    }
  }
  run();
}

How-to: ลด INP ให้ “ผ่าน” ทีละขั้น

1. วัดจากผู้ใช้จริง (RUM): เปิดรวบรวม Web Vitals ในโปรดักชัน + อ่าน CrUX/Field data
2. โปรไฟล์อินเตอร์แอ็กชัน: DevTools → Record → กดปุ่ม/เปิดเมนู → หา Long Tasks >50 ms
3. ลดงานบนอินพุต: ทำแฮนด์เลอร์ให้เล็ก, ใช้ passive listeners, ดีบาวซ์/ธรอตเทิล
4. แยก/เลื่อนโหลด JS: Code-split เส้นทาง, โหลด 3rd-party แบบ lazy/consent-mode
5. ลดงาน layout: ใช้ transform/opacity, batch DOM, หลีกเลี่ยง forced reflow
6. ทดสอบมือถือจริง: วัด INP บนอุปกรณ์กลาง-ล่าง ไม่ใช่เครื่องแรงอย่างเดียว
7. วนซ้ำ: รีคอร์ด → ปรับ → วัดซ้ำจน ≤200 ms

อ่านต่อ & เชื่อมโยงภายใน

• เร่งการนำทาง: Speculation Rules API
• เบา JS ด้วยสถาปั