INP 2026: 5 วิธีลด

เช้าวันพฤหัสฯ · เป้นั่งอยู่หน้าจอ 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 · ignore INP · ranking ตก · คุณรู้ไหมว่าทำไม Google INP replace 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% ignore INP?

ทำไม INP > LCP Focus 2026

เหตุผลคือ Google INP replace FID 2024 · INP = real responsiveness · 2026 strict ranking factor · LCP เก่ง · ไม่พอ · ต้อง CWV 3/3 pass (LCP + CLS + INP) · INP fail = ranking penalty 10-30%

Thai dev 80% focus LCP เพราะ "image optimization" easy · INP ยาก = main thread + JS · pivot ไป INP-specific = ranking recovery + UX improvement · combine

เปรียบเหมือนกับ restaurant · LCP = food look ดี · INP = serve เร็ว · ลูกค้าต้องการทั้ง 2 · กับ Google ก็เหมือนกัน · CWV 3/3 pass

ผม analyze 22 Thai web พบ pattern: 5-method INP INP < 200ms · CWV 3/3 pass · ranking top 10 · skip INP CWV partial · ranking position 20-50 · gap traffic 2-5x

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%

2. Web Worker

Offload heavy computation (data processing · encryption · large array) ไป background thread · main thread free for interaction · INP -40-60% · Comlink library simplify

3. Defer Non-critical JS

Analytics + chat + heatmap + ads · load after interactive · use script defer + async + dynamic load · main thread idle ก่อน user interact · INP -30-50%

4. Debounce + Throttle

Input event (search · filter · scroll) ที่ fire 100+ ครั้ง/sec · debounce 300ms หรือ throttle 100ms · main thread breathing room · INP -25-40%

5. Reduce Main Thread Work

Large reflow + paint avoid · use CSS transform vs top/left · virtualize long list (react-window) · avoid synchronous layout · INP -20-40%

เปรียบเทียบ 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

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

"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