นิยาม
Core Web Vitals คือชุดตัวชี้วัดประสิทธิภาพเว็บไซต์ที่ Google กำหนดขึ้น เพื่อวัดประสบการณ์จริงของผู้ใช้บนหน้าเว็บ ประกอบด้วย 3 ตัวชี้วัดหลัก ได้แก่ LCP (Largest Contentful Paint), INP (Interaction to Next Paint) และ CLS (Cumulative Layout Shift) ทั้งสามตัวนี้ถูกนับเป็นสัญญาณ ranking ในระบบ Search ของ Google โดยตรง
สำหรับคนทำ DTC/อีคอมเมิร์ซในไทย สิ่งนี้สำคัญมาก เพราะหน้า Landing Page ที่โหลดช้าเพียง 1 วินาที สามารถทำให้อัตราการแปลง (Conversion Rate) ตกลงได้ถึง 7% และถ้าช้า 3 วินาทีขึ้นไป ผู้ใช้มากกว่า 53% จะกดออกทันที (ข้อมูลจาก Google/Deloitte) นั่นหมายความว่ายอดขายที่คุณเสียไปอาจไม่ใช่เพราะราคา แต่เพราะเว็บโหลดไม่ทันใจ
อุปมาอุปไมย (Analogy)
ลองนึกภาพว่าหน้าร้านค้าออนไลน์ของคุณคือ ร้านสะดวกซื้อหน้าร้าน
- LCP = ระยะเวลาที่ป้ายร้านและสินค้าตัวหลักปรากฏให้ลูกค้าเห็นตั้งแต่เดินเข้ามา ถ้ารอนาน ลูกค้าก็เดินออก
- INP = ความไวของพนักงานเมื่อลูกค้ากดปุ่ม "หยิบใส่ตะกร้า" ถ้าพนักงานตอบสนองช้า ลูกค้าหงุดหงิด
- CLS = ป้ายราคาที่แขวนไม่แน่น อยู่ๆ ก็เลื่อนไปโดนมือลูกค้าตอนกำลังจะกดสั่งซื้อ ทำให้กดผิด
ทั้งหมดนี้คือ "ความรู้สึกแรก" ที่ลูกค้ามีต่อร้านคุณ ก่อนที่เขาจะตัดสินใจจ่ายเงิน
สูตรและเกณฑ์การวัด
1. LCP (Largest Contentful Paint)
วัดเวลาที่องค์ประกอบใหญ่สุดบนหน้าจอ (มักเป็นรูป Hero Banner หรือ H1) โหลดเสร็จ
LCP = เวลาที่ element ใหญ่สุด render เสร็จ - เวลาที่ผู้ใช้เริ่มโหลดหน้า
| ระดับ | เวลา |
|---|---|
| ดี (Good) | ≤ 2.5 วินาที |
| ต้องปรับปรุง | 2.5 – 4.0 วินาที |
| แย่ (Poor) | > 4.0 วินาที |
2. INP (Interaction to Next Paint)
วัดความหน่วงจากการที่ผู้ใช้คลิก/แตะ จนหน้าเว็บตอบสนอง (แทนที่ FID ตั้งแต่มีนาคม 2024)
INP = เวลาตอบสนอง interaction ที่แย่ที่สุด (ตัด outlier 1% ออก)
| ระดับ | เวลา |
|---|---|
| ดี | ≤ 200 ms |
| ต้องปรับปรุง | 200 – 500 ms |
| แย่ | > 500 ms |
3. CLS (Cumulative Layout Shift)
วัดการเลื่อนของ layout ที่ไม่คาดคิด คิดเป็นคะแนนไม่มีหน่วย
CLS = Σ (Impact Fraction × Distance Fraction)
| ระดับ | คะแนน |
|---|---|
| ดี | ≤ 0.1 |
| ต้องปรับปรุง | 0.1 – 0.25 |
| แย่ | > 0.25 |
ตารางเปรียบเทียบ Core Web Vitals
| ตัวชี้วัด | วัดอะไร | เกณฑ์ดี | ผลกระทบต่อ DTC ไทย | เครื่องมือเช็ค |
|---|---|---|---|---|
| **LCP** | ความเร็วโหลด element หลัก | ≤ 2.5s | ยอด add-to-cart ลดลงเมื่อโหลดช้า | PageSpeed Insights, Search Console |
| **INP** | ความไวตอบสนอง | ≤ 200ms | ปุ่ม "สั่งซื้อ" กดแล้วหน่วง = ตะกร้าทิ้ง | Chrome DevTools, Web Vitals Extension |
| **CLS** | ความนิ่งของ layout | ≤ 0.1 | ปุ่มเลื่อนตอนกด = กดผิด = คืนสินค้า | Layout Instability API |
| **TTFB** | เวลาตอบสนองเซิร์ฟเวอร์ | ≤ 800ms | ส่งผลต่อ LCP โดยตรง | WebPageTest |
| **FCP** | แรกที่ pixel ปรากฏ | ≤ 1.8s | ตัวชี้วัดเสริม ไม่นับใน CWV | Lighthouse |
การประยุกต์ใช้กับร้าน DTC ไทย
1. หน้า Product Detail (PDP)
หน้าที่สำคัญที่สุดของอีคอมเมิร์ซ ต้องให้ LCP ต่ำกว่า 2.5 วินาที โดยเฉพาะรูปสินค้าตัวหลัก
- ใช้ <img loading="eager"> กับรูป Hero
- บีบอัดรูปเป็น WebP/AVIF ลดขนาดได้ 30–50%
- ใช้ CDN ไทย (เช่น Cloudflare, Bunny) ลด TTFB
2. หน้า Checkout
INP สำคัญมาก เพราะทุก interaction คือเงิน
- หลีกเลี่ยง JavaScript หนักๆ ในขั้นตอนกรอกที่อยู่
- ใช้ Debounce กับช่องค้นหาที่อยู่/รหัสไปรษณีย์
- ตั้ง fetchpriority="high" กับปุ่ม "ชำระเงิน"
3. หน้า Landing Page จากโฆษณา Facebook/TikTok
ผู้ใช้มาจากโฆษณามี patience ต่ำมาก CLS ต้องนิ่ง
- กำหนด width/height ของรูปและ iframe ล่วงหน้า
- อย่า inject แบนเนอร์โปรโมชั่นด้านบนหลังโหลด
- ใช้ font-display: swap กับฟอนต์ไทย (เช่น LINE Seed, IBM Plex Sans Thai)
4. ตัวเลขที่ควรจับตา
- 1 วินาที ที่โหลดเร็วขึ้น = Conversion เพิ่มขึ้นเฉลี่ย 7% (Deloitte)
- 0.1 วินาที ที่ INP ดีขึ้น = ลดอัตราตะกร้าทิ้งได้ ~5% ในกลุ่ม mobile
- 75% ของผู้ใช้มือถือในไทยที่เจอ CLS > 0.25 จะไม่อยู่ต่อถึงหน้าที่สอง
ข้อเข้าใจผิดที่พบบ่อย
1. "คะแนน Lighthouse 100 = CWV ผ่าน" — ผิด Lighthouse เป็น lab data แต่ CWV ใช้ field data จากผู้ใช้จริง คะแนนอาจต่างกันได้มาก
2. "ปรับแค่หน้าแรกก็พอ" — Google ประเมินเป็น URL-level หน้า PDP, หมวดหมู่, บทความ ต้องดูแยกกัน
3. "INP = FID" — FID วัดแค่ input delay แต่ INP วัดตลอด event จน render เสร็จ จึงโหดกว่าและเลิกใช้ FID แล้วตั้งแต่ 2024
4. "ใช้ Plugin WordPress แล้วจบ" — Plugin cache ช่วย LCP ได้ แต่ไม่ช่วย INP ที่มาจาก third-party script เช่น pixel โฆษณา
5. "CLS เป็น 0 = ดีที่สุด" — จริง แต่การไล่ CLS เป็น 0 อาจต้อง sacrifice ฟีเจอร์ เช่น pop-up โปร ที่จริงๆ ขายได้ ถ้า CLS ≤ 0.1 ก็เพียงพอ
6. "มือถือกับเดสก์ท็อปคะแนนเดียวกัน" — Google ใช้ mobile-first indexing คะแนนมือถือคือคะแนนที่ใช้จริง ต้องเช็คแยก
คำศัพท์ที่เกี่ยวข้อง
- LCP (Largest Contentful Paint) — ตัวชี้วัดความเร็วโหลด
- INP (Interaction to Next Paint) — ตัวชี้วัดความไวตอบสนอง
- CLS (Cumulative Layout Shift) — ตัวชี้วัดความนิ่งของ layout
- FID (First Input Delay) — ตัวชี้วัดเก่า เลิกใช้แล้ว
- TTFB (Time to First Byte) — เวลาตอบสนองเซิร์ฟเวอร์
- FCP (First Contentful Paint) — แรกที่เนื้อหาปรากฏ
- CrUX (Chrome User Experience Report) — แหล่งข้อมูล field data ของ Google
- PageSpeed Insights — เครื่องมือเช็คฟรีของ Google
- Search Console — รายงาน CWV ระดับไซต์
- Mobile-First Indexing — Google จัดอันดับจากเวอร์ชันมือถือเป็นหลัก
- Third-Party Script — สคริปต์ภายนอก (pixel, chat, analytics) มักเป็นตัวการทำ INP แย่
- Conversion Rate Optimization (CRO) — การปรับเว็บให้แปลงยอดขายดีขึ้น ซึ่ง CWV เป็นส่วนหนึ่ง
สรุปสั้นๆ สำหรับคนทำ DTC ไทย: Core Web Vitals ไม่ใช่เรื่องเทคนิคล้วนๆ แต่คือ ตัวเลขที่แปลงเป็นยอดขายได้โดยตรง ถ้า LCP ผ่าน 2.5s, INP ผ่าน 200ms, CLS ผ่าน 0.1 คุณจะได้ทั้ง ranking ที่ดีขึ้นจาก Google และ conversion ที่สูงขึ้นจากลูกค้าจริง เริ่มจากวัดด้วย PageSpeed Insights วันนี้ แล้วแก้ทีละหน้าตามลำดับความสำคัญทางธุรกิจ