fbpx
Core Web Vitals คืออะไร เจาะลึกปัจจัยไต่อันดับในการทำ SEO

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

อย่างล่าสุดที่ Google ประกาศใช้เครื่องมือใหม่ในการจัดอันดับการค้นหา ที่จะมุ่งเน้นไปที่เรื่องของ Page Experience มากขึ้นกว่าเดิมในชื่อที่เรียกกันว่า “Core Web Vitals” เป็นเครื่องมือใหม่ของ Google ที่น่าสนใจมากว่า คืออะไร สำคัญยังไง แล้วเราจะปรับเว็บไซต์ให้ติดอันดับบน Google ได้ยังไง…วันนี้ผมหาคำตอบมาฝากกันแล้วครับ

เลือกอ่านตามหัวข้อ

  1. Core Web Vitals คืออะไร
  2. 3 องค์ประกอบของ Core Web Vitals
  3. Supplemental Vitals หรือปัจจัยรองอื่น ๆ
  4. วิธีตรวจสอบ Core Web Vitals แบบฟรี ๆ
  5. สรุป

Core Web Vitals คืออะไร

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

Core Web Vitals คืออะไร

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

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

3 องค์ประกอบของ Core Web Vitals

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

  • Largest Contentful Paint (LCP) 
  • First Input Delay (FID) 
  • Cumulative Layout Shift (CLS)
Core Web Vitals องค์ประกอบของ Core Web Vitals

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) คือ คะแนนวัดค่าความเร็วในการดาวน์โหลดหน้าเว็บไซต์ โดยวัดจากการดาวน์โหลดคอนเทนต์ที่ใหญ่ที่สุดในหน้าเพจนั้น เช่น รูปภาพ วิดีโอ Pop-up หรือแบนเนอร์ ว่าใช้เวลาในการแสดงผลนานแค่ไหน ซึ่งค่า LCP จะนับจากองค์ประกอบแต่ละส่วน ไม่ใช่ทั้งเว็บไซต์ เนื่องจากองค์ประกอบต่างๆ ในหน้านั้นจะถูกแบ่งการโหลดออกเป็นช่วงๆ ดังนั้น เวลาโหลดหน้าเว็บไซต์หนึ่งครั้ง อาจจะมีหลายองค์ประกอบที่นับเป็น LCP ได้ เช่น Heading, รูปภาพ, วิดีโอ เป็นต้น ตามตัวอย่างกรอบสีเขียวในรูปภาพด้านล่างนี้ครับ

Core Web Vitals Largest Contentful Paint (LCP)

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

วิธีปรับปรุงค่า LCP

หากคุณอยากได้คะแนนในส่วนนี้ แนะนำให้หลีกเลี่ยงการใช้ไฟล์ที่มีความละเอียดเกินความจำเป็นอย่างเช่น .png, วิดีโอ แบบ Autoplay รวมถึงการย่อไฟล์ให้มีขนาดเล็กลงและทำการเซฟไฟล์ภาพเป็นนามสกุล .webp ก็จะช่วยทำให้เว็บไซต์โหลดเร็วขึ้นได้ครับ

นอกจากนี้คุณยังสามารถแก้ไขได้ด้วยการลบ Script ฟังก์ชันต่างๆ จาก Third-party และทำการประเพิ่มประสิทธิภาพให้กับ Server โดยการเช่าโฮสที่มีความเร็วในการดาวน์โหลดสูงขึ้นได้อีกด้วย

First Input Delay (FID)

First Input Delay (FID) คือ การวัดผลความหน่วง ระยะความเร็วในการตอบสนองของเว็บไซต์ เช่น เมื่อทำการคลิกแล้ว เว็บไซต์ตอบสนองเร็วแค่ไหน กระตุกหรือไม่ เวลาเลื่อน Scroll เมาส์แล้วกำลังจะกดปุ่ม แต่ดันกดไปโดนอย่างอื่นแทน รวมถึงการซูมเข้า-ออกมีอาการแปลกๆ หรือเปล่า หากเกิดเหตุการณ์นี้แสดงว่าเว็บไซต์กำลัง Delay ซึ่งมีผลทำให้ประสบการณ์การใช้งานของ User แย่ลงตามไปด้วย ดังนั้น ควรมีค่า FID ในการโหลดโดยใช้ระยะเวลาน้อยกว่า 100 มิลลิวินาที

Core Web Vitals First Input Delay (FID)

วิธีปรับปรุงค่า FID

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

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) คือ คะแนนที่ใช้ในการประเมินความเสถียรของหน้าเว็บไซต์ครับ เช่น การจัดวาง Layout ข้อความเบี้ยวหรือตัวเล็กอ่านยากเกินไปไม่ ปุ่มเลื่อนอยู่ไปติดกับปุ่มอื่นๆ จนกดพลาดหรือเปล่า หรือเว็บมีการกระตุก ภาพและฟีเจอร์ต่างๆ สั่นหรือไม่ เพราะถ้าหากเกิดเหตุการณ์เหล่านี้ขึ้นในเว็บไซต์จะทำให้ User ได้รับประสบการณ์ใช้งานที่ไม่ดี Google จริงให้คะแนนในส่วนนี้ด้วยครับ

Core Web Vitals Cumulative Layout Shift (CLS)

