T2ETECH
seo / GUIDE

Core Web Vitals คืออะไร และธุรกิจควรใช้วัดเว็บไซต์อย่างไร

อธิบาย LCP, INP และ CLS แบบเจ้าของธุรกิจ พร้อมวิธีอ่านข้อมูลภาคสนาม แยกจากผลทดสอบในห้องแล็บ และจัดลำดับงานปรับปรุงเว็บไซต์

T2ETECH Editorialอ่านประมาณ 3 นาที

Core Web Vitals คือชุดตัวชี้วัดประสบการณ์ใช้งานจริงที่ช่วยตอบว่าเนื้อหาหลักปรากฏเร็วเพียงใด หน้าเว็บตอบสนองต่อการใช้งานได้เร็วแค่ไหน และ layout ขยับจนรบกวนผู้ใช้หรือไม่ ตัวเลขเหล่านี้มีประโยชน์เมื่อใช้ร่วมกับเป้าหมายธุรกิจ ไม่ใช่ใช้แทนคุณภาพเนื้อหาหรือ conversion ทั้งหมด

ตัวชี้วัดหลักสามตัวบอกอะไร

  • LCP (Largest Contentful Paint) วัดเวลาที่องค์ประกอบเนื้อหาหลักใน viewport แสดงผล
  • INP (Interaction to Next Paint) สะท้อนความเร็วในการตอบสนองต่อการคลิก แตะ หรือพิมพ์ตลอดช่วงที่ผู้ใช้เปิดหน้า
  • CLS (Cumulative Layout Shift) วัดการขยับของ layout ที่ไม่ได้เกิดจากการกระทำของผู้ใช้

ข้อมูลภาคสนามกับผลทดสอบในห้องแล็บต่างกัน

ข้อมูลภาคสนามสะท้อนอุปกรณ์ เครือข่าย และพฤติกรรมของผู้ใช้จริงในช่วงเวลา ส่วนเครื่องมือทดสอบในห้องแล็บจำลองสภาพแวดล้อมคงที่เพื่อช่วยวิเคราะห์สาเหตุ เว็บไซต์อาจได้คะแนน Lighthouse ดี แต่ข้อมูลผู้ใช้จริงยังช้าในบางหน้า บางประเทศ หรืออุปกรณ์ระดับล่างได้ จึงควรใช้ทั้งสองแบบ

เริ่มแก้จาก template และเส้นทางที่มีผลต่อธุรกิจ

อย่าดูเฉพาะหน้าแรก จัดกลุ่มข้อมูลตาม template เช่น หน้าบริการ บทความ case study และแบบฟอร์ม แล้วให้ความสำคัญกับหน้าที่มี organic traffic, enquiry หรือรายได้สูง การแก้ component ที่ใช้ร่วมกันมักให้ผลมากกว่าปรับหน้าทีละ URL

สาเหตุที่พบบ่อยและสิ่งที่ควรตรวจ

  • LCP: ภาพ hero ใหญ่เกินไป การตอบสนองจาก server ช้า CSS หรือ font ขวางการแสดงผล
  • INP: JavaScript ทำงานยาว event handler หนัก หรือโหลด widget ภายนอกมากเกินจำเป็น
  • CLS: ภาพไม่มีขนาดตายตัว font สลับแล้วกินพื้นที่ต่างกัน หรือ banner ถูกแทรกเหนือเนื้อหา

วัดผลหลังแก้โดยไม่หลงกับคะแนนเดียว

บันทึก baseline, วันที่ deploy, template ที่แก้ และผลกระทบต่อ conversion หรือการใช้งาน จากนั้นรอข้อมูลภาคสนามสะสมตามช่วงรายงาน คะแนน 100 ในการทดสอบหนึ่งครั้งไม่สำคัญเท่าประสบการณ์ที่เสถียรบนอุปกรณ์และเส้นทางที่ลูกค้าใช้จริง

ใช้ Core Web Vitals เป็นสัญญาณเพื่อหาปัญหาและจัดลำดับงาน ไม่ใช่เป็นเป้าหมายที่แยกขาดจากผู้ใช้และผลลัพธ์ธุรกิจ

แยก lab diagnosis จากผลของผู้ใช้จริง

อ่านค่าความเร็วให้ถูกบริบท
ค่าบอกอะไรวิธีใช้
LCPเวลาที่เนื้อหาหลักแสดงหา TTFB ภาพหรือฟอนต์ที่บล็อกการแสดง
CLSการขยับเลย์เอาต์ที่ไม่คาดหมายจองพื้นที่ภาพ ฟอนต์และ widget
INPความหน่วงของ interactionตรวจ event handlers และ long tasks ใน flow จริง
TBT ใน Lighthouseงานที่บล็อก main thread ช่วงโหลดใน labใช้วินิจฉัย ไม่อ้างว่าเป็น INP field

เป้าหมาย good ของ Core Web Vitals คือ LCP ไม่เกิน 2.5 วินาที INP ไม่เกิน 200ms และ CLS ไม่เกิน 0.1 ที่ percentile 75 ของผู้ใช้แยกอุปกรณ์ ผล local ที่ไม่มี CDN scripts กับ production ที่มี scripts เหล่านั้นมีเงื่อนไขต่างกัน จึงแยกเพื่อหาต้นเหตุแทนกล่าวว่าคะแนน local คือประสบการณ์ของผู้ใช้ทั้งหมด

รักษาภาพและ motion ด้วยการลดงานที่ไม่จำเป็น

ส่งภาพตามขนาดที่แสดงและ DPR กำหนด dimensions เลือก eager เฉพาะภาพที่เห็นก่อนและพัก animation เมื่อออกจาก viewport ฟอนต์ที่ใช้ใน H1 อาจ preload ได้ แต่การ preload ทุกน้ำหนักอาจแย่งทรัพยากร ลด hydration ของส่วนที่เป็นเนื้อหาคงที่ แล้วทดสอบว่างานที่ผู้ใช้กดจริงยังเร็วและเข้าถึงได้

เชื่อมผลทดสอบกับหน้าที่สร้างผู้ติดต่อ

เลือกตรวจหน้าที่ลูกค้าต้องใช้
หน้าขั้นตอนที่ควรตรวจ
บริการอ่านข้อเสนอ ดูผลงาน และคลิก LINE บนมือถือ
ผลงานโหลดภาพที่เห็นก่อนและเปิดภาพรายละเอียดได้
บทความอ่านเนื้อหา เปิดสารบัญและไปบริการที่เกี่ยวข้อง
ติดต่อเลือกช่องทางและเห็นสถานะฟอร์มตามจริง

เก็บผลก่อนและหลังด้วยอุปกรณ์และเงื่อนไขเดียวกัน แล้วติดตามข้อมูลภาคสนามเมื่อมีจำนวนผู้ใช้เพียงพอ ผล Lighthouse หรือ TBT ใช้วินิจฉัยในห้องแล็บ ส่วน INP ต้องดูจากการโต้ตอบของผู้ใช้จริง

แหล่งอ้างอิง

web.dev — Web Vitalsweb.dev — Optimize Interaction to Next PaintGoogle Search Central — Core Web Vitals