INP (ປະຕິສໍາພັນກັບສີຕໍ່ໄປ) ແມ່ນການວັດແທກຄວາມອ່ອນໄຫວສໍາຜັດ / ຄລິກ, ພິຈາລະນາເກືອບທັງຫມົດຂອງການໂຕ້ຕອບຊ້າສຸດໃນຫນ້າ. ການຖ່າຍທອດແມ່ນ ≤200 ms; 200-500 ms ຕ້ອງການການປັບປຸງ; > 500 ms ແມ່ນບໍ່ດີ. ວິທີການຫຼຸດຜ່ອນມັນລວມມີການຕັດ Long Tasks, ຫຼຸດຜ່ອນ JS / script ຂອງພາກສ່ວນທີສາມ, ແລະເຮັດໃຫ້ handlers ເບົາລົງ.
INP ແມ່ນຫຍັງ (ຄວາມເຂົ້າໃຈດ່ວນ)
INP ວັດແທກເວລາຕອບສະຫນອງຫຼັງຈາກຜູ້ໃຊ້ ຄລິກ / ແຕະ / ກົດປຸ່ມ ຈົນກ່ວາຕົວທ່ອງເວັບຈະທາສີໃສ່ກອບຕໍ່ໄປທີ່ສະທ້ອນເຖິງການປ່ຽນແປງໃນຫນ້າຈໍ. ມັນແຕກຕ່າງຈາກ metrics ທີ່ຜ່ານມາເນື່ອງຈາກວ່າມັນສະທ້ອນໃຫ້ເຫັນຫນ້າທັງຫມົດແລະຫຼາຍເຫດການ, ບໍ່ພຽງແຕ່ຫນຶ່ງ.
ເກນການຜ່ານ (ເກນ 2025)
| ສະຖານະ | ຄ່າທີ່ວັດແທກໄດ້ | ຄວາມຫມາຍ |
|---|
| ດີ | ≤ 200 ms | ຕອບສະໜອງໄວ |
| ຕ້ອງການການປັບປຸງ | 200 – 500 ມລ | ຍັງມີຄວາມລ່າຊ້າທີ່ເຫັນໄດ້ຊັດເຈນ. |
| ບໍ່ດີ | > 500 ມລ | ຊ້າ, ປະສົບການລົບກວນ |
ອາການ → ສາເຫດ → ວິທີແກ້ໄຂ (ຈຸດໂຟກັສມືຖື)
| ອາການ | ສາເຫດຫຼັກ | ການແກ້ໄຂດ່ວນ | ເຄື່ອງມືກວດສອບ |
|---|
| ແຕະທີ່ປຸ່ມແລະມັນຈະ lag. |
ວຽກງານຍາວກ່ຽວກັບກະທູ້ຕົ້ນຕໍ (ມັດໃຫຍ່ / ວຽກງານຫລົ້ມຈົມ) |
ແບ່ງໜ້າວຽກຍາວອອກເປັນຕ່ອນນ້ອຍໆ, ແຍກລະຫັດຕາມຄວາມຕ້ອງການ, ແລະຍ້າຍໜ້າວຽກທີ່ບໍ່ສຳຄັນໄປຢູ່ຊື່ໆ. |
DevTools Performance, Web Vitals overlay |
| ເປີດເມນູ/Modal Jiggle |
ການໂຫຼດຮູບແບບໃໝ່ເລື້ອຍໆ, ການສະຫຼັບການອ່ານ-ຂຽນ DOM |
Batch DOM, ໃຊ້ການຫັນປ່ຽນ / ຄວາມໂປ່ງໃສ, ຫຼຸດຜ່ອນການໄຫຼຄືນທີ່ຖືກບັງຄັບ |
ໂປໄຟເຊີປະສິດທິພາບ (ລຸ່ມສຸດ/ເຫດການ) |
| ເມື່ອຂ້ອຍພິມ, ຕົວອັກສອນຈະປາກົດຊ້າໆ. |
ຕົວຈັດການກະແຈ/ການປ້ອນຂໍ້ມູນໜັກ, ການກວດສອບການຊິງຄ໌ |
ການດີບັກ/ການຂັດຂວາງ, ຍ້າຍການກວດສອບໄປ async/idle |
ປະສິດທິພາບ + ແຫຼ່ງຂໍ້ມູນ (ຈຸດຢຸດ) |
| ແຕະທີ່ເຊື່ອມຕໍ່ແລະມັນບໍ່ໄດ້ຍ້າຍ. |
script block ທີສາມ (tag/ads/analytics) |
Lazy ຕັດ / ໂຫຼດ, ໃຊ້ຮູບແບບການຍິນຍອມເຫັນດີ, ຍ້າຍຫຼັງຈາກການໂຕ້ຕອບ |
ການຄຸ້ມຄອງ, ການຂັດຂວາງເຄືອຂ່າຍ |
ລະຫັດຕົວຢ່າງ: ຕັດວຽກຍາວສໍາລັບ INP ທີ່ດີກວ່າ
// ແບ່ງວຽກໜັກອອກເປັນຕ່ອນນ້ອຍໆ & ຍ້າຍໄປເຮັດວຽກເວລາຫວ່າງ chunkWork(ລາຍການ, doChunk) { const DEADLINE_MS = 50; // ຢ່າປິດກັ້ນກະທູ້ຫຼັກສໍາລັບການເຮັດວຽກທີ່ຍາວນານ () { const start = performance.now(); while (items.length && performance.now() - start < DEADLINE_MS) { doChunk(items.shift()); } if (items.length) { (window.requestIdleCallback || setTimeout)(ແລ່ນ, 0); } } run(); }
ວິທີການ: ຫຼຸດຜ່ອນ INP ເພື່ອ "ຜ່ານ" ຂັ້ນຕອນໂດຍຂັ້ນຕອນ
- ການຕິດຕາມຜູ້ໃຊ້ທີ່ແທ້ຈິງ (RUM): ເປີດຄໍເລັກຊັນ Web Vitals ໃນການຜະລິດ + ອ່ານຂໍ້ມູນ CrUX/Field
- ໂປຣໄຟລ໌ການໂຕ້ຕອບ : DevTools → ບັນທຶກ → ກົດ/ເປີດເມນູ → ຊອກຫາວຽກຍາວ > 50 ms
- ຫຼຸດຜ່ອນການປ້ອນຂໍ້ມູນ : ເຮັດໃຫ້ຕົວຈັດການນ້ອຍ, ໃຊ້ ຕົວຟັງແບບ passive , debounce/throttle.
- Split/Defer JS Load : Code-split path, load 3rd-party in lazy/consent-mode
- ຫຼຸດການເຮັດວຽກຮູບແບບ : ການນໍາໃຊ້
ການຫັນປ່ຽນ / opacity , batch DOM, ຫຼີກເວັ້ນການ reflow ບັງຄັບ
- ການທົດສອບໂທລະສັບມືຖືທີ່ແທ້ຈິງ : ການວັດແທກ INP ໃນອຸປະກອນລະດັບກາງຫາຕ່ໍາສຸດ, ບໍ່ພຽງແຕ່ອຸປະກອນທີ່ມີປະສິດທິພາບ.
- Loop : ບັນທຶກ → ປັບ → ເຮັດເລື້ມຄືນຈົນກ່ວາ ≤200 ms
ອ່ານເພີ່ມເຕີມ ແລະເຊື່ອມຕໍ່ພາຍໃນ
FAQ (ປະຊາຊົນຍັງຖາມ)
INP ແຕກຕ່າງຈາກ FID ແນວໃດ?
FID ວັດແທກເຫດການທໍາອິດດຽວ, ໃນຂະນະທີ່ INP ພິຈາລະນາເກືອບທຸກການໂຕ້ຕອບໃນຫນ້າ, ດັ່ງນັ້ນສະທ້ອນໃຫ້ເຫັນເຖິງປະສົບການຂອງຜູ້ໃຊ້ທີ່ແທ້ຈິງຫຼາຍຂຶ້ນ.
ຂ້ອຍຄວນສຸມໃສ່ຫຍັງຖ້າ INP ລົ້ມເຫລວ?
ຕັດໜ້າວຽກຍາວ, ເຮັດໃຫ້ຕົວຈັດການນ້ອຍລົງ, ຫຼຸດຜ່ອນ JS ໜັກ ແລະສະຄຣິບພາກສ່ວນທີສາມ, ແກ້ໄຂການຈັດວາງໂຄງຮ່າງ.
ຂ້ອຍຈະວັດແທກ INP ຢູ່ໃສ?
RUM/CrUX (ຊ່ອງຂໍ້ມູນ), Web Vitals overlay, DevTools Performance (lab for profile)
ເອກະສານອ້າງອີງ
ອັບເດດຫຼ້າສຸດ: 08 ສິງຫາ 2025
ກ່ຽວກັບຜູ້ຂຽນ
Vision X Brain Team — ຜູ້ຊ່ຽວຊານ SEO / ການປະຕິບັດ / CRO ສໍາລັບອີຄອມເມີຊແລະເວັບຄວາມໄວສູງ. ເລັ່ງ INP/LCP/CLS ໃນໂຄງການຕົວຈິງໂດຍການຫຼຸດຜ່ອນ JS ໜັກ ແລະເພີ່ມປະສິດທິພາບສະຖາປັດຕະຍະກໍາ. ເບິ່ງ Portfolio/Contact
ຕ້ອງການທີມງານເພື່ອຊ່ວຍໃຫ້ທ່ານຜ່ານ INP ໄດ້ໄວບໍ?
ພວກເຮົາຊ່ວຍປະຕິສໍາພັນໂປຣໄຟລ໌, ສຳຫຼວດວຽກຍາວ, ປັບຕົວຈັດການ/ການຈັດວາງ, ແລະປະຕິບັດ RUM ເພື່ອຕິດຕາມຄ່າ INP ຢ່າງຕໍ່ເນື່ອງ. ຕິດຕໍ່ພວກເຮົາ.