โดยค่า CLS ที่ดีควรน้อยกว่า 0.1 เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดีที่สุดนั่นเองครับ

วิธีปรับปรุงค่า CLS

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

Supplemental Vitals หรือปัจจัยรองอื่น ๆ

นอกจาก 3 ปัจจัยหลักที่กล่าวมาในข้างต้นแล้วยังมีปัจจัยรองอื่นๆ ที่เป็นองค์ประกอบเสริมที่ช่วยทำให้ประสิทธิภาพการใช้งานของเว็บไซต์คุณดีขึ้นได้อีกครับ ถึงแม้ว่าจะไม่ใช่สิ่งที่คุณต้องให้ความสำคัญมากที่สุด แต่หากมีเวลาก็สามารถ Optimize เว็บไซต์ให้มีคะแนนเหล่านี้เพิ่มขึ้นได้ด้วย ไม่ว่าจะเป็น…

  • Time to First Byte (TTFB) 

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

  • First Contentful Paint (FCP) 

เป็นค่าที่ใช้วัดตั้งแต่เริ่มโหลดหน้าเว็บไซต์ไปจนถึงการแสดงเนื้อหาแรกที่จะปรากฏขึ้น โดยเนื้อหานี้จะหมายถึงเค้าโครงเว็บไซต์ ตัวหนังสือและรูปภาพบางส่วน, <svg> Elements หรือ <canvas> Elements ที่ไม่ใช่สีขาว โดยมีหลักเกณฑ์ในการวัดผล ดังนี้

เว็บไซต์ใช้เวลาโหลด 0-1,000 ms เป็นเว็บไซต์ที่ดี

เว็บไซต์ใช้เวลาโหลด 1,000 ms-3,000 ms เป็นเว็บไซต์ที่ต้องปรับปรุง 

เว็บไซต์ใช้เวลาโหลดเกิน 3,000 ms เป็นเว็บไซต์ที่แย่

  • Total Blocking Time (TBT) 

เป็นคะแนนที่ใช้วัดเวลาการรอ First Contentful Paint (FCP) และ Time to Interactive (TTI) ทำงาน ก่อนที่จะโต้ตอบได้อย่างสมบูรณ์กับผู้ใช้ โดยควรมีมีระยะเวลาของ TBT น้อยกว่า 300 มิลลิวินาที

  • Time to Interactive (TTI)

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

วิธีตรวจสอบ Core Web Vitals แบบฟรี ๆ

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

  1. PageSpeed Insights

Core Web Vitals PageSpeed Insights

PageSpeed Insights เป็นเว็บไซต์เดียวกันกับที่ใช้เช็กความเร็วเว็บไซต์ปกติเลยครับ วิธีใช้ก็แค่กรอกโดเมน หลังจากนั้นกด Analyze แล้วรอผลลัพธ์ค่าต่างๆ ขึ้นมา หลังจากนั้นให้ตรวจสอบ Metrics ต่างๆ แล้วทำตามคำแนะนำที่อยู่ด้านล่าง (แต่อาจไม่จำเป็นต้องทำตามทุกอย่างนะครับ เพราะมันอาจทำให้เว็บไซต์คุณหน้าตาไม่เหมือนเดิมได้ด้วย แค่ทำคะแนนให้ได้ 90 คะแนนขึ้นไปก็ถือว่าทำตามเกณฑ์ได้ดีมากแล้ว) 

  1. Google Search Console
Core Web Vitals Google Search Console

คุณสามารถใช้ Google Search Console ในการดูรายงานภาพรวมทั้งหมดในเว็บไซต์ว่าหน้าไหนมีปัญหาอะไรบ้าง โดยให้คุณเข้าไปที่ https://search.google.com/search-console/about หาเมนู Core Web Vitals ทางซ้ายมือ หลังจากนั้นจะมีข้อมูลของเว็บไซต์ขึ้นมาทั้ง Mobile และ Desktop ให้โฟกัสที่ Mobile เป็นหลัก แล้วทำการดูภาพรวมทุกหน้าพร้อมกัน ไม่ต้องไล่เช็กทีละหน้า แต่ถ้าอยากเช็กแบบละเอียดให้ใช้ PageSpeed Insights ครับ

สรุป

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

  • ลบโค้ดต่างๆ ปลั๊กอิน และมิเดียที่ไม่จำเป็นออกจากเว็บไซต์
  • ลดขนาดภาพ หรือใช้ไฟล์รูป Webp จะช่วยทำให้เว็บเบาขึ้น
  • ลดขนาด Pop-up และ Banner 
  • ปรับแก้เสถียรภาพของดีไซน์ เช่น ขนาดฟอนต์ที่เล็ก การแทรกเนื้อหาด้วยรูป วิธีโอ ไฟล์ต่างๆ ที่มีขนาดไม่เท่ากัน
  • ใช้การ Embed วิดีโอจากภายนอก แทนการอัปโหลดตรงๆ ลงในเว็บไซต์
  • ลบ Script ฟังก์ชันต่างๆ จาก Third-party 
  • เช่าโฮสที่มีความเร็วในการดาวน์โหลดสูง

ยังไงก็ลองหยิบ Checklist นี้ไปลองทำตามดูกันเลยนะครับ