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.

ืื™ื ื˜ืจืืงื˜ื™ื‘ื™

ืžื“ื“ื™ ืœื™ื‘ื” โ€” ื’ืจืจื• ืœื‘ื“ื™ืงืช ื”ืฆื™ื•ืŸ ืฉืœื›ื

LCPื˜ื•ื‘

2s

ื˜ื•ื‘ โ‰ค 2.5sื—ืœืฉ > 4s

ื˜ืขื™ื ืช ื”ืชื•ื›ืŸ ื”ืขื™ืงืจื™

INPื˜ื•ื‘

180ms

ื˜ื•ื‘ โ‰ค 200msื—ืœืฉ > 500ms

ืชื’ื•ื‘ื” ืœืื™ื ื˜ืจืืงืฆื™ื”

CLSื˜ื•ื‘

0.06

ื˜ื•ื‘ โ‰ค 0.1ื—ืœืฉ > 0.25

ื™ืฆื™ื‘ื•ืช ืคืจื™ืกื”

ื‘ื™ืงื•ืจืช ื”ืชื•ืกืคื™ื: ืœืืŸ ื”ื–ืžืŸ ื”ื•ืœืš

ื”ืชื—ื™ืœื• ื›ืืŸ: ืคืชื—ื• ืืช ื”ืืชืจ ื‘-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% ื™ื•ืชืจ ื”ืžืจื•ืช (ืื™ื ื˜ืจืืงืฆื™ื•ืช ืžื”ื™ืจื•ืช ืžืจื’ื™ืฉื•ืช ืชื’ื•ื‘ืชื™ื•ืช ื™ื•ืชืจ ื•ื‘ื•ื ื•ืช ืืžื•ืŸ ืืฆืœ ื”ืžืฉืชืžืฉ).

ืžืงื•ืจื•ืช

ืงืจื™ืื” ื ื•ืกืคืช