INP (Interaction to Next Paint): ืืื ืืชืงื ืื ืืช ืื ืืืืจืืคืจืก
ืคืืจืกื ืืคืจืื 2026 ยท 6 ืืงืณ ืงืจืืื
TL;DR
ืืื INP (Interaction to Next Paint) ืืืืืฃ ืืช First Input Delay (FID) ืืืื ืืืืื Core Web Vitals ืืืจืฅ 2024. ืจืื ืืชืจื ืืืืจืืคืจืก ื ืืฉืืื ืื ืื ืชืืกืคื JavaScript ืืืืื ืืืกืืื ืืช ื-main thread ืืฉืืฉืชืืฉืื ืืืืฆืื ืขื ืืคืชืืจืื ืื ืืงืืืืื ืืื ืืจืืงืฆืื ืขื ืืคืกืื โ ืืื ืืืื ืืืืจืืช ืืฉืจืช. ืืชืืงืื: ืืืืืง ืืช ืขืืืก ืืชืืกืคืื, ืืืืืช JavaScript ืื ืงืจืืื, ืืืืืืืฃ ืชืืกืคื jQuery ืืืืื ืืืืืคืืช ืืืืจื ืืืช ืืงืืืช.
ืื INP ืืืื (ืืืื ืืืจืืคืจืก ื ืืฉื ืื)
INP ืืืื ืืช ืืืื ืืืจืืข ืฉืื ืืืฉืชืืฉ ืืืืฅ ืขื ืืคืชืืจ (ืื ืืงืืื ืืฉืื ืืืคืก) ืืขื ืฉืืืคืืคื ืืฆืื ืืช ืืชืืืื โ ืขืืืื ืืืืืืื, ืคืชืืืช ืชืคืจืื, ืฉืืืืช ืืืคืก, ืื ืืืจ. ืจืื ืืชืจื ืืืืจืืคืจืก ื ืืฉืืื ื-INP ืื ืืืื ืฉืืฉืจืช ืืืื, ืืื ืืืื ืฉื-main thread ืฉื ืืืคืืคื ืืกืื ืขื ืืื JavaScript. ืืืฉืชืืฉ ืืืืฅ ืขื "ืืืกืฃ ืืขืืื", ืืื ืฉืืืฉื ืชืืกืคืื ืืจืืฆืื ืื-ืืื ืืช ืืืืื ื ืืืจืืขืื, ืื ืืืฆืืืช ืืงืื ืื ืืืืืงื. ืืืคืืคื ืื ืืฆืืื ืืืืื ืืืฉื 500โ1000ms (ืื ืืจืืข ืืื), ืืืขืืื ืืจืืืฉ ืืืื ืืืื.
ืืืจืืคืจืก ืืืขื ืืช ืืชืืกืคืื ืืคื ืกืืจ, ืืจืื ืืชืืกืคืื ืื ืืฉืชืืฉืื ืืคืืฆืื ืงืื ืื ืืืขืื ื ืขืฆืื. ืชืืกืฃ ืืื ืืื (ืืืฉื ืืื ื ืขืืืืื ืืกืืืืื, ืชืืกืคื ืืคืกืื, ืื ืืื ืืืจืฆืืืช ืฉื ืืืืืืฆืื ืฉืืืืงืืช) ืืืื ืืืืกืืฃ 2-3MB ืฉื JavaScript ืฉืจืฆืื ืืื ืขืืื ืืืื ืืื ืืจืืงืฆืื, ืืืืืื ืืช ืืื ื-main thread.
ืืืื ืืืื โ ืืจืจื ืืืืืงืช ืืฆืืื ืฉืืื
2s
ืืขืื ืช ืืชืืื ืืขืืงืจื
180ms
ืชืืืื ืืืื ืืจืืงืฆืื
0.06
ืืฆืืืืช ืคืจืืกื
ืืืงืืจืช ืืชืืกืคืื: ืืื ืืืื ืืืื
ืืชืืืื ืืื: ืคืชืื ืืช ืืืชืจ ื-Chrome DevTools (F12), ืขืืจื ื-Lighthouse ืืืจืืฆื ืืืงืืจืช ืืืฆืืขืื. ืืืื ืื "Unused JavaScript" โ ืื ืืืชืจ ื-50% ืื-JS ืฉืืื ืืกืืื ืืื ืืฉืืืืฉ, ืืฉ ืืื ืืขืืืช ืขืืืก ืืืืชืจ. ืืืจ ืื ืขืืจื ืืืฉืื ืืช Network, ืืืื ื ืืคื ืืืื ืืกืงืจืืคื ืืจืื ืืืื ืงืืืฆื .js ื ืืขื ืื. ืกืงืจืืคืืื ืืชืืกืคืื ืืื ืืืื ืืืจ, Gravity Forms, ืชืืกืคื ืืืงืืืจืก ืืจืฉืชืืช ืคืจืกืื ืืจืื ืืืืืื ืืช ืืกืงืจืืคื ืืืจืืื ืฉื ืืืชืจ ืฉืืื.
ืขืืฉืื ืฉืืื ืฉืืืืช ืงืฉืืช: ืืื ืืชืืกืฃ ืืื ืจืฅ ืืื ืขืืื ืื ืจืง ืืืื? ืืื ืืคืฉืจ ืืืืืช ืืช ืืืขืื ื ืฉืื (async, defer, ืื ืืขืื ื ืืคื ืืจืืฉื)? ืืื ืืฉ ืืืืคื ืงืื ืืืชืจ? ืืืืื: ืื ืืชื ืืฉืชืืฉืื ื-Gravity Forms ืจืง ืืขืืื ืืฆืืจืช ืืงืฉืจ, ืืื ืฉืื ืกืืื ืืืขืื ืืช 400KB ื-JavaScript ืฉืื ืืืฃ ืืืืช. ืืฉืชืืฉื ืืืื ืืงืช "Code Splitting": ืืขื ื ืืช ืืชืืกืฃ ืจืง ืืฉืืืืคืก ืืืคืืข ืืขืืื.
ืืขืื ื ืืืืื ืืืขืื ืช Async
ืืืจืืคืจืก ืืืขื ืกืงืจืืคืืื ืืชืื ื-<head>, ืื ืฉืืืกื ืืช ืจืื ืืืจ ืืขืืื. ืืฉืชืืฉื ืืคืจืืืจ $in_footer ืฉื ืืคืื ืงืฆืื wp_enqueue_script() (ืืืืืจ ื-true) ืืื ืืืขืืืจ ืกืงืจืืคืืื ืืกืืฃ ื-<body>, ืื ืฉืื ืืืืขื ื ืืืจื ืฉืชืืื ืืขืืื ืขืืื. ืขืืืจ ืชืืกืคืื ืื-ืงืจืืืืื (ืื ืืืืืงื, ืืืืื'ืืื ืฉื ืฆ'ื, ืคืจืกืืืืช), ืืืกืืคื ืืช ืืืืคืืื async ืืื ืฉืื ืืืืขื ื ืืืงืืื ืืืื ืืืกืื.
ืชืืงืื ืงืจืืื ืืจืื ืืชืจื ืืืืจืืคืจืก: ืืื ืืช ืืชืืกืคืื ืืชืืืืื ื-jQuery ืขื ืืืื ืืจืืงืฆืื ืืจืืฉืื ื ืฉื ืืืฉืชืืฉ. ืืขื ื ืืช jQuery ืืื, ืืื ืืื ืืช ืืชืืื ืืชืืกืฃ ืขื ืฉืืืฉืชืืฉ ืืืืฅ ืขื ืืฉืื ืื ืืืื ืื ืืืืืจ. ืจืง ืืืื ืืงื ืืื ืืืื ืืืืื ืืืืจืื ืืช ื-INP ื-600ms ื-150ms ืืืืฉืืจืื ืืืืืื.
ืืืืคืช ืชืืกืคืื ืืืืื ืืืืืคืืช ืงืืืช
ืืืง ืืชืืกืคื ืืืืจืืคืจืก ืื ืืกืืกื ืงืื ืืืืฉื ืื ืฉื ืื ื ืืคื ื ืฉืืืฆืืขืื ืืคืื ืืขืืืคืืช. ืืืื ืืืจ, ืืืฉื, ืืืขื 2โ3MB ืฉื JS ืื ืื ืืชื ืืฉืชืืฉืื ืื ืืขืืื ืืื ืืืื. ืืื ื ืขืืืืื ืืืืจื ืืื ืืื Blocksy, ืืืคืืื ืืืืืงืื ืืืืึฐื ืื ืฉื ืืืจืืคืจืก, ืืฉืชืืฉืื ืืคื 10 ืคืืืช ืงืื. ืืจืฉืชืืช ืคืจืกืื ืืืืืืื'ืืื ืฉื ืฆ'ื ืืฉ ืืขืชืื ืงืจืืืืช ืขืจืืืช SDK ื ืคืืืืช. ืฉืงืื: ืืื ืื ื ืืืืช ืฆืจืื ืชืืกืคื ืืืงืืืจืก ืืฉื ืช 2015, ืื ืฉืืคืฉืจ ืืืฉืชืืฉ ืืืื ืืืจืฆืืืช API ืืืืจื ืืืช ืืืืฉืช headless?
ืืืคืกืื: Gravity Forms ืืื ืชืืกืฃ ืืื. Formstack, Netlify Forms, ืื ืืคืืื ืคืชืจืื ืืืชืื ืืงื (ืืจื Zapier ืื Make) ืืืกืื 90% ืืืฆืจืืื ืฉื ืขืกืง ืงืื-ืืื ืื ื ืืขืฉืืจืืช ืืืงืื. ืืืืคืืืืืืฆืืืช ืชืืื ืืช: ืืกืืจื ืืช Smush Pro (250KB ืฉื JS) ืืืฉืชืืฉื ื-WP Rocket (ืืืื ืืืืืืืช ืจืืืช) ืื ื-Imagify. ืืกืืืืืจืื: ืืืืืคื ืืช Revolution Slider ื-Swiper (vanilla JS, 10KB ืืืื).
ืืืืืช INP: ืืื ืืืขืช ืฉืชืืงื ืชื
ืืฉืชืืฉื ื-Google PageSpeed Insights (https://pagespeed.web.dev/) ืืื ืืืืืง INP. ืฆืืื ืืชืืช ื-200ms ื ืืฉื "ืืื"; ืืขื 500ms ืื ืืืฉืืื. ืืกืชืืื ืขื ื ืชืื ื Chrome User Experience Report โ ืืื ืจืง ืขื ืืฆืืื ืืืงืืื ืฉื Lighthouse โ ืื Lighthouse ืจืฅ ืขื ืืืื ืช ืืคืืชืื ืฉืืื (ืืืืจื), ืืขืื ืฉืืฉืชืืฉืื ืืืืชืืื ืื ืืื (ืืืื) ืื ืืื ืฉืืกืคืจืื ืืช ืืกืืคืืจ ืืืืืชื.
ืืืืืจื ื ืืืืจ ืฉื Web Vitals (ืืจื Sentry, DataBox, ืื ืืื Core Web Vitals ืืืืื ื ื-Google Search Console) ืืื ืืขืงืื ืืืจื ื-INP ืฉื ืืฉืชืืฉืื ืืืืชืืื ืืืืจื ืืื. ืืืงืืจืช ืืืืืช ืืื ืชืืื ืช ืืฆื; ื ืืืืจ ืืชืืฉื ืืืื ืื ืืชืืงืื ืืืืืง ืืขืื ืื ืฉืชืืกืคืื ืืืฉืื ืืืืืจื ืืช ืืืขืื.
ืฉืืืืช ื ืคืืฆืืช
ืืฉืื ื ืืฉืืืช ืืช ืื ืืชืืกืคืื, ื-INP ืืฉืชืคืจ. ืืื ืืืื ืืืกืืจ ืืช ืืืื?
ืื. ืืฉืืืชื ืืืชื ืืื-ืืื ืืืืื ืืช ื-INP ื-Lighthouse ืืืจื ืื ืืฉืืชื. ืืจืื ืชืืื ืฉื-80% ืืืชืืกืคืื ืืื ืฉืื ืืฉืคืขื ืขื ื-INP, ืืื 3โ5 ืชืืกืคืื ืืืืื ืื ืืืฉืืื. ืืฉืืืจื ืืช ืืืืื ืืื, ืืกืืจื ืืช ืืืืืชืจืื. ืชืืกืฃ ืฉืืืกืืฃ ืืืืื'ื ืฆ'ื ืืื ื ืืื; ืชืืกืฃ ืฉืืืกืืฃ 2MB ืฉื ืงืื ืื ืืฉืืืืฉ โ ืื.
ืืื INP ืืฉืื ืจืง ืืืืืฆืืช? ืื ืืืื ืืงืืื ืืืคืกืื?
INP ืืืื ืืช ืื ืกืืื ืืืื ืืจืืงืฆืื: ืืืืฆืืช, ืืงืฉืืช, ืงืื ืืงืืืช ืืืืจืืขื ืืฆืืืข (pointer). ืฉืื ืืืคืก ืฉืืฉืชืื ืืฉืืงืืืืื ืื (ืืืฉื ืขืืืื ืฉื 300ms ืืคื ื ืฉืืชื ืืืคืืข) ืืื ืืฉื ื-INP. ืื ืงืืจื ืืขืชืื ืงืจืืืืช ืืฉืืืืื ื ืฉืืืจื ืืืืืืืืช, ืืืืืฆืื ืื ืื ืืืืืงื ืืืกืืื ืืช ื-main thread. ืืชืืงืื ืืื: ืืืืืช ืื ืืืกืืจ ืืช ืืืืืื ืื ืืืืืื.
ืืื ืืคืฉืจ ืืฉืืืจ ืืืฉืื ืฉืืชืงื ืื ืืช ื-INP?
ืื. ืืืืื ืืืฆืืขืื ืืืืจืืคืจืก ืืืื ืืืจืืฅ ืืช ืืืืงืืจืืช, ืืืืืืฅ ืขื ืืืืคืช ืชืืกืคืื ืืืืฆืข ืืช ืฉืื ืืื ืืงืื ืืชืื ืืื ืฉืขืืช ืขื ืืื. ืืงืฆืืื โช2,000โโช5,000 ืืืชืจ ืงืื. ื-ROI ืืืื: ืฉืืคืืจ ื-INP ืืชืืื ืืขืชืื ืงืจืืืืช ืขื 10โ20% ืืืชืจ ืืืจืืช (ืืื ืืจืืงืฆืืืช ืืืืจืืช ืืจืืืฉืืช ืชืืืืชืืืช ืืืชืจ ืืืื ืืช ืืืื ืืฆื ืืืฉืชืืฉ).
ืืงืืจืืช
ืงืจืืื ื ืืกืคืช
ื ืืืืืจ 2024 ยท 6 ืืงืณ
ืืืคืืืืืืฆืืืช ืืืืจืืช ืืืจืืคืจืก: ืืืจืื ืืื ื ืืืฉืื
ืืื 2026 ยท 7 ืืงืณ
ืืืฆืืขื ืืืื ืืืจ: ืชืงื ื ืืช ืืืขืืืช ืืืืืชืืืช, ืื ืจืง ืืช ืืกืืืคืืืืื
ืื ืืืจ 2025 ยท 4 ืืงืณ
ืืขืืืช ืื ืกืชืจืช ืฉื ืคืืชืื ืืืจืืคืจืก "ืืกืคืืง ืืื"