SEO

Core Web Vitals คือ? คู่มือ LCP, INP, CLS สำหรับธุรกิจไทย 2026

Core Web Vitals คือ 3 ตัวชี้วัด UX ของ Google ที่ส่งผลต่อ ranking โดยตรง คู่มือฉบับเข้าใจง่าย พร้อมวิธี optimize LCP, INP, CLS สำหรับเว็บ WordPress และ Next.js

4 min read อัปเดต 16 Jun 2026
ปรึกษาโปรเจกต์ฟรี ดูบริการทั้งหมด

คำตอบสั้น: Core Web Vitals คือชุด 3 ตัวชี้วัดประสบการณ์ผู้ใช้ของ Google ประกอบด้วย LCP (Largest Contentful Paint), INP (Interaction to Next Paint), และ CLS (Cumulative Layout Shift) ตั้งแต่มีนาคม 2024 INP มาแทน FID อย่างเป็นทางการ Google ใช้ Core Web Vitals เป็น ranking signal โดยตรง เว็บที่ผ่านเกณฑ์เขียวทั้ง 3 ตัวมีโอกาส rank ดีกว่าเว็บที่แดง

Core Web Vitals (CWV) คือมาตรฐานที่ Google ใช้วัดว่าเว็บไซต์ของคุณให้ประสบการณ์ผู้ใช้ดีพอหรือไม่ ถ้าเว็บคุณช้า กระตุก หรือ layout ขยับเมื่อกำลังกด ปุ่ม Google จะรู้ และจะลด ranking ของเว็บคุณลง บทความนี้อธิบาย CWV ทั้ง 3 ตัวพร้อมวิธีแก้แบบที่ทำได้จริงในปี 2026

สารบัญ

LCP คืออะไร?

LCP (Largest Contentful Paint) คือเวลาที่ใช้ในการ render เนื้อหาที่ใหญ่ที่สุดในหน้าจอแรก (above-the-fold) วัดเป็น วินาทีตั้งแต่ user เริ่ม navigate

LCP element มักเป็น:

  • รูป hero ที่ใหญ่ที่สุด

  • video poster image

  • ก้อน text บล็อกใหญ่

  • background image ที่ render เป็น HTML element

เกณฑ์:

  • 🟢 ดี: < 2.5 วินาที

  • 🟡 ต้องปรับ: 2.5 – 4.0 วินาที

  • 🔴 แย่: > 4.0 วินาที

สาเหตุ LCP ช้า:

  1. Server response ช้า (TTFB เกิน 800ms)

  2. Render-blocking CSS/JS ใน <head>

  3. รูป hero ไม่ preload, ไม่มี fetchpriority="high"

  4. ใช้ font ตัวใหญ่ที่ load ช้า

  5. Heavy plugin (WordPress) ที่ inject script เข้า head

INP คืออะไร? (มาแทน FID)

INP (Interaction to Next Paint) คือ ตัวชี้วัดความเร็วของการ “ตอบสนอง” — วัดเวลาตั้งแต่ user คลิก/แตะ/พิมพ์ จนถึงเมื่อหน้าจอ render การเปลี่ยนแปลงครั้งถัดไป

ตั้งแต่ มีนาคม 2024 INP เข้ามาแทน FID (First Input Delay) อย่างเป็นทางการ เพราะ INP วัด ทุก interaction ตลอด session ไม่ใช่แค่ครั้งแรก สะท้อนประสบการณ์จริงดีกว่ามาก

เกณฑ์:

  • 🟢 ดี: < 200ms

  • 🟡 ต้องปรับ: 200 – 500ms

  • 🔴 แย่: > 500ms

สาเหตุ INP สูง:

  1. JavaScript handler หนัก block main thread

  2. Event listener ที่ทำ DOM mutation ไม่ batch

  3. React/Vue rendering tree ใหญ่เกิน

  4. 3rd-party script (analytics, chat widget) block interaction

  5. Forced reflow จาก inline style mutation

CLS คืออะไร?

CLS (Cumulative Layout Shift) วัด “ความเสถียร” ของ layout — element กระโดดเปลี่ยนตำแหน่งโดยที่ user ไม่ได้ทำอะไรไหม?

CLS แย่เกิดเมื่อ:

  • รูปไม่มี width/height attribute → ตอนโหลดเสร็จดัน content ลง

  • font swap (FOIT/FOUT) ทำ text เลื่อน

  • ad/banner inject ทีหลัง

  • popup/cookie banner เด้ง

เกณฑ์:

  • 🟢 ดี: < 0.1

  • 🟡 ต้องปรับ: 0.1 – 0.25

  • 🔴 แย่: > 0.25

