Core Web Vitals คืออะไร? 3 ตัวชี้วัดสำคัญที่เว็บไซต์ควรผ่าน

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

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

Core Web Vitals คืออะไร?

Core Web Vitals คือชุดตัวชี้วัดประสบการณ์ใช้งานเว็บไซต์ที่ Google กำหนดขึ้น เพื่อประเมินคุณภาพของหน้าเว็บใน 3 ด้านหลัก ได้แก่

• ความเร็วในการแสดงเนื้อหาหลัก
• ความรวดเร็วในการตอบสนอง
• ความมั่นคงขององค์ประกอบบนหน้าจอ

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

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

3 ตัวชี้วัด Core Web Vitals ที่สำคัญ

Google แนะนำให้พิจารณาผลที่เปอร์เซ็นไทล์ 75 หมายความว่า อย่างน้อย 75% ของการเข้าชมควรได้รับประสบการณ์ที่อยู่ในเกณฑ์ดี ทั้งบนโทรศัพท์มือถือและคอมพิวเตอร์

1. LCP วัดความเร็วในการแสดงเนื้อหาหลัก

LCP ย่อมาจาก Largest Contentful Paint เป็นตัวชี้วัดระยะเวลาที่องค์ประกอบหลักขนาดใหญ่ที่สุดในพื้นที่หน้าจอแสดงผลเสร็จสมบูรณ์

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

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

เกณฑ์ของ LCP

• ไม่เกิน 2.5 วินาที: อยู่ในเกณฑ์ดี
• 2.5–4 วินาที: ควรปรับปรุง
• มากกว่า 4 วินาที: อยู่ในเกณฑ์ไม่ดี

สาเหตุที่ทำให้ LCP สูง

• รูปภาพหลักมีขนาดไฟล์ใหญ่เกินไป
• เซิร์ฟเวอร์ตอบสนองช้า
• มี CSS หรือ JavaScript ขัดขวางการแสดงผล
• โหลดฟอนต์หรือไฟล์ภายนอกจำนวนมาก
• ตั้งค่า Lazy Load ให้ภาพ Hero
• ไม่มีระบบแคชหรือ CDN ที่เหมาะสม

วิธีปรับปรุง LCP

ควรเริ่มจากปรับขนาดและบีบอัดภาพหลักให้เหมาะสม พร้อมเลือกใช้ไฟล์ WebP หรือ AVIF หลีกเลี่ยงการใช้ Lazy Load กับภาพ Hero และลดไฟล์ CSS หรือ JavaScript ที่ไม่จำเป็นต่อการแสดงผลช่วงแรก

นอกจากนี้ การใช้ระบบแคช CDN และโฮสติ้งที่ตอบสนองรวดเร็ว ยังช่วยลดระยะเวลาการโหลดหน้าเว็บไซต์ได้อย่างชัดเจน

2. INP วัดความรวดเร็วในการตอบสนอง

INP ย่อมาจาก Interaction to Next Paint ใช้วัดระยะเวลาตั้งแต่ผู้ใช้เริ่มโต้ตอบกับหน้าเว็บ จนกระทั่งเว็บไซต์แสดงการตอบสนองให้เห็นบนหน้าจอ

ตัวอย่างการโต้ตอบที่นำมาวัด ได้แก่

• การกดปุ่ม
• การเปิดเมนู
• การเลือกตัวกรองสินค้า
• การกรอกแบบฟอร์ม
• การเปิดแถบข้อมูลเพิ่มเติม

หากผู้ใช้กดปุ่มแล้วหน้าเว็บหยุดนิ่ง หรือเปิดเมนูแล้วต้องรอก่อนจะแสดงผล เว็บไซต์อาจมีค่า INP สูง

เกณฑ์ของ INP

• ไม่เกิน 200 มิลลิวินาที: อยู่ในเกณฑ์ดี
• 200–500 มิลลิวินาที: ควรปรับปรุง
• มากกว่า 500 มิลลิวินาที: อยู่ในเกณฑ์ไม่ดี

สาเหตุที่ทำให้ INP สูง

• JavaScript ทำงานหนักเกินไป
• มีปลั๊กอินหรือสคริปต์จำนวนมาก
• ใช้ระบบแชต Tracking หรือ Widget หลายรายการ
• โครงสร้าง DOM มีขนาดใหญ่และซับซ้อน
• มีงานประมวลผลที่บล็อกการทำงานของเบราว์เซอร์
• Event Handler ใช้เวลาทำงานนาน

วิธีปรับปรุง INP

ควรลบ JavaScript และปลั๊กอินที่ไม่ได้ใช้งาน ชะลอการโหลดสคริปต์ที่ยังไม่จำเป็น และแบ่งงานประมวลผลขนาดใหญ่ออกเป็นส่วนย่อย

สำหรับเว็บไซต์ WordPress ควรตรวจสอบปลั๊กอิน ระบบแชต เครื่องมือวิเคราะห์ และสคริปต์จากภายนอก เพราะองค์ประกอบเหล่านี้อาจเพิ่มภาระให้เบราว์เซอร์และทำให้เว็บไซต์ตอบสนองช้าลง

3. CLS วัดความมั่นคงของหน้าเว็บ

CLS ย่อมาจาก Cumulative Layout Shift ใช้วัดการขยับตำแหน่งขององค์ประกอบที่เกิดขึ้นโดยไม่คาดคิดระหว่างการใช้งาน

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

เกณฑ์ของ CLS

• ไม่เกิน 0.1: อยู่ในเกณฑ์ดี
• 0.1–0.25: ควรปรับปรุง
• มากกว่า 0.25: อยู่ในเกณฑ์ไม่ดี

สาเหตุที่ทำให้ CLS สูง

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

วิธีปรับปรุง CLS

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

พื้นที่สำหรับโฆษณา Embed แบนเนอร์ และ Popup ก็ควรถูกกำหนดไว้ล่วงหน้า ส่วน Animation ควรใช้คุณสมบัติอย่าง transform และ opacity เพื่อหลีกเลี่ยงการกระทบกับตำแหน่งขององค์ประกอบอื่น

ตรวจสอบ Core Web Vitals ได้อย่างไร?

สามารถตรวจสอบ Core Web Vitals ได้ด้วยเครื่องมือจาก Google โดยไม่จำเป็นต้องติดตั้งโปรแกรมเพิ่มเติม

PageSpeed Insights

นำ URL ของหน้าที่ต้องการตรวจสอบไปวางใน PageSpeed Insights ระบบจะแสดงสถานะของ LCP, INP และ CLS พร้อมคำแนะนำในการปรับปรุง

PageSpeed Insights จะแสดงข้อมูลทั้งจากผู้ใช้งานจริงและผลการทดสอบในสภาพแวดล้อมจำลอง จึงเหมาะสำหรับตรวจสอบภาพรวมและค้นหาสาเหตุของปัญหา

Google Search Console

รายงาน Core Web Vitals ใน Google Search Console ช่วยให้เห็นว่าหน้าใดหรือกลุ่ม URL ใดมีปัญหา เหมาะสำหรับติดตามคุณภาพโดยรวมของเว็บไซต์และตรวจสอบผลหลังการปรับปรุง

Chrome DevTools และ Lighthouse

เครื่องมือภายใน Google Chrome ช่วยวิเคราะห์ปัญหาเชิงเทคนิค เช่น ไฟล์ที่ขัดขวางการแสดงผล JavaScript ที่ทำงานนาน หรือองค์ประกอบที่ทำให้หน้าเว็บขยับ

ข้อมูลผู้ใช้งานจริงกับผลทดสอบต่างกันอย่างไร?

เมื่อทดสอบเว็บไซต์ อาจพบว่าคะแนนในแต่ละครั้งไม่เท่ากัน เนื่องจากเครื่องมือใช้ข้อมูลสองประเภทในการประเมิน

Field Data

Field Data เป็นข้อมูลจากผู้ใช้งานจริง ซึ่งใช้อุปกรณ์ ความเร็วอินเทอร์เน็ต และตำแหน่งที่แตกต่างกัน โดยข้อมูลใน PageSpeed Insights จะสะท้อนประสบการณ์ในช่วง 28 วันที่ผ่านมา

ข้อมูลส่วนนี้ใช้พิจารณาว่าเว็บไซต์ผ่าน Core Web Vitals จากประสบการณ์ของผู้ใช้งานจริงหรือไม่

Lab Data

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

เว็บไซต์จึงอาจได้คะแนนจากการทดสอบใน Lab สูง แต่ข้อมูลจากผู้ใช้งานจริงยังไม่ผ่าน หรืออาจเกิดในลักษณะตรงกันข้ามได้

คะแนน PageSpeed สูง หมายความว่า Core Web Vitals ผ่านหรือไม่?

ไม่เสมอไป เพราะคะแนน Performance ของ Lighthouse และสถานะ Core Web Vitals มาจากข้อมูลคนละรูปแบบ

คะแนน Lighthouse เป็นผลจากการทดสอบจำลอง ณ เวลานั้น ส่วน Core Web Vitals ใช้ข้อมูลประสบการณ์ของผู้ใช้งานจริงในช่วงเวลาหนึ่ง

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

ควรเริ่มปรับ Core Web Vitals จากส่วนไหน?

เริ่มจากตรวจสอบก่อนว่าตัวชี้วัดใดไม่ผ่าน แล้วจึงแก้ไขให้ตรงกับประเภทของปัญหา

• LCP ไม่ผ่าน: ตรวจสอบภาพ Hero เซิร์ฟเวอร์ แคช ฟอนต์ และไฟล์ที่ขัดขวางการแสดงผล
• INP ไม่ผ่าน: ตรวจสอบ JavaScript ปลั๊กอิน สคริปต์ภายนอก และขนาดของ DOM
• CLS ไม่ผ่าน: ตรวจสอบขนาดรูปภาพ ฟอนต์ วิดีโอ Embed แบนเนอร์ และ Popup

ควรเริ่มจากหน้าที่มีผู้เข้าชมมากหรือมีผลต่อธุรกิจก่อน เช่น หน้าแรก หน้าบริการ หน้าสินค้า และ Landing Page แล้วจึงขยายการปรับปรุงไปยังส่วนอื่นของเว็บไซต์

Core Web Vitals สำคัญต่อ SEO อย่างไร?

Core Web Vitals เป็นส่วนหนึ่งของสัญญาณด้านประสบการณ์หน้าเว็บที่ Google ใช้ประกอบการประเมินเว็บไซต์ การมีหน้าเว็บที่รวดเร็ว ตอบสนองดี และแสดงผลอย่างมั่นคง จึงเป็นผลดีต่อทั้งผู้ใช้งานและ SEO

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

เว็บไซต์จึงควรพัฒนาทั้งประสิทธิภาพ โครงสร้าง SEO และคุณภาพของเนื้อหาไปพร้อมกัน

สรุป

Core Web Vitals คือชุดตัวชี้วัดที่ช่วยประเมินประสบการณ์ใช้งานเว็บไซต์ใน 3 ด้านสำคัญ ได้แก่

• LCP วัดความเร็วในการแสดงเนื้อหาหลัก
• INP วัดความรวดเร็วในการตอบสนอง
• CLS วัดความมั่นคงของหน้าเว็บไซต์

การปรับตัวชี้วัดเหล่านี้ให้อยู่ในเกณฑ์ที่ดี ไม่ได้ช่วยเพียงเรื่อง SEO แต่ยังช่วยให้เว็บไซต์ใช้งานลื่นไหล ลดโอกาสที่ผู้ใช้จะออกจากหน้า และเพิ่มโอกาสในการติดต่อหรือสร้าง Conversion ให้กับธุรกิจ

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

ตรวจสอบประสิทธิภาพเว็บไซต์

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

Core Web Vitals ต้องผ่านทั้ง 3 ตัวหรือไม่?

ควรผ่านทั้ง LCP, INP และ CLS เพราะแต่ละตัวใช้ประเมินประสบการณ์คนละด้าน ทั้งความเร็ว การตอบสนอง และความมั่นคงของหน้าเว็บ

ทำไม PageSpeed Insights ไม่มีข้อมูลผู้ใช้งานจริง?

หน้าเว็บหรือเว็บไซต์อาจยังมีข้อมูลไม่เพียงพอใน Chrome UX Report แต่ยังสามารถใช้ผลทดสอบจาก Lighthouse เพื่อค้นหาและแก้ไขปัญหาเบื้องต้นได้

หลังปรับเว็บไซต์แล้วทำไมผลยังไม่เปลี่ยน?

ข้อมูลจากผู้ใช้งานจริงสะท้อนผลในช่วง 28 วันที่ผ่านมา จึงไม่เปลี่ยนทันทีหลังแก้ไข ระหว่างรอสามารถใช้ Lab Data เพื่อตรวจสอบผลเบื้องต้นได้

ควรตรวจสอบเฉพาะหน้าแรกหรือไม่?

ไม่ควร เพราะแต่ละหน้าอาจใช้โครงสร้าง รูปภาพ และสคริปต์แตกต่างกัน ควรตรวจสอบทั้งหน้าแรก หน้าบริการ หน้าสินค้า บทความ และหน้าที่มีผู้เข้าชมจำนวนมาก