Core Web Vitals คืออะไร เช็กเว็บได้ด้วยตัวเองพร้อมวิธีปรับแก้

Core Web Vitals คืออะไร เช็กได้ง่ายๆ พร้อมวิธีปรับแก้ไขด้วยตัวเอง

ก่อนหน้าที่ Google จะประกาศการใช้ Core Web Vitals มาเป็นปัจจัยหนึ่งในการวัดการทำ SEO หลายคนที่ทำ SEO อยู่ คงมีช่วงชีวิตที่มีความสุขมาไม่น้อย เพราะไม่ว่าจะสายขาวหรือสายไหมก็ทำอันดับได้สบายๆ

core web vitals

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

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

จากการปรับวิธีการคำนวนคะแนนบนเว็บไซต์ ตั้งแต่การมาของ BERT อัลกอริทึม ทำให้ผู้สร้างเนื้อหา (Content) ต้องเน้นสร้างเนื้อหาที่มอบประสบการณ์ที่ดีแก่ผู้ใช้งานมากขึ้น (User Experiences)

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

corewebvitalsrangking signals

Core Web Vitals คืออะไร ทำไมจึงสำคัญ

อธิบายแบบเข้าใจง่าย Core Web Vitals คือปัจจัยหนึ่งที่ Google ใช้ร่วมในการตัดสินอันดับบน Search Engine หรือ SERPs ที่เกี่ยวข้องกับประสบการณ์ของผู้ใช้งานเว็บไซต์โดยเฉพาะ

โดย Google ได้ประกาศและกำหนดใช้อย่างเป็นทางการภายในเดือนพฤษภาคม ปี 2021 ทำให้นักพัฒนาและผู้ที่เกี่ยวข้องจำเป็นต้องปรับปรุงเว็บไซต์ของตัวเองในทุกๆ ด้าน

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

ปัจจัย UX ที่เกี่ยวข้องใช้คะแนนรวมกับ Core Web Vitals

  1. ระบบความปลอดภัย HTTPS
  2. ความเหมาะสมกับหน้าจอมือถือ Mobile Friendliness
  3. การท่องเว็บอย่างปลอดภัย Safe-Browsing
  4. การมีโฆษณาคั่นแต่ละหน้า Intrusive interstitial guidelines
corewebvitalscheck

Core Web Vitals ใช้องค์ประกอบ 3 อย่างในการตัดสิน

Largest Content Paint

1. Largest Content Paint (LCP)

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

First Input Delay

2. First Input Delay (FID)

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

Cumulative Layout Shift

3. Cumulative Layout Shift (CLS)

Cumulative Layout Shift (LCP) คือ การวัดว่าเว็บไซต์เรามีความเคลื่อนไหวได้มากแค่ไหน กระตุกหรือไม่ เช่น เมื่อผู้ใช้งานเข้าเว็บไซต์เราแล้วกดปุ่มเมนูด้านบน หน้าเว็บเรามีการกระตุกเลื่อนลงมาสักพักหนึ่งหรือเปล่า

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

ผมลองวัดผลบนหน้าเว็บไซต์และเว็บเพจของตัวเองผ่าน Pagespeed Insights

pagespeed insight
mobile

pagespeed insight
desktop

core web vitals checker

เครื่องมือตรวจเช็ก Core Web Vitals

เช็กผ่านเครื่องมือ Google Pagespeed Insights

เพียงเข้าไปที่ลิงก์นี้ : https://developers.google.com/speed/pagespeed/insights/

pagespeed insight test

เช็กผ่านเครื่องมือ Google Search Console

google search console core web vitals report
Core Web Vitals จะบอกข้อผิดพลาด

วิธีปรับปรุงแก้ไข Core Web Vitals ให้ดีขึ้น

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

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

การปรับปรุงเว็บไซต์ด้วยตนเอง

  • การปรับภาพ เช่น การย่อไฟล์ภาพด้วยเครื่องมือต่างๆ หรือใช้ปลั๊กอินย่อรูป เช่น Shortpixel หรือแปลงแบบ Manual จากเว็บไซต์ Tinypng.com, imagify (ตัวนี้แปลงเป็น webp ให้อัตโนมัติ)
  • การเลือกใช้ Hosting ที่มีคุณภาพ ช่วยให้โหลดเร็วขึ้นหรือใครเงินเหลือใช้ Cloud Server ก็ได้ครับ
  • การใช้ CDN หรือ Content Delivery Network เช่น Google Cloud หรือ Clound Server ต่างๆ ผมแนะนำใช้ Cloudflare (ฟรี)
  • การทำ Lazy Load คือ ทำให้ภาพบนเว็บไซต์ค่อยๆ โหลดทีละภาพ ในเวลาที่เราอ่านเนื้อหาบนเว็บไซต์ ถ้าใครใช้ wordpress สามารถใช้ปลั๊กอิน Lazy Load (ฟรี)
resize image
ใช้แล้วภาพเบาสุดๆ
  • เอาไฟล์วีดีโอที่ใหญ่ๆ ออก (แนะนำให้แปะลิงก์ Youtube เอา) ช่วยลดการใช้ทรัพยากรบนเว็บไซต์เราได้
  • ทำ Minify CSS / Javascript มีปลั๊กอินช่วยหลายตัวที่เห็นจะดีที่สุดคือ WP Rocket ดีแบบสุดๆ (แต่เสียเงิน) ผู้พัฒนาเดียวกับ Lazy Load ช่วยอุดหนุนเค้าก็ไม่เสียหายนะ
  • ใช้ปลั๊กอินเก็บ Cache ตัว WP Rocket ที่แนะนำสามารถข้างต้นสามารถทำได้หมดเลยนะครับ
  • ทำ Preload Links, Proload Fonts ก็ช่วยได้อีกขั้น

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

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

source : searchenginejournal, google search central, web.dev

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

พี่หมีฮาร์ดเซลล์