Core Web Vitals 2025 ทำไมเว็บไทยถึง fail และวิธีแก้จริงๆ

Google ใช้ Core Web Vitals (CWV) เป็นส่วนหนึ่งของ ranking signal มาตั้งแต่ปี 2021 แต่จากการที่เราตรวจสอบเว็บลูกค้าและ website ไทยทั่วไปกว่า 200 รายการ พบว่า มากกว่า 70% fail อย่างน้อยหนึ่ง metric

สามตัวชี้วัดที่ต้องรู้

LCP (Largest Contentful Paint) — โหลดเร็วแค่ไหน?

เป้าหมาย: < 2.5 วินาที

LCP วัดเวลาที่ element ที่ใหญ่ที่สุดบนหน้า (มักเป็นรูปหรือ heading ใหญ่) โหลดเสร็จ

ปัญหาที่พบบ่อยในเว็บไทย:

• Hero image ที่ไม่ได้ optimize — ไฟล์ขนาด 3-8 MB เป็นเรื่องปกติ
• ไม่มี fetchpriority="high" บน hero image
• ใช้ Google Fonts โดยไม่ preconnect

วิธีแก้:

<!-- ✅ ถูก -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<img src="/hero.avif" fetchpriority="high" alt="Hero">

<!-- ❌ ผิด -->
<img src="/hero-original-8mb.jpg" alt="Hero">

CLS (Cumulative Layout Shift) — หน้าขยับไหมระหว่างโหลด?

เป้าหมาย: < 0.1

CLS วัดการขยับของ layout ระหว่างโหลด ซึ่งทำให้ผู้ใช้กดผิดปุ่ม

ปัญหาที่พบบ่อย:

• รูปที่ไม่กำหนด width และ height
• Font fallback ที่ขนาดต่างจาก web font มาก
• Banner โฆษณาที่ inject เข้ามาทีหลัง

วิธีแก้:

/* ✅ กำหนด aspect ratio ให้รูปเสมอ */
img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

/* หรือกำหนด width/height attribute ใน HTML */

INP (Interaction to Next Paint) — ตอบสนองเร็วแค่ไหน?

เป้าหมาย: < 200ms

INP แทนที่ FID ตั้งแต่ปี 2024 วัด responsiveness ของทุก interaction ไม่ใช่แค่ครั้งแรก

ปัญหาที่พบบ่อย:

• JavaScript bundle ใหญ่เกินไป blocking main thread
• Animation ที่ไม่ใช้ transform หรือ opacity (ทำให้ browser ต้อง reflow)
• Event handlers ที่ทำงานหนักใน click/input events

เครื่องมือที่เราใช้ในการ debug

1. Chrome DevTools > Performance — ดู long tasks และ main thread blocking
2. PageSpeed Insights — ดูคะแนน field data จาก real users
3. web.dev/measure — analyze โดยละเอียด
4. Lighthouse — ใช้ใน CI/CD pipeline เพื่อ prevent regression

สิ่งที่ทำให้ Lighthouse score ไม่ตรงกับ field data

Lighthouse รันบน simulated slow mobile network ซึ่งจะ show score ต่ำกว่า real-world เสมอ ส่วน CrUX (Chrome User Experience Report) ใช้ข้อมูลจาก real users ซึ่งจะต่างกันมาก

แนะนำให้ดูทั้งสอง — Lighthouse สำหรับ detect issues, CrUX สำหรับดูผลกระทบจริง

บทสรุป

Core Web Vitals ไม่ใช่เรื่องเทคนิคที่ซับซ้อน แต่ต้องใส่ใจรายละเอียดตั้งแต่ออกแบบ เช่น กำหนด aspect-ratio ให้รูป, compress รูปให้ดี, lazy load ที่ถูกต้อง — สิ่งเหล่านี้ถ้าทำตั้งแต่ต้นแทบไม่มี overhead เพิ่มเติม

ถ้าเว็บคุณ fail CWV อยู่ ติดต่อเราได้ เรามี Performance Audit service ที่ให้ action items ชัดเจนทุกข้อ