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 ด้วยสถาปัตยกรรม: Island Architecture
• ปรับภาพรวมยอดขาย: Shopify CRO

FAQ (People Also Ask)

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

ควรโฟกัสอะไรถ้า INP ไม่ผ่าน?
หั่น Long Tasks, ทำแฮนด์เลอร์ให้เล็ก, ลด JS หนักและสคริปต์ที่สาม, แก้ layout thrashing

วัด INP จากไหน?
RUM/CrUX (field), Web Vitals overlay, DevTools Performance (lab สำหรับโปรไฟล์)

แหล่งอ้างอิง

• web.dev — Interaction to Next Paint (INP)
• Google — Core Web Vitals
• Chrome Developers — Evaluate performance

อัปเดตล่าสุด: 08 Aug 2025

เกี่ยวกับผู้เขียน

Vision X Brain Team — ทีมผู้เชี่ยวชาญ SEO/Performance/CRO สำหรับอีคอมเมิร์ซและเว็บความเร็วสูง เร่ง INP/LCP/CLS ในโปรเจกต์จริงด้วยการลด JS หนักและปรับสถาปัตยกรรมอย่างเหมาะสม ดูผลงาน/ติดต่อ

ต้องการทีมช่วยทำ INP ให้ผ่านเร็ว?

เราช่วยโปรไฟล์อินเตอร์แอ็กชัน สำรวจ Long Tasks ปรับแฮนด์เลอร์/เลย์เอาต์ และติดตั้ง RUM เพื่อติดตามค่า INP ต่อเนื่อง ติดต่อเรา