Core Web Vitals ແມ່ນຊຸດຂອງຕົວຊີ້ວັດປະສົບການຂອງຜູ້ໃຊ້ Google: LCP, INP, CLS. ເງື່ອນໄຂການຜ່ານແມ່ນ LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. ກວດເບິ່ງກັບ PageSpeed Insights/CrUX ແລະແກ້ໄຂຮູບພາບ, ການໂຫຼດສະຄຣິບ, ແລະການຈັດວາງສໍາລັບການຈັດອັນດັບທີ່ດີກວ່າແລະການຂາຍເພີ່ມຂຶ້ນ.
Core Web Vitals ແມ່ນຫຍັງ? (ສະຫຼຸບດ່ວນ)
- LCP (ສີທີ່ມີເນື້ອຫາໃຫຍ່ທີ່ສຸດ) — ເມື່ອສະແດງເນື້ອຫາຫຼັກ
- INP (ການໂຕ້ຕອບກັບສີຕໍ່ໄປ) — ທີ່ໃຊ້ເວລາຕອບສະຫນອງຫຼັງຈາກທີ່ຜູ້ໃຊ້ແຕະ / ຄລິກ.
- CLS (Cumulative Layout Shift) — ໂຄງຮ່າງສັ່ນສະເທືອນໃນຂະນະທີ່ໂຫຼດ.
- ເງື່ອນໄຂການຜ່ານ — LCP ≤ 2.5s • INP ≤ 200ms • CLS ≤ 0.1
- ວັດແທກ — ໃຊ້ PageSpeed Insights (Lab+Field) ແລະ CrUX (Field)
ຕາຕະລາງ: ຕົວຊີ້ວັດ → ເງື່ອນໄຂການຜ່ານ → ເຄື່ອງມືວັດແທກ → ວິທີແກ້ໄຂຕົ້ນຕໍ
| ຕົວຊີ້ວັດ |
ເງື່ອນໄຂການຜ່ານ |
ເຄື່ອງມືວັດແທກ |
ວິທີແກ້ໄຂທີ່ແນະນໍາ |
| LCP |
≤ 2.5 ວິນາທີ |
PageSpeed Insights, CrUX, Lighthouse |
ບີບອັດຮູບພາບໃສ່ AVIF/WebP, ຮູບ LCP ລ່ວງໜ້າ |
| ດັດ |
≤ 200 ມິນລິວິນາທີ |
PageSpeed Insights, ລາຍງານ Chrome UX |
ຫຼຸດລະຫັດພາກສ່ວນທີສາມ/ໜັກ, ແບ່ງວຽກຍາວດ້ວຍ requestIdleCallback , ໃຊ້ lazy-init, ຍ້າຍວຽກໄປຫາ Web Workers. |
| CLS |
≤ 0.1 |
PageSpeed Insights, DevTools Performance |
ກໍານົດຂະຫນາດຮູບພາບ / ວິດີໂອທີ່ມີ ຄວາມກວ້າງ / ຄວາມສູງ , ສະຫງວນພື້ນທີ່ໂຄສະນາ, ຫຼີກເວັ້ນການໂຫຼດຕົວອັກສອນທີ່ເຮັດໃຫ້ເກີດການເລື່ອນພາບ. |
ຕາຕະລາງ: ອາການທີ່ນິຍົມ → ສາເຫດ → ວິທີແກ້ໄຂ (ສາມາດເຮັດໄດ້ທັນທີ)
| ອາການ | ສາເຫດ | ວິທີການແກ້ໄຂໃນ Webflow / ທຸກແພລະຕະຟອມ | ອ້າງອີງ |
|---|
| ຮູບຮີໂຣໂຫຼດຊ້າໆ (LCP ສີແດງ) |
ຮູບພາບຂະຫນາດໃຫຍ່ / ຮູບແບບເກົ່າ, ບໍ່ມີການໂຫຼດລ່ວງຫນ້າ |
ປ່ຽນເປັນ AVIF/WebP, ໃຊ້ preload , ໃຫ້ບໍລິການຜ່ານ CDN. |
web.dev/vitals |
| ກົດປຸ່ມແລະການຊັກຊ້າ (INP ສູງ) |
Script ທີສາມ/ກະທູ້ຫຼັກຍາວ |
ຕັດສະຄຣິບທີ່ບໍ່ຈຳເປັນ, ແຍກວຽກອອກ, ແລະເລື່ອນເວລາການໂຫຼດການວິເຄາະຫຼັງຈາກການໂຕ້ຕອບ. |
ຄໍາແນະນໍາ INP |
| ເລື່ອນດ້ານໜ້າ (CLS ສູງ) |
ບໍ່ມີຮູບພາບ / ພື້ນທີ່ໂຄສະນາທີ່ສະຫງວນໄວ້, ການປ່ຽນຕົວອັກສອນຊ້າ |
ກໍານົດຂະຫນາດສື່, ໃຊ້ font-display: swap; , ວາງໂຄສະນາດ້ວຍຕົວຍຶດ |
ຄໍາແນະນໍາ CLS |
ຕາຕະລາງກວດກາ (15 ນາທີ)
- ບີບອັດຮູບຮີໂຣໃສ່ AVIF/WebP +
ໂຫຼດ ຮູບ LCP
- ເອົາສະຄຣິບພາກສ່ວນທີສາມທີ່ບໍ່ຈໍາເປັນອອກ (ການຫຼິ້ນຄືນ/ໂຄສະນາ/abtests ທີ່ບໍ່ໄດ້ໃຊ້).
- ກໍານົດຂະຫນາດຂອງຮູບພາບ / ວິດີໂອທັງຫມົດ, ປ້ອງກັນ CLS
- ກວດເບິ່ງຜົນໄດ້ຮັບໃນ PageSpeed Insights (ມືຖືທໍາອິດ) ແລະ GSC Core Web Vitals.
ວິທີການ: ເລັ່ງ Core Web Vitals ໃຫ້ "ຜ່ານ" ພາຍໃນ 7 ມື້
- ວັນທີ 1: ລະບຸ LCP/INP/CLS ໃນໜ້າການສ້າງລາຍໄດ້ສູງສຸດຂອງ PSI/GSC.
- ວັນທີ 2: ສ້າງຮູບໃໝ່ (AVIF/WebP) + ໂຫຼດ LCP ລ່ວງໜ້າ
- ວັນທີ 3: ຕັດ/ຍ້າຍການໂຫຼດສະຄຣິບທີສາມ + ແຍກວຽກ JS ໜັກ
- ວັນທີ 4: ເພີ່ມຂະຫນາດສື່ທັງໝົດ + ປ້ອງກັນການເລື່ອນຮູບແບບ
- ມື້ທີ 5: ຕັ້ງຄ່າ cache/CDN, ຫຍໍ້/ລວມເຂົ້າກັນພຽງແຕ່ຖ້າຈໍາເປັນ.
- ວັນທີ 6: ທົດສອບ PSI/CrUX ຄືນໃໝ່, ແກ້ໄຂໜ້າທີ່ຍັງບໍ່ຜ່ານເທື່ອ.
- ວັນທີ 7: ຕັ້ງຄ່າແຜງໜ້າປັດການຕິດຕາມ + ຮູບພາບ/ສະຄຣິບອັບເດດ SOP
ການບໍລິການທີ່ກ່ຽວຂ້ອງ (ການເຊື່ອມຕໍ່ພາຍໃນ)
ອ່ານເພີ່ມເຕີມ (ບົດຄວາມທີ່ກ່ຽວຂ້ອງ)
FAQ (ປະຊາຊົນຍັງຖາມ)
ເປັນຫຍັງ Core Web Vitals ມີຜົນກະທົບຕໍ່ການຈັດອັນດັບ?
ເນື່ອງຈາກວ່າພວກເຂົາເປັນສັນຍານຄຸນນະພາບປະສົບການຂອງຜູ້ໃຊ້ທີ່ແທ້ຈິງ (ຂໍ້ມູນພາກສະຫນາມ) ທີ່ Google ໃຊ້ຮ່ວມກັນກັບປັດໃຈອື່ນໆເພື່ອຈັດອັນດັບ.
INP ແຕກຕ່າງຈາກ FID ແນວໃດ?
INP ວັດແທກຄວາມແຝງຂອງການໂຕ້ຕອບທັງໝົດໃນໜ້າໃດໜຶ່ງ (ກວ້າງກວ່າ FID), ສະນັ້ນມັນສະທ້ອນເຖິງປະສົບການຕົວຈິງໄດ້ຢ່າງຖືກຕ້ອງກວ່າ.
ຂ້ອຍຄວນແກ້ໄຂຫຍັງກ່ອນ?
LCP: Hero image/Render block resource → INP: ຫຼຸດຜ່ອນສະຄຣິບພາກສ່ວນທີສາມ/ວຽກ JS ແຍກຕ່າງຫາກ → CLS: ສະຫງວນພື້ນທີ່ມີເດຍ.
ອັບເດດຫຼ້າສຸດ: 09 ສິງຫາ 2025
ກ່ຽວກັບຜູ້ຂຽນ
ທີມງານ Vision X Brain — ການປະຕິບັດເວັບ / UX / UI / ທີມງານ SEO ດ້ານວິຊາການເລັ່ງ Core Web Vitals ເພື່ອໃຫ້ໄດ້ມາດຕະຖານມືຖື, ສຸມໃສ່ຜົນໄດ້ຮັບທີ່ສາມາດວັດແທກໄດ້ແລະສະຫນອງປື້ມບັນທຶກການບໍາລຸງຮັກສາຫລັງການຈັດສົ່ງ.
ຕ້ອງການຜ່ານ CWV ແລະປັບປຸງການຈັດອັນດັບຂອງເຈົ້າພາຍໃນ 2 ອາທິດບໍ?
ເລີ່ມຕົ້ນດ້ວຍການກວດສອບປະສິດທິພາບ + ການແກ້ໄຂແຜນທີ່ເສັ້ນທາງ ເບິ່ງ ການບໍລິການປັບປຸງເວັບ ຫຼື ບໍລິການ Webflow
