Search visibility system
Core Web Vitals สำหรับเว็บไทย: วัดและแก้ยังไง
Key takeaways
- Core Web Vitals 3 ตัว: LCP (เร็วในการแสดงเนื้อหาหลัก), INP (ตอบสนองการคลิก), CLS (หน้าไม่ขยับ)
- เกณฑ์ "ดี": LCP ≤ 2.5s, INP ≤ 200ms, CLS < 0.1 ดูเกณฑ์ Core Web Vitals จาก Google ได้ที่ web.dev Core Web Vitals
- ปัญหาที่พบบ่อยในเว็บไทย: รูป hero โหลดช้า (LCP) และฟอนต์ทำให้ข้อความ reflow (CLS)
Core Web Vitals คือชุดตัวชี้วัดประสบการณ์ผู้ใช้ที่ Google ใช้เป็นปัจจัยจัดอันดับ และกระทบ conversion โดยตรง — เว็บช้า/กระตุก คนเด้งออกก่อนเห็นข้อเสนอ
Core Web Vitals คืออะไร 3 ตัวนี้วัดอะไร?
- LCP (Largest Contentful Paint) — เนื้อหาหลัก (มักเป็นรูป hero) แสดงเร็วแค่ไหน เกณฑ์ดี ≤ 2.5 วินาที
- INP (Interaction to Next Paint) — เว็บตอบสนองการคลิก/แตะเร็วแค่ไหน เกณฑ์ดี ≤ 200ms
- CLS (Cumulative Layout Shift) — หน้าขยับ/เด้งระหว่างโหลดมากแค่ไหน เกณฑ์ดี < 0.1
วัด Core Web Vitals ยังไง?
ใช้ PageSpeed Insights (ใส่ URL ดูได้ฟรี) — มีทั้งข้อมูลในห้องแล็บและข้อมูลผู้ใช้จริง (CrUX) ถ้าเว็บทราฟฟิกยังน้อยอาจไม่มี field data ให้ดู lab แทน วัดทั้ง mobile และ desktop เพราะมักต่างกันมาก (มือถือมักแย่กว่า)
แก้ LCP ช้า (ปัญหาที่พบบ่อยสุด)
LCP ช้ามักมาจากรูป hero ที่ใหญ่/โหลดช้า แก้โดย:
- preload รูป LCP +
fetchpriority="high"ให้โหลดเป็นอันดับแรก - เสิร์ฟรูปขนาดเหมาะกับมือถือ (WebP) ไม่ส่งรูป desktop ลงจอเล็ก
- อย่าให้เนื้อหาหลักอยู่หลัง JavaScript/แอนิเมชันที่โหลดช้า
แก้ CLS (หน้าขยับ) — ระวังเรื่องฟอนต์
CLS มักมาจาก: รูป/วิดีโอไม่กำหนดขนาด, โฆษณา/วิดเจ็ตแทรกทีหลัง, และ ฟอนต์ที่ทำให้ข้อความ reflow วิธีแก้:
- กำหนด
width/heightหรือaspect-ratioให้รูปทุกอัน - preload ฟอนต์ ที่ใช้ครึ่งบนจอ + ใช้
font-display: optional(กันข้อความสลับฟอนต์แล้วขยับ) - จองพื้นที่สำหรับ element ที่แทรกทีหลัง
เคสจริง: เราเคยแก้ CLS ที่แกว่งเพราะ self-hosted font ไม่ได้ preload — เพิ่ม preload แล้ว CLS กลับเป็น 0 (รายละเอียดฝั่งเทคนิคสัมพันธ์กับงาน performance)
แก้ INP (ตอบสนองช้า)
INP แย่มักมาจาก JavaScript หนักบน main thread — ลด/แบ่งโหลด JS ที่ไม่จำเป็น, defer สคริปต์ที่ไม่ใช้ตอนแรก, และลดสคริปต์ third-party
Core Web Vitals สัมพันธ์กับการวัดผลยังไง
เว็บเร็วช่วยทั้งอันดับและ conversion — และการมีระบบ tracking ที่ดี (ดู คู่มือ tracking) ทำให้เห็นว่าเว็บที่เร็วขึ้นเปลี่ยนเป็น lead เพิ่มจริงไหม
FAQ
ถาม: เว็บช้าทำให้ตกอันดับจริงไหม? ตอบ: จริง Core Web Vitals เป็นปัจจัยจัดอันดับ และกระทบ conversion โดยตรง โดยเฉพาะบนมือถือ
ถาม: วัดแล้วได้คนละค่าทุกครั้ง ปกติไหม? ตอบ: ค่าในห้องแล็บแกว่งได้ตามจังหวะเครือข่าย โดยเฉพาะ CLS/LCP ที่เกี่ยวกับการโหลด — ควรวัดซ้ำหลายครั้งและดูข้อมูลผู้ใช้จริง (CrUX) ประกอบ
ถาม: ต้องได้ 100 คะแนนไหม? ตอบ: ไม่จำเป็น เป้าคือผ่านเกณฑ์ "ดี" ของ 3 ตัวหลัก (LCP/INP/CLS) คะแนนรวมเป็นแค่ภาพประกอบ
อยากรู้ว่าเว็บคุณผ่าน Core Web Vitals ไหม? เราวัดและแก้ให้ได้ ปรึกษาฟรี · โทร 098-793-9944