🔥 แค่ 5 นาที เปลี่ยนมุมมองได้เลย

Core Web Vitals คืออะไร? เกณฑ์ LCP/INP/CLS + วิธีแก้ให้ผ่าน (อัปเดต 2025) | Vision X Brain

Q: INP ต่างจาก FID ยังไง?

INP วัดความหน่วงของปฏิสัมพันธ์ทั้งหมดในหน้า จึงสะท้อนประสบการณ์จริงแม่นยำกว่า FID

Q: ต้องเริ่มแก้อะไรก่อน?

เริ่มจาก LCP (ภาพฮีโร่/รีซอร์สบล็อกเรนเดอร์) → INP (ลดสคริปต์ที่สาม/แยกงาน JS) → CLS (จองพื้นที่สื่อ)

By Tanakit Chaithip

June 10, 2025

ยาวไป อยากเลือกอ่าน?

Webflow

Core Web Vitals คือชุดตัวชี้วัดประสบการณ์ผู้ใช้ของ Google ได้แก่ LCP, INP, CLS เกณฑ์ผ่านคือ LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1 ตรวจด้วย PageSpeed Insights/CrUX แล้วแก้ที่ภาพ การโหลดสคริปต์ และโครงเลย์เอาต์ เพื่ออันดับที่ดีขึ้นและยอดขายที่เพิ่มขึ้น.

Core Web Vitals คืออะไร (สรุปเร็ว)

LCP (Largest Contentful Paint) — เวลาแสดงคอนเทนต์หลัก
INP (Interaction to Next Paint) — เวลาตอบสนองหลังผู้ใช้แตะ/คลิก
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, `preload` รูป LCP, ใช้ CDN, ลด CSS/JS บล็อกเรนเดอร์
INP	≤ 200 มิลลิวินาที	PageSpeed Insights, Chrome UX Report	ลดสคริปต์ที่สาม/โค้ดหนัก, แยกงานยาวด้วย `requestIdleCallback`, ใช้ lazy-init, ย้ายงานไป Web Worker
CLS	≤ 0.1	PageSpeed Insights, DevTools Performance	กำหนดขนาดรูป/วิดีโอด้วย `width/height`, จองพื้นที่โฆษณา, หลีกเลี่ยงโหลดฟอนต์ทำเลื่อน

ตาราง: อาการยอดฮิต → สาเหตุ → วิธีแก้ (ทำได้ทันที)

อาการ	สาเหตุ	วิธีแก้บน Webflow/ทุกแพลตฟอร์ม	อ้างอิง
ภาพฮีโร่โหลดช้า (LCP แดง)	รูปใหญ่/ฟอร์แมตเก่า ไม่มี preload	แปลงเป็น AVIF/WebP, ใช้ `preload` LCP, เสิร์ฟผ่าน CDN	web.dev/vitals
กดปุ่มแล้วหน่วง (INP สูง)	สคริปต์ที่สาม/งานเมนเธรดยาว	ตัดสคริปต์ไม่จำเป็น, แยกงาน, เลื่อนโหลด analytics หลังอินเทอร์แอ็กชัน	INP guidance
หน้าเลื่อนยวบ (CLS สูง)	ไม่จองพื้นที่รูป/โฆษณา, ฟอนต์สลับช้า	ตั้งขนาดสื่อ, ใช้ `font-display: swap;`, จัดวางโฆษณาพร้อม placeholder	CLS guidance

เช็กลิสต์โต๊ะทำงาน (15 นาที)

บีบอัดรูปฮีโร่เป็น AVIF/WebP + ใส่ preload รูป LCP
ถอดสคริปต์ที่สามที่ไม่จำเป็น (replay/ads/abtest ที่ไม่ใช้)
ตั้งขนาดรูป/วิดีโอทุกตัว ป้องกัน CLS
ตรวจผลใน PageSpeed Insights (มือถือก่อน) และ GSC Core Web Vitals

How-to: เร่ง Core Web Vitals ให้ “ผ่าน” ภายใน 7 วัน

Day 1: ระบุ LCP/INP/CLS บนเพจรายได้สูงสุดจาก PSI/GSC
Day 2: ทำภาพใหม่ (AVIF/WebP) + preload LCP
Day 3: ตัด/เลื่อนโหลดสคริปต์ที่สาม + แยกงาน JS หนัก
Day 4: ใส่ขนาดสื่อทั้งหมด + กันเลย์เอาต์เลื่อน
Day 5: ตั้ง cache/CDN, minify/merge เฉพาะจำเป็น
Day 6: รีเทสต์ PSI/CrUX, แก้เพจที่ยังไม่ผ่าน
Day 7: ตั้งแดชบอร์ดติดตาม + SOP อัปเดตรูป/สคริปต์

บริการที่เกี่ยวข้อง (Internal Links)

อ่านต่อ (บทความที่เกี่ยวข้อง)

FAQ (People Also Ask)

ทำไม Core Web Vitals ถึงกระทบอันดับ?
เพราะเป็นสัญญาณคุณภาพประสบการณ์ผู้ใช้ในโลกจริง (Field Data) Google ใช้ร่วมกับปัจจัยอื่นเพื่อจัดอันดับ

INP ต่างจาก FID ยังไง?
INP วัดความหน่วงของปฏิสัมพันธ์ทั้งหมดในหน้า (ครอบคลุมกว่า FID) จึงสะท้อนประสบการณ์จริงแม่นยำกว่า

ต้องเริ่มแก้อะไรก่อน?
เริ่มจาก LCP: รูปฮีโร่/รีซอร์สบล็อกเรนเดอร์ → INP: ลดสคริปต์ที่สาม/แยกงาน JS → CLS: จองพื้นที่สื่อ

อัปเดตล่าสุด: 09 Aug 2025

เกี่ยวกับผู้เขียน

Vision X Brain Team — ทีม Web Performance/UX/UI/Technical SEO เร่ง Core Web Vitals ให้ผ่านเกณฑ์มือถือ เน้นผลลัพธ์ที่วัดได้จริง พร้อมเพลย์บุ๊กบำรุงรักษาหลังส่งมอบ