Core Web Vitals เมทริกซ์สำคัญ วัด UX ของ SEO

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

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

ที่สำคัญ Core Web Vitals คือเมทริกซ์ที่วัดผลได้ค่อนข้างชัดเจนเลยครับ ว่าผ่านหรือไม่ผ่าน (Passed / Failed) และสามารถนำมาใช้เป็น KPI หนึ่งในการทำ SEO ได้

Core Web Vitals เป็นส่วนหนึ่งของ Page Experience Signal

โดย Google เคยกล่าวไว้ใน Google Search Central Blog ว่า Page Experience Signals เป็นหนึ่งในสัญญาณที่ใช้ในระบบการจัดอันดับ และ Core Web Vitals ก็เป็นส่วนหนึ่งของ Page Experience นี้ด้วย

Today we're announcing that the page experience signals in ranking will roll out in May 2021. The new page experience signals combine Core Web Vitals...

โดย Core Web Vitals ประกอบไปด้วย 3 เมทริกซ์หลัก คือ

1. Largest Contentful Paint (LCP): ใช้วัด Loading Performance หรือความเร็วในการโหลดเนื้อหาหลักของหน้าเว็บ
2. Interaction to Next Paint (INP): ใช้วัด Interactivity หรือความเร็วในการตอบสนองของหน้าเว็บหลังผู้ใช้มี interaction
3. Cumulative Layout Shift (CLS): ใช้วัด Visual Stability หรือความเสถียรของ Layout บนหน้าเว็บ

3 เมทริกซ์ของ Core Web Vitals (Source: Web.dev)

Note: ถ้าพื้นฐาน SEO ยังไม่แน่น สามารถเริ่มจากบทเรียน SEO คืออะไร ก่อนได้เลยครับ

วิธีการทดสอบ Core Web Vitals ของเว็บ

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

• Google Search Console
• PageSpeed Insights

ใน Google Search Console จะมีรายงาน Core Web Vitals ที่แบ่งออกเป็น 2 ส่วน คือ Mobile และ Desktop หรือพูดง่าย ๆ คือวัดทั้งบนมือถือและเดสก์ท็อป

ผลลัพธ์จะแบ่งออกได้ประมาณนี้

• Poor URLs: URL ที่มีปัญหาและควรปรับปรุงโดยด่วน
• URLs need improvement: URL ที่ควรปรับปรุง แต่ยังไม่หนักเท่า Poor URLs
• Good URLs: URL ที่ดีอยู่แล้ว ไม่จำเป็นต้องปรับแก้ในจุดนั้น

ทดสอบและดูรายงาน Core Web Vitals ผ่าน Google Search Console

อีกเครื่องมือที่ใช้ง่ายมากคือ PageSpeed Insights ซึ่งสามารถใส่ URL ของหน้าเว็บเข้าไปทดสอบได้ทันที

ทดสอบ Core Web Vitals ผ่าน PageSpeed Insights

ถ้าหน้าเว็บทดสอบแล้ว Core Web Vitals ไม่ผ่าน จะเห็นผลลัพธ์ประมาณนี้

ตัวอย่างหน้าเว็บที่ Core Web Vitals ไม่ผ่าน

เมื่อเรารู้แล้วว่าสามารถทดสอบ Core Web Vitals ได้จากเครื่องมือไหนบ้าง ต่อมาเรามาทำความเข้าใจทั้ง 3 เมทริกซ์หลักกันครับ

1. Largest Contentful Paint (LCP)

LCP คือเมทริกซ์ที่ใช้วัดความเร็วในการโหลดหน้าเว็บ หรือ Loading Performance

พูดง่าย ๆ คือวัดว่า “เนื้อหาหลักที่ใหญ่ที่สุดในหน้าเว็บ” ใช้เวลากี่วินาทีถึงจะแสดงผลให้ผู้ใช้เห็น

โดยทั่วไป ค่า LCP ที่ดีควรน้อยกว่า 2.5 วินาที

นี่จึงเป็นเหตุผลว่าทำไมหน้าเว็บต้องโหลดให้เร็วที่สุดเท่าที่จะเป็นไปได้ หลายคนอาจเคยได้ยินว่าเว็บไม่ควรโหลดเกิน 3 วินาที แต่ถ้าอ้างอิงตามเกณฑ์ Core Web Vitals ของ Google ค่า LCP ที่ดีควรอยู่ต่ำกว่า 2.5 วินาที

ค่า Largest Contentful Paint (LCP)

2. Interaction to Next Paint (INP)

เดิมที Core Web Vitals ใช้ First Input Delay (FID) เป็นเมทริกซ์ในการวัดการตอบสนองของหน้าเว็บ แต่ปัจจุบัน Google เปลี่ยนมาใช้ Interaction to Next Paint (INP) แทนแล้ว

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

• คลิกปุ่ม
• กดเมนู
• พิมพ์ในฟอร์ม
• เลือก dropdown
• ทำ action บางอย่างบนหน้าเว็บ

INP จะวัดเวลาตั้งแต่ผู้ใช้เริ่มโต้ตอบกับหน้าเว็บ จนกระทั่งหน้าเว็บแสดงผลการตอบสนองกลับมาอีกครั้ง

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

ค่า Interaction to Next Paint (INP)

3. Cumulative Layout Shift (CLS)

CLS คือเมทริกซ์ที่ใช้วัดความเสถียรของหน้าเว็บไซต์ หรือ Visual Stability

พูดง่าย ๆ คือวัดว่า Layout ของหน้าเว็บขยับไปมาระหว่างที่ผู้ใช้กำลังดูเนื้อหาหรือไม่

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

ค่า CLS ที่ดีควรน้อยกว่า 0.1

ค่า Cumulative Layout Shift (CLS)

ความเห็นส่วนตัว: เป็นไปได้ผมไม่ค่อยแนะนำให้แปะโฆษณาบนเว็บเยอะเกินไปครับ ยกเว้นเว็บที่สร้างมาเพื่อโมเดลนี้โดยเฉพาะ เพราะโฆษณามักกระทบ UX และ Core Web Vitals โดยตรง โดยเฉพาะ CLS อีกอย่างคือรายได้จากโฆษณาในปัจจุบันก็ไม่ได้หวือหวาเหมือนยุคแรก ๆ แล้ว

สรุปการปรับ Core Web Vitals

การปรับ Core Web Vitals สามารถทำได้โดยการทำ Site Audit ในหลายส่วนของเว็บไซต์ เช่น

• ปรับความเร็วในการโหลดรูปภาพและวิดีโอ
• ลดขนาดไฟล์ภาพ
• ใช้ฟอร์แมตภาพที่เหมาะสม เช่น WebP
• minify ไฟล์ JavaScript และ CSS
• ลด JavaScript ที่ไม่จำเป็น
• ใช้ caching และ CDN
• ปรับ server response time
• กำหนดขนาดรูปภาพและพื้นที่ของ element ให้ชัดเจน
• ลดการโหลด third-party scripts ที่ไม่จำเป็น

ในความคิดเห็นส่วนตัว ถ้านึกถึง Core Web Vitals ผมจะนึกถึง 2 เรื่องหลัก ๆ คือ User Experience และ Technical SEO

เพราะ Core Web Vitals ไม่ได้เป็นแค่เรื่องคะแนนสวย ๆ ใน PageSpeed Insights แต่เป็นเรื่องของการทำให้ผู้ใช้เข้าเว็บแล้วรู้สึกว่าเว็บโหลดเร็ว ตอบสนองไว และไม่กระตุกระหว่างใช้งาน

ดังนั้น Core Web Vitals จึงเป็นจุดที่เชื่อมระหว่าง UX, Performance และ Technical SEO ได้อย่างชัดเจนมาก

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