Core Web Vitals คืออะไร มีความสำคัญอย่างไร

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

Core Web Vitals คืออะไร

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

Core Web Vitals ประกอบด้วยอะไรบ้าง

Core Web Vitals ประกอบด้วย ตัวชี้วัด 3 ตัวด้วยกัน ได้แก่ Largest Contentful Paint (LCP), First Input Delay (FID) และ Cumulative Layout Shift (CLS) ซึ่งทั้ง 3 ตัวชี้วัดนี้ ทำหน้าที่ในการประเมินเว็บไซต์ในแต่ละส่วนที่แตกต่างกัน ความหมายของแต่ละตัวชี้วัดมีดังนี้

loading, interactivity, and visual stability
loading, interactivity, and visual stability (ขอบคุณรูปจาก web.dev/vitals)

Large Contentful Paint (LCP) คืออะไร

Large Contentful Paint (LCP) คือ ตัวชี้วัดสมรรถนะภาพในการโหลดเว็บไซต์ เมื่อเว็บเริ่มทำการโหลด ค่า LCP จะต้องไม่เกิน 2.5 วินาที

First Input Delay (FID) คืออะไร

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

Cumulative Layout Shift (CLS) คืออะไร

Cumulative Layout Shift (CLS) คือ ตัวชี้วัดความเสถียรของหน้าเว็บไซต์ของเราไม่ให้มีการเคลื่อนของรูป โฆษณาหรือการแทรกเนื้อหา โดยค่า CLS นี้ไม่ควรเกิน 0.1

เครื่องมือที่สามารถใช้วัด Core Web Vitals

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

  • Chrome User Experience Report เป็นรายงานประสบการณ์การใช้งานของผู้ใช้งาน Chrome โดยรายงานนนี้จะทำการเก็บข้อมูลวัดผลจากผู้ใช้งานจริงในแต่ละส่วนของตัวขี้วัด ข้อมูลในส่วนนี้จะทำให้เจ้าของเว็บไซต์สามารถประเมินประสิทธิภาพของเว็บไซต์ได้ ผลที่ได้จะแสดงในส่วนของ Page Speed Insights และ รายงานใน Google Search Console
  • PageSpeed Insights เป็นการวัดประสิทธิภาพผ่านทางเว็บไซต์ Google PageSpeed ที่เราคุ้นเคยในการวัดความเร็วของเว็บไซต์ โดย Google ได้ทำการพัฒนาให้สามารถวัดและให้คะแนนตัวชี้วัด Core Web Vitals ขึ้นมาอีกส่วนหนึ่ง ซึ่งเป็นส่วนสำคัญในการที่เว็บของเราจะได้คะแนนมากหรือน้อยด้วย (อ่านวิธีการเพิ่มความเร็วเว็บ WordPress)
  • Search Console (Core Web Vitals report) เป็นการวัดประสิทธิภาพผ่านทางระบบของ Google Search Console ครับ โดยได้ทำการปรับเปลี่ยนหมวดหมู่ที่เกี่ยวกับความเร็ว (Speed) มาเป็น Core Web Vitals โดยจะมีรายงานบอกถึงประสิทธิภาพของเว็บเราในทุกหน้า
สอน WordPress หรือ WooCommerce
สอน WordPress หรือ WooCommerce

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

Google ได้ให้ความสำคัญกับ Core Web Vitals ทั้ง 3 นี้เป็นอย่างมากครับ เพราะตัวชี้วัดทั้ง 3 นี้จะถูกนำไปคำนวนลำดับการค้นหา (Search rankings) ว่าเว็บไหนที่ควรอยู่ในหน้าแรก ลำดับต้นๆ สาเหตุที่เป็นเช่นนั้นเนื่องจาก Google  เชื่อว่า ประสบการณ์ของผู้ใช้งานต่อหน้าเว็บไซต์นั้นเป็นสัญญาณที่จะบอกได้ว่าเว็บไซต์นั้นมีคุณภาพหรือไม่ นอกเหนือจาก การที่เว็บไซต์เป็นมิตรต่ออุปกรณ์เคลื่อนที่ (Mobile-friendliness) เช่น มือถือและแท็บเล็ต ความปลอดภัยในการใช้งานเว็บไซต์นั้นๆ (Security)

การเพิ่มประสิทธิภาพ Core Web Vitals

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

การเพิ่มประสิทธิภาพของ Large Contentful Paint (LCP)

สาเหตุหลักๆ ของค่า LCP ที่แย่นั้น เกิดมาจากทั้งส่วนของเซิฟเวอร์และเครื่องผู้ใช้งาน ไม่ว่าจะเป็น เวลาในการตอบสนองของเซิฟเวอร์ที่ช้า (Slow server response times) การโดนบล็อกด้วยไฟล์ JavaScript และ CSS ขณะทำการแสดงผล (Render-blocking JavaScript and CSS) เวลาในการโหลดทรัพยากรช้า (Slow resource load times) และ ปัญหาการแสดงผลจากเครื่องคอมพิวเตอร์ของผู้ใช้งาน (Client-side rendering) โดยเราจะมีวิธีการปรับปรุงประสิทธิภาพของเว็บเราดังนี้

  • ให้ทำการเพิ่มประสิทธิภาพของเซิฟเวอร์ (Optimize your server)
  • ใช้เทคนิค CDN ในการจัดการผู้ใช้งาน (Route users to a nearby CDN)
  • ใช้งานแคชในการเก็บข้อมูล (Cache assets)
  • ให้บริการหน้าเว็บที่เป็น HTML ที่โดนแคชเป็นลำดับแรก (Serve HTML pages cache-first)
  • ให้เชื่อมต่อกับเว็บภายนอกเป็นลำดับก่อน (Establish third-party connections)

การเพิ่มประสิทธิภาพของ First Input Delay (FID)

สาเหตุหลักที่ทำให้ประสิทธิภาพของ FID แย่ เกิดจากการประมวลผลของ JavaScript ที่หนักเกินไป (Heavy JavaScript Execution) ซึ่งหากเราสามารถทำการลดการประมวลผลดังกล่าวได้ ค่าของ FID ก็จะลดลงตามไปด้วยครับ โดยเราจะต้องทำการปรับปรุงเว็บของเราดังนี้

  • เราจะต้องทำการลดงานของเว็บที่มีการประมวลผลยาว (Break up Long Tasks)
  • ทำการเพิ่มประสิทธิภาพการตอบสนองการใช้งานของผู้ใช้งานในหน้าเว็บเพจ (Optimize your page for interaction readiness)
  • การใช้ผู้ปฏิบัติงานเว็บ (Use a web worker)
  • การลดเวลาประมวลผลจาวาสคริปท์ (Reduce JavaScript execution)

การเพิ่มประสิทธิภาพของ Cumulative Layout Shift (CLS)

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

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

Web Vitals อื่นๆ

นอกจาก Core Web Vitals ที่เราพูดกันไปแล้ว ยังมี Web Vitals อื่นๆ ที่ไม่ได้เป็นตัวหลักในการวัดประสิทธิภาพของเว็บไซต์แต่เป็นส่วนสนับสนุนงานหลัก ยกตัวอย่างเช่น เวลาที่ได้รับไบต์แรก (Time to First Byte (TTFB)) และเนื้อหาแรกที่ได้รับ (First Contentful Paint (FCP) เวลาในการบล็อกเนื้อหาทั้งหมด (Total Blocking Time (TBT)) และเวลาในการตอบสนอง (Time to Interactive (TTI)) เป็นต้น

อ้างอิงเอกสาร: Core Web Vitals ของ Web.dev

สรุป Core Web Vitals

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

เป็นอย่างไรกันบ้างครับ สำหรับหัวข้อ Core Web Vitals นี้ หวังว่าคงจะได้ประโยชน์ไม่มากก็น้อยนะครับ สำหรับบทความนี้ก็ขอจบไว้เพียงเท่านี้ สวัสดีครับ !

ทำเว็บไซต์
ทำเว็บไซต์