Core Web Vitals & Page Experience

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

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

Note: ถ้าพื้นฐาน SEO ยังไม่แน่น แนะนำศึกษาเพิ่มเติมใน เรียน SEO ฟรี ของเราในส่วน SEO คืออะไรครับ

Core Web Vitals กับ Page Experience

Google ได้ประกาศชัดเจนว่า Core Web Vitals คือส่วนหนึ่งของ Page Experience ซึ่งเป็นหนึ่งใน Ranking Systems (ระบบจัดอันดับ) ของ Google

graph TD
    A[Page Experience Signals] --> B(Core Web Vitals)
    A --> C(Other Signals)

    subgraph "Core Web Vitals (The Big 3)"
    B --> B1[LCP: Loading]
    B --> B2[INP: Interactivity]
    B --> B3[CLS: Visual Stability]
    end

    subgraph "Other Signals"
    C --> C1[HTTPS]
    C --> C2[Mobile Friendly]
    C --> C3[No Intrusive Interstitials]
    end

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

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

1. Google Search Console (GSC)

ใน GSC จะแบ่งรายงานออกเป็น 2 ส่วนคือ Mobile & Desktop โดยจะแบ่งสถานะ URL ออกเป็น 3 ระดับ:

(ภาพตัวอย่าง: Google Search Console แสดงผล Good URLs ทั้งหมด ไม่ต้องปรับปรุงแก้ไขใด ๆ)

2. PageSpeed Insights (PSI)

เมื่อเราทราบจาก GSC แล้วว่าหน้าไหนมีปัญหา เราสามารถนำ URL นั้นมาเจาะลึกใน PageSpeed Insights เพื่อดูคำแนะนำทางเทคนิคอย่างละเอียดครับ

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

เจาะลึก 3 แกนหลัก (The Big 3 Metrics)

เรามาทำความรู้จักทั้ง 3 เมทริกซ์ของ Core Web Vitals กันครับ ว่าแต่ละตัววัดอะไร และมีเกณฑ์อย่างไรบ้าง

1. Largest Contentful Paint (LCP)

LCP คือ เมทริกซ์ที่ใช้วัด ความเร็วในการโหลด (Loading Performance) หมายถึงเวลาที่ใช้ในการแสดง "เนื้อหาที่ใหญ่ที่สุด" ในหน้าเว็บ (เช่น รูปภาพปก หรือ หัวข้อหลัก)

• เป้าหมาย: ควรมีค่า LCP น้อยกว่า 2.5 วินาที

2. Interaction to Next Paint (INP)

INP เป็นเมทริกซ์ใหม่ล่าสุด (เข้ามาแทนที่ FID ตัวเดิม) ที่วัด ความเร็วในการตอบสนอง (Interactivity) ต่อการโต้ตอบของผู้ใช้ เช่น การคลิกปุ่ม หรือการพิมพ์ในฟอร์ม

• เป้าหมาย: ควรมีค่า INP น้อยกว่า 200 มิลลิวินาที เพื่อให้ผู้ใช้รู้สึกว่าเว็บไม่หน่วง

3. Cumulative Layout Shift (CLS)

CLS คือ เมทริกซ์ที่ใช้วัด ความเสถียรของหน้าเว็บไซต์ (Visual Stability) หมายถึงโครงสร้างหน้าเว็บไม่ควร "กระตุก" หรือขยับไปมาขณะโหลด

• เป้าหมาย: ควรมีค่า CLS น้อยกว่า 0.1

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

สรุปเกณฑ์การวัดผล (Benchmarks)

เพื่อให้ดูง่าย ผมสรุปเกณฑ์ทั้ง 3 ตัวไว้ในตารางนี้ครับ

สรุปการปรับ Core Web Vitals (Optimization)

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

1. Image Optimization: ปรับขนาดรูปภาพให้เล็กลง หรือใช้ฟอร์แมต WebP
2. Minify Code: ลดขนาดไฟล์ JavaScript และ CSS เพื่อลดช่องว่างระหว่างบรรทัด
3. Caching & CDN: ใช้ระบบแคชและ Content Delivery Network ช่วยส่งข้อมูล
4. Update Technology: อัปเดตเวอร์ชันของ CMS หรือ JavaScript Library ให้ล่าสุดเสมอ

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

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

ในบทต่อไป เราจะไปดูเรื่อง "ภาษาที่ Google เข้าใจ" เพื่อเพิ่มโอกาสในการแสดงผลแบบ Rich Results ใน Ep 9: Structured Data & Schema Markup ครับ