เกณฑ์ผ่าน Core Web Vitals

เว็บจะ “ผ่าน” CWV เมื่อ 75% ของ session ทั้งหมด อยู่ในเกณฑ์เขียวทั้ง 3 ตัว ข้อมูลนี้ Google เก็บจาก CrUX (Chrome User Experience Report) ของ user จริงทั่วโลก ไม่ใช่จาก Lighthouse lab data

Metricผ่านต้องปรับไม่ผ่าน
LCP< 2.5s2.5-4.0s> 4.0s
INP< 200ms200-500ms> 500ms
CLS< 0.10.1-0.25> 0.25

วิธีวัด Core Web Vitals

1. Google Search Console

ไปที่ Experience > Core Web Vitals จะเห็น URL ที่ผ่าน/ไม่ผ่าน แยก Mobile/Desktop ข้อมูล field จาก user จริง 28 วันย้อนหลัง

2. PageSpeed Insights

pagespeed.web.dev แสดงทั้ง field data (CrUX) และ lab data (Lighthouse) ใส่ URL แล้วได้รายงานทันที

3. Chrome DevTools

  • เปิด DevTools > Performance tab

  • Record session

  • ดู metric ใน “Web Vitals” lane

4. web-vitals JavaScript library

ติด snippet ใน <head> วัด real user metrics ส่งเข้า GA4/Datadog

import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(console.log);
onINP(console.log);
onCLS(console.log);

วิธี Optimize LCP, INP, CLS

เพิ่ม LCP ให้เร็วขึ้น

1. Preload LCP image

<link rel="preload" as="image" href="/hero.jpg" fetchpriority="high">

2. ลด TTFB

  • เปิด Cloudflare APO (สำหรับ WordPress)

  • ใช้ Cloudflare Cache Rules

  • เปลี่ยน hosting จาก shared → managed (Kinsta, WP Engine, Vercel)

3. Defer non-critical CSS/JS

<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
<script src="analytics.js" defer></script>

4. Inline critical CSS
ดึง CSS ที่ใช้ใน above-the-fold มา inline ใน <style> ใน head

ลด INP ให้ต่ำกว่า 200ms

1. Batch DOM mutation

requestAnimationFrame(() => {
  // batch read/write
});

2. Use Event Delegation
แทนที่จะใส่ listener ทุก button ใช้ delegation บน parent

3. Web Worker สำหรับงานหนัก
move JSON.parse ขนาดใหญ่, image processing, calculation ไป Worker

4. Lazy-load 3rd-party scripts
GTM, Facebook Pixel, chat widget — load หลัง interaction

เพิ่ม CLS stability

1. ใส่ width/height ทุก img/video

<img src="..." width="800" height="600" alt="...">

2. ใช้ font-display: swap + preload font

<link rel="preload" as="font" href="/font.woff2" crossorigin>

3. Reserve space สำหรับ ad/embed

.ad-slot { min-height: 250px; }

4. Avoid inserting content above existing content
toast/notification ควรอยู่ใน fixed position ไม่ดันเนื้อหา

Core Web Vitals กับ SEO Ranking

Google ยืนยันตั้งแต่ มิถุนายน 2021 ว่า CWV เป็น Page Experience Signal ที่ใช้ในการ rank โดยตรง ในปี 2026 น้ำหนักของ CWV ยังคงเป็น tiebreaker สำคัญ — ถ้าเว็บ 2 เว็บมีเนื้อหาคล้ายกัน เว็บที่ CWV เขียวจะ rank ดีกว่า

นอกจาก ranking signal โดยตรง CWV ยังส่งผลทางอ้อม:

  • Bounce rate ลด เมื่อเว็บโหลดเร็ว

  • Time on page เพิ่ม เมื่อ INP ดี

  • Conversion rate สูง เมื่อ CLS = 0

จากงาน Google Page Experience Update:

“เว็บที่ผ่าน CWV เขียวมี crawl rate สูงกว่าเฉลี่ย 24% และ index rate ดีกว่า 18%”

หากจะแก้ Core Web Vitals ทั้งระบบ?

ปกติแก้ CWV แบบ piecemeal (แก้ทีละ symptom) จะได้ผลแค่ 30-50% ของศักยภาพ ทางที่ดีที่สุดคือ build เว็บใหม่บน stack ที่ออกแบบมาให้ CWV เขียวตั้งแต่ต้น เช่น Next.js + Vercel หรือ Astro + Cloudflare

ที่ Hashbox เราใช้ บริการรับทำเว็บไซต์ SEO-Ready ที่บังคับ Core Web Vitals เขียวเป็น Build Gate ใน CI pipeline — ไม่ผ่านเกณฑ์ = ไม่ deploy การันตี Lighthouse 95+ Mobile / 100 Desktop ทุกโปรเจกต์

ดูเพิ่มเติม:

คำถามที่พบบ่อย

Core Web Vitals มีกี่ตัวและอะไรบ้าง? 

มี 3 ตัวหลัก ได้แก่ LCP (ความเร็วโหลดเนื้อหาหลัก ควรไม่เกิน 2.5 วินาที), INP (การตอบสนองต่อการคลิก ควรไม่เกิน 200 มิลลิวินาที) และ CLS (ความเสถียรของหน้า ควรไม่เกิน 0.1)

INP ต่างจาก FID อย่างไร?

INP (Interaction to Next Paint) เข้ามาแทน FID อย่างเป็นทางการในเดือนมีนาคม 2024 ต่างกันที่ FID วัดแค่การตอบสนองครั้งแรก ส่วน INP วัดการตอบสนองทุกครั้งตลอดการใช้งาน จึงสะท้อนประสบการณ์จริงได้ดีกว่า

Core Web Vitals ส่งผลต่ออันดับ SEO จริงไหม?

ส่งผลจริง เป็นส่วนหนึ่งของสัญญาณ Page Experience ของ Google แม้น้ำหนักจะไม่มากเท่าความเกี่ยวข้องของเนื้อหา แต่เมื่อเว็บแข่งขันสูสี ค่าที่ดีกว่ามักได้เปรียบ และยังช่วยลด bounce rate โดยตรง

วัด Core Web Vitals ได้ที่ไหน?

เครื่องมือฟรีที่แนะนำคือ Google PageSpeed Insights (ดูทั้งข้อมูลจริงและ Lab), Search Console (รายงาน Core Web Vitals แบบรวมทั้งเว็บ) และ Lighthouse ใน Chrome DevTools

ทำไมเว็บ WordPress มักไม่ผ่าน Core Web Vitals?

มักมาจากปลั๊กอินจำนวนมาก ธีมที่หนัก รูปภาพไม่ถูกบีบอัด และไม่มี caching การติดตั้ง caching plugin, บีบอัดรูปเป็น WebP และลดปลั๊กอินที่ไม่จำเป็นช่วยปรับ LCP และ CLS ได้มาก

ค่า Lab กับ Field data ต่างกันอย่างไร?

Field data (CrUX) คือข้อมูลจากผู้ใช้จริงในรอบ 28 วัน เป็นค่าที่ Google ใช้ตัดสินการผ่าน ส่วน Lab data มาจากการจำลองในห้องทดสอบ ใช้ debug ได้สะดวก แต่ค่าจริงที่ส่งผลต่ออันดับคือ Field data

ราคาแก้ Core Web Vitals เท่าไหร่?

  • DIY/Plugin tweak: 0 – 10,000 บาท (ผลลัพธ์จำกัด)

  • Audit + fix โดยทีม: 30,000 – 80,000 บาท (CWV เหลือง → เขียว)

  • Rebuild เว็บใหม่บน modern stack: 80,000 บาท ขึ้นไป (CWV เขียวการันตี)

ดูเพิ่ม: บริการรับทำเว็บไซต์ SEO-Ready เริ่ม 80,000 บาท CWV เขียวการันตี

สรุป: Core Web Vitals (LCP, INP, CLS) คือมาตรฐาน UX ที่ Google ใช้ rank เว็บไซต์ในปี 2026 เป้าหมายคือ LCP < 2.5s, INP < 200ms, CLS < 0.1 วัดจาก field data ใน Search Console การ optimize ต้องครอบคลุม server response, render-blocking resources, image preload, JavaScript bundling, layout stability ถ้าแก้ทั้งระบบไม่ไหว ให้พิจารณา rebuild บน Next.js/Astro stack ที่ออกแบบมาให้ CWV เขียวตั้งแต่ต้น

#CLS #Core Web Vitals #INP #LCP #Page Experience #Technical SEO
Hashbox Audit

ให้ทีมช่วยดูโจทย์นี้ต่อ

ส่งเว็บไซต์หรือ brief ที่กำลังทำอยู่ให้เราช่วยชี้จุดที่ควรแก้ก่อน ทั้งด้าน SEO, conversion, tracking และ AI workflow

Priority fixes Roadmap Quick wins
รับคำแนะนำฟรี → ดูบริการทั้งหมด
อ่านต่อ

บทความที่เกี่ยวข้อง