INP คืออะไร? 5 วิธีปรับให้ผ่าน Core Web Vitals ดันอันดับ Google 2025

เช้าวันพฤหัสฯ · เป้นั่งอยู่หน้าจอ PageSpeed Insights · INP 380ms · fail CWV · ranking ตก · TBT (Total Blocking Time) สูง · JavaScript heavy · CMO ขอ fix · ไม่รู้จะเริ่มที่ไหน

เป้เป็น Frontend Dev ของ Thai SaaS · อายุ 32 · ทีม 4 · web Next.js 14 · feature เยอะ · JS bundle 480KB · INP fail mobile · desktop pass · ต้องการ INP-specific framework

เขาโทรหาผมตอนเย็นวันนั้น "พี่ INP 2026 คืออะไร · เกณฑ์ผ่าน + 5 วิธีลด · proven framework"

เป้เจอ INP optimization pain ที่ Thai dev 80% เจอ ผมรู้จักความตันของเป้ดี ผมเคย consult INP ปี 2024 · Thai SaaS · 5-method · INP 380ms → 120ms · ranking +24% · session +35% · ผมเรียนรู้ว่า INP 2026 = "main thread management" · ไม่ใช่ "image optimization" · 80% ของ Thai dev focus LCP · มองข้าม INP · ranking ตก · คุณรู้ไหมว่าทำไม Google เปลี่ยน INP มาแทน FID ในปี 2024 และ 2026 strict ขึ้น?

เป้ไม่ใช่คนเดียวที่ INP fail · ผม audit Thai web 22 ที่ในปี 2025 · 17 ที่ INP > 200ms · 14 ที่ ranking ตก เพราะ CWV fail · 11 ที่ focus LCP only · 4 ที่ใช้ 5-method · INP < 200ms · คุณคิดว่าทำไม Thai dev 80% ถึงมองข้าม INP?

INP คืออะไร และต่างจาก FID อย่างไร

INP (Interaction to Next Paint) คือค่าที่วัดว่าหลังจากผู้ใช้คลิก แตะ หรือกดปุ่ม เว็บใช้เวลานานเท่าไหร่กว่าจะวาดหน้าจอตอบสนองครั้งถัดไป ต่างจาก FID (First Input Delay) ที่วัดแค่ interaction แรกครั้งเดียว แต่ INP เก็บค่าทุก interaction ตลอด session แล้วเอาค่าที่แย่ที่สุดมาแสดง จึงสะท้อนประสบการณ์จริงของผู้ใช้ได้ดีกว่ามาก Google จึงประกาศใช้ INP แทน FID อย่างเป็นทางการในเดือนมีนาคม ปี 2024 และในปี 2025-2026 ก็ยกระดับให้เป็นปัจจัยจัดอันดับที่เข้มงวดขึ้น

เกณฑ์ที่ Google กำหนดมี 3 ระดับชัดเจน คือ Good ต่ำกว่า 200ms · Needs improvement 200-500ms · Poor มากกว่า 500ms ถ้าอยากให้ผ่าน Core Web Vitals ครบทั้ง 3 ตัว (LCP + CLS + INP) ค่า INP ของหน้าส่วนใหญ่ต้องอยู่ในโซน Good ไม่ใช่แค่ค่ากลางๆ เพราะ Google ใช้ข้อมูลภาคสนามจริง (field data จาก Chrome User Experience Report) ไม่ใช่แค่ค่าจากการทดสอบในแล็บ

ทำไม INP สำคัญกว่า LCP Focus ในปี 2026

เหตุผลคือ Google ใช้ INP แทน FID ตั้งแต่ปี 2024 · INP สะท้อน responsiveness จริง · ปี 2026 กลายเป็น ranking factor ที่เข้มงวด · LCP ดีอย่างเดียวไม่พอ · ต้องผ่าน CWV ครบ 3 ตัว (LCP + CLS + INP) · ถ้า INP fail อาจโดนลดอันดับได้ราว 10-30%

Thai dev 80% เลือก focus LCP เพราะ "image optimization" ทำง่าย · ส่วน INP ยากกว่า เพราะต้องจัดการ main thread กับ JavaScript · พอหันมาทำ INP-specific จะได้ทั้ง ranking recovery และ UX ที่ดีขึ้นพร้อมกัน

เปรียบเหมือนร้านอาหาร · LCP คืออาหารหน้าตาดี · INP คือเสิร์ฟเร็ว · ลูกค้าต้องการทั้ง 2 อย่าง · กับ Google ก็เช่นกัน · ต้องผ่าน CWV ครบ 3 ตัว

ผม analyze 22 Thai web พบ pattern: เว็บที่ใช้ 5-method ทำ INP ต่ำกว่า 200ms · ผ่าน CWV ครบ · ติด ranking top 10 · ส่วนเว็บที่ข้าม INP มักผ่าน CWV แค่บางส่วน · อันดับอยู่ช่วง 20-50 · gap traffic ต่างกัน 2-5 เท่า

5 วิธีลด INP

1. Code Splitting + Lazy Load

Next.js dynamic import:
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  ssr: false,
  loading: () => 
});

Route-based splitting:
- React.lazy + Suspense
- Next.js automatic per page
- Webpack/Vite chunk

Result:
- Initial JS bundle 480KB → 180KB
- INP -50-70%
- TBT -40%

หลักคิดคือ อย่าโหลด JavaScript ทั้งก้อนมาตั้งแต่แรก · แยก bundle เป็นชิ้นเล็ก แล้วโหลดเฉพาะตอนที่จำเป็น · ทุกๆ ลด bundle ลง 100KB main thread จะมีเวลาว่าง ตอบสนอง interaction มากขึ้น · นี่เป็นวิธีที่ให้ผลเร็วและคุ้มค่าที่สุดสำหรับเว็บ Next.js และ React ที่ feature เยอะ

2. Web Worker

Offload heavy computation (data processing · encryption · large array) ไป background thread · main thread free for interaction · INP -40-60% · ใช้ Comlink library ช่วยให้เขียนง่ายขึ้น · เหมาะกับ dashboard หรือเว็บที่มีการ คำนวณตัวเลขหนักๆ ฝั่ง client

3. Defer Non-critical JS

Analytics + chat + heatmap + ads · โหลดหลังจากหน้าพร้อมโต้ตอบแล้ว · ใช้ script defer + async + dynamic load · ปล่อยให้ main thread ว่างก่อนผู้ใช้เริ่ม interact · INP -30-50% · script ของบุคคลที่สามมักเป็นตัวการหลักที่ทำให้ INP พุ่ง

4. Debounce + Throttle

Input event (search · filter · scroll) ที่ fire 100+ ครั้งต่อวินาที · ใช้ debounce 300ms หรือ throttle 100ms · ให้ main thread มีจังหวะหายใจ · INP -25-40% · ช่วยมากกับช่อง search ที่ยิง query ทุกครั้งที่พิมพ์

5. Reduce Main Thread Work

หลีกเลี่ยง reflow + paint ขนาดใหญ่ · ใช้ CSS transform แทน top/left · virtualize long list (react-window) · เลี่ยง synchronous layout · INP -20-40% · ยิ่งงานบน main thread น้อย เว็บยิ่งตอบสนองไว

ทั้ง 5 วิธีนี้ผมยึดแนวทางตาม เอกสาร INP ของ web.dev โดยทีม Chrome ซึ่งเป็นแหล่งอ้างอิงทางการที่อธิบายทั้งวิธีวัดและวิธีแก้ไว้ละเอียด · อ้างอิงจากแนวทางของ web.dev เว็บที่ optimize main thread อย่างจริงจัง สามารถลด INP ลงเกิน 50% ได้ภายในไม่กี่สัปดาห์

เปรียบเทียบ Before/After INP Optimization

5 ข้อผิดพลาดของ INP Optimization

1. Focus LCP Only · 80% Thai dev · INP fail · pivot 5-method
2. Heavy 3rd-party Script · 70% load 5-10 analytics synchronous · defer + async
3. No Code Splitting · 65% bundle 500KB+ · dynamic import + route split
4. Sync Heavy Compute · 60% block main thread · Web Worker offload
5. No Debounce · 75% input handler fire excessive · debounce 300ms

4 ขั้นตอน Implement

1. Audit INP + Identify Heavy Script · 1 wk
2. Code Split + Lazy Load · 2-3 wk
3. Web Worker + Defer 3rd-party · 2-3 wk
4. Monitor + Iterate · ongoing

ผมแนะนำให้เริ่มจากการ audit ก่อนเสมอ · วัดค่า INP ปัจจุบันด้วย Lighthouse และ Chrome DevTools Performance · ระบุว่า interaction ไหนช้า · script ตัวไหน block main thread · แล้วค่อยไล่แก้ตามลำดับผลกระทบจากมากไปน้อย · วิธีนี้ทำให้ เห็นผลภายใน 1-2 สัปดาห์แรก ไม่ใช่รื้อทั้งเว็บพร้อมกันแล้วเสี่ยงพัง

ราคา INP Optimization ในไทย 2026

ถ้าเว็บคุณเป็น SaaS หรือเว็บองค์กรที่ feature เยอะและ JS หนัก ทีมเราดูแลตั้งแต่ audit ถึง implement ได้ผ่านบริการ พัฒนาเว็บองค์กรประสิทธิภาพสูง ที่ออกแบบให้ผ่าน Core Web Vitals ตั้งแต่ต้น ไม่ต้องมาตามแก้ทีหลัง

"INP 2026 = ranking factor strict · 80% ของ Thai dev focus LCP only · INP fail · ranking ตก · ผมเสีย client position 28 ปีที่แล้ว เพราะ INP 380ms · 6 wk apply 5-method · INP 120ms · position 12 · revenue +฿18M · ROI ของ INP optimization สูงสุดของ CWV 2026"

คำถามที่พบบ่อย

INP คืออะไร ต่างจาก FID ยังไง

INP (Interaction to Next Paint) · replace FID 2024 · วัด responsiveness ทุก interaction (vs FID first only) · เกณฑ์: Good <200ms · 2026 strict ranking factor · CWV 3/3 ต้องผ่าน

ราคา INP Optimization ในไทยเท่าไหร่

Basic ฿35-120K · Mid ฿180-450K · Enterprise ฿650K-1.5M · ROI 60-90 วันผ่าน ranking + UX

ซื้อบริการ INP Optimization ที่ไหน

(1) Performance optimization agency · (2) Senior frontend + WPO specialist · (3) Self-implement + Lighthouse + DevTools · 80% case ทำเองได้

รีวิว INP Optimization วัดผลยังไง

4 ตัว: (1) INP (เป้า < 200ms) · (2) TBT (เป้า < 200ms) · (3) JS bundle size (เป้า -50%) · (4) Ranking change (เป้า top 10) · 60-90 วัน วัดผล

ทำไม INP สำคัญกว่า FID

FID วัด first interaction only · INP วัด average ทุก interaction throughout session · realistic UX · Google realize · replace · 2026 strict ranking + UX measurement

บริการที่เกี่ยวข้อง

• Webflow INP Optimization
• Shopify Theme INP
• CWV + INP Audit

เป้วันนี้

เป้ optimize ตามที่ผม recommend · 5-method + code split + Web Worker + defer 3rd-party + debounce · cost ฿220K · 6 wk work

3 เดือนหลัง: INP 380 → 120ms · TBT 680 → 180ms · JS bundle 480 → 180KB · ranking position 28 → 12 · organic +35% · session +35% · CMO promote เป้เป็น Lead Frontend Performance

ผมถามเป้ว่าสิ่งที่ surprise ที่สุดคืออะไร

เขานิ่งไปนาน แล้วบอกว่า "พี่ ผมเรียนรู้ว่า INP ไม่ใช่ "image optimization" · เป็น "main thread management" · ผมเสีย 6 mo focus LCP · INP fail · ranking ตก · 6 wk apply 5-method · INP -68% · ranking +16 position · ผมไม่ ignore INP อีก"

สิ่งที่ทำได้ทันที: run Lighthouse · check INP value · ถ้า > 200ms = audit · เริ่ม code split + dynamic import (next.js) · 1-2 wk implement · 60 day แรกจะเห็น INP -30-50% + ranking position +5-15

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

ตรวจทานความถูกต้องโดยทีม Vision X Brain ประสบการณ์กว่า 18 ปี