Core Web Vitals

Core Web Vitals คืออะไร

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

Google สรุปสั้นๆว่า Core Web Vitals มุ่งเน้นที่อะไรบ้าง

• ›

  ประสบการณ์การโหลด

• ›

  การโต้ตอบ

• ›

  เสถียรภาพในการแสดงผลของเนื้อหาหน้าเว็บ

Largest Contentful Paint หรือ LCP

LCP หรือ Largest Contentful Paint คือเมตริกที่บอกเราถึงเวลาในการโหลดเนื้อหาที่ "ใหญ่ที่สุด" ที่ผู้ใช้มองเห็นเพื่อให้พร้อมใช้งานและเป็นประโยชน์ พูดอีกอย่างคือ Google กำลังบอกว่าองค์ประกอบที่อยู่ในส่วนที่เรารู้จักกันในชื่อ "Above the Fold" ต้องโหลดเร็วและอ่านได้ เพื่อให้ผู้ใช้สามารถโต้ตอบได้

ขอชี้แจงว่าองค์ประกอบที่ปรากฏเมื่อผู้ใช้คลิกบนหน้าจอหรือเลื่อนหน้าจอจะไม่ส่งผลต่อ LCP เนื้อหาที่ใหญ่ที่สุดอาจเป็นบล็อกข้อความ วิดีโอ รูปภาพ ฯลฯ

การจำแนกสถานะ LCP ตามเวลา ภาพ © web.dev

Google ถือว่าเวลาเท่าใดเป็นค่าที่เหมาะสม

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

จะตรวจสอบ LCP ของ URL ได้อย่างไร

ในเบราว์เซอร์ Chrome เอง ผ่านการรัน Lighthouse audit เรามีตัวเลือกในการตรวจสอบว่า Google ถือว่าเนื้อหาใดใหญ่ที่สุดที่ต้องโหลด วิธีการมีดังนี้

ปัจจัยใดที่อาจส่งผลต่อการโหลด LCP

มีการกระทำหลายอย่างที่ส่งผลให้เวลาโหลด LCP สูงกว่าที่คาดหวัง องค์ประกอบหรือการกระทำเหล่านี้ได้แก่

• ›

  การตอบสนองของเซิร์ฟเวอร์

• ›

  การ query ฐานข้อมูล

• ›

  การตอบสนอง API ที่ใช้เวลานาน

• ›

  CSS หรือ JS ที่บล็อกการ render

• ›

  ความล่าช้าในการโหลดทรัพยากรอื่นๆ

• ›

  รูปภาพที่ไม่ได้รับการเพิ่มประสิทธิภาพ

• ›

  ฯลฯ

First Input Delay หรือ FID

FID หรือ First Input Delay คือเมตริกที่บ่งชี้ว่าหน้าเว็บใช้เวลานานเพียงใดในการตอบสนองเมื่อผู้ใช้โต้ตอบกับองค์ประกอบใดๆ

เมตริกจาก Pagespeed

ในเครื่องมือ Pagespeed ที่ Google เปิดให้ใช้งานเมื่อนานมาแล้ว เราสามารถเห็นการอ้างอิงเมตริกนี้ได้ ค่าที่ถือว่าดีควรต่ำกว่า 100 ms

การจำแนกสถานะ First Input Delay (FID) ตามเวลา ภาพ © web.dev

สาเหตุหลักของปัญหาเมตริกนี้ (FID) มาจากการรัน JavaScript ดังนั้นเราจึงต้องระบุว่าส่วนใดของโค้ดทำให้หน้าเว็บใช้เวลานานในการตอบสนองต่อการโต้ตอบ ผมเคยประสบปัญหานี้ด้วยตัวเองจากการโหลด JS โฆษณา

Cumulative Layout Shift หรือ CLS

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

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

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

เหตุใด Core Web Vitals จึงสำคัญ

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

การปรับปรุงการเข้าถึงจากทุกอุปกรณ์ การส่งเสริมการท่องเว็บที่ปลอดภัยภายใต้ security protocol หรือการลงโทษเว็บไซต์ที่ใช้โฆษณารบกวน (interstitial) คือบางส่วนของสมรภูมิของยักษ์ใหญ่ด้านเทคโนโลยี

เมตริกเหล่านี้คือตัวบ่งชี้ที่ Google ให้เราเพื่อชี้ส่วนของเว็บไซต์ที่อาจเป็นปัญหาสำหรับผู้ใช้ แต่... หมายความว่าสำคัญหรือไม่

ไม่ว่าเราจะเข้าใจเว็บไซต์จากมุมมอง "หุ่นยนต์" หรือมุมมอง "ผู้ใช้" เมตริกเหล่านี้คือตัวบ่งชี้ว่าเว็บไซต์ของเราทำงานได้ไม่ดีเท่าที่ควร เราเห็นแล้วในการศึกษาหลายชิ้นว่าเวลาโหลดมีอิทธิพลต่อการแปลงและต่อความอดทนของผู้ใช้อย่างไร ปัจจุบันยังไม่มีผลต่อการจัดอันดับ แต่เราจะเพิกเฉยต่อเมตริกเหล่านี้หรือไม่

ในส่วนของเรา จะต้องนำมาพิจารณาอย่างแน่นอน

Core Web Vitals มีผลต่อการจัดอันดับหรือไม่

ณ ปัจจุบัน เรารู้เพียงว่าเมตริกในการปรับปรุงประสบการณ์ผู้ใช้กำลังมีความสำคัญเพิ่มขึ้น และบางส่วนถูกนำมาพิจารณาในผลการค้นหาแล้ว ในบทความ 28 พฤษภาคมบนบล็อก Google มีการประกาศว่าในปี 2021 คาดว่าจะเปิดตัว Update ใหม่เพื่อรวมเมตริกหลายตัวที่เกี่ยวข้องกับประสบการณ์ผู้ใช้

เราเพียงต้องนึกถึงวิธีที่จัดการ**Mobile First Index** และการแจ้งเตือนล่วงหน้า ในกรณีนี้ อ้างถึงบทความเดือนพฤษภาคมอีกครั้ง มีการเตือนว่าจะมีการแจ้งล่วงหน้าอย่างน้อย 6 เดือน ดังนั้น... จะมี update ภายในสิ้นปีหน้าหรือไม่

เครื่องมือเพิ่มประสิทธิภาพ Core Web Vitals

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

Lighthouse

Lighthouse เป็นเครื่องมือ open-source ที่ทรงพลังซึ่งเราพบใน Chrome ผ่าน Lighthouse เราสามารถ audit เว็บไซต์ของเรา รันการทดสอบต่างๆเพื่อรับผลลัพธ์เกี่ยวกับข้อบกพร่องหรือส่วนของหน้าเว็บที่ต้องการการเพิ่มประสิทธิภาพ ในส่วนเหล่านี้รวมถึงเมตริก Core Web Vitals

ภาพจากผลลัพธ์ของ Lighthouse audit

Page Speed Insights

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

เมตริกที่ Page Speed Insights นำเสนอ

Chrome UX

Chrome User Experience Report คือชุดข้อมูลที่ Google ให้เกี่ยวกับพฤติกรรมของผู้ใช้ทั่วโลกผ่าน Chrome ในการเข้าถึงข้อมูลนี้ต้องใช้ Big Query รวมถึงต้องมีบัญชี Google Cloud

ผ่าน Google Data Studio ทำให้การเข้าถึงง่ายขึ้นและมีทุกอย่างเตรียมไว้ครึ่งหนึ่งใน Dashboard นี้

Chrome Dev Tools

เราสามารถวิเคราะห์เมตริก Core Web Vitals ได้ไม่เพียงด้วย Lighthouse หากเราเจาะลึก Chrome dev tools เราสามารถได้ข้อสรุปเดียวกัน ตัวอย่างเช่น ในแท็บ "Performance" หากเราบันทึกหรือโหลดใหม่ เราจะได้ข้อมูลที่มีค่าเกี่ยวกับวิธีที่ URL ของเรากำลังทำงาน

ภาพหน้าจอจากตัวเลือก Performance ของ Chrome Dev Tools

Web.Dev

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

นอกจากนี้ใน Chrome Store เรามีส่วนขยายที่ให้ข้อมูลนี้เมื่อเข้าแต่ละ URL

ด้วยตัวบ่งชี้สีแดงหรือสีเขียว เราสามารถเห็นสถานะของ URL เทียบกับเมตริกเหล่านี้

ภาพหน้าจอผลลัพธ์ที่ Web Vitals extension ให้

Search Console

Search Console เป็นเครื่องมือที่ขาดไม่ได้สำหรับเว็บมาสเตอร์ทุกคน มีฟีเจอร์ที่เพิ่มเข้ามาช่วยเราดูว่า URL ใดมีปัญหากับ 3 เมตริกนี้ (LCP, FID และ CLS) ในเมนูด้านซ้าย เรามีตัวเลือก "Core Web Vitals" เมื่อเลือกตัวเลือกนี้ จะมีกราฟสองอันแสดงผลลัพธ์ของ URL ตามอุปกรณ์ หากเราเลือกอุปกรณ์ (desktop หรือ mobile) เราจะเห็นรายละเอียดว่า URL ใดมีปัญหา

อย่าตกใจหากเห็นจำนวน URL ที่สูงทางด้านขวา เป็นเรื่องปกติ เนื่องจากปัญหามักเกิดขึ้นตามประเภทหน้าเว็บ (ตัวอย่างเช่น blog post) และการแก้ไขประเภทหนึ่งจะทำให้เราได้รับการปรับปรุงในทุกประเภท

บทสรุป

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

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