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

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

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 วัน

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

อยากให้ CWV ผ่านและอันดับดีขึ้นภายใน 2 สัปดาห์?

เริ่มด้วย Performance Audit + Roadmap แก้ไข ดู บริการรีโนเวตเว็บ หรือ บริการ Webflow

แชร์

Recent Blog

Mobile-First Indexing คู่มือครบ: ตั้งค่าให้เว็บติดอันดับ (อัปเดต 2025)

คู่มือ Mobile-First Indexing สำหรับทีมการตลาด/เว็บ: อธิบายหลักการ Mobile-first ของ Google, เช็กลิสต์ความเท่าเทียมระหว่างเดสก์ท็อป–มือถือ (content/สคีมา/เมตา/สื่อ), ปัญหาพบบ่อย, วิธีทดสอบใน GSC และแผนแก้ไข 7 ขั้น พร้อมลิงก์มาตรฐานอ้างอิง

ดูเพิ่มเติม
SEO สำหรับบริษัทเช่าเครื่องจักรก่อสร้าง: คู่มือ Local SEO 2025

คู่มือ SEO สำหรับธุรกิจเช่าเครื่องจักรก่อสร้าง (แบคโฮ เครน รถขุด ฯลฯ) เน้นโครงคอนเทนต์ตาม “บริการ × พื้นที่”, ปรับ Google Business Profile/รีวิว, ใส่สคีมาท้องถิ่น, เร่งความเร็วตาม Core Web Vitals และวัดผล GA4 พร้อมแผน 30 วันลงมือได้จริง

ดูเพิ่มเติม
PWA สำหรับ eCommerce: เร็ว ติดตั้งได้ เพิ่มยอดขาย (อัปเดต 2025)

สรุปวิธีทำ eCommerce ให้ “เร็ว ติดตั้งได้ และคอนเวิร์ตสูง” ด้วย PWA: โครงสร้างเทคนิคที่จำเป็น (Manifest/Service Worker), กลยุทธ์แคชช็อป, Web Push/Payment Request, ตัวอย่างโค้ด + Workbox, ตารางเทียบผลกระทบต่อ KPI และแผนเปิดตัว 14 วัน

ดูเพิ่มเติม