ดูวิธีการด้วยข้อมูลภาคสนามในการอัปเดตส่วนขยาย Web Vitals

ตอนนี้ส่วนขยาย Web Vitals จะแสดงว่าประสบการณ์ในท้องถิ่นของคุณเกี่ยวข้องกับประสบการณ์ของผู้ใช้จริงในภาคสนามมากน้อยเพียงใด

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

ประสิทธิภาพของหน้าเว็บขึ้นอยู่กับหลายปัจจัย รวมถึงคุณภาพของฮาร์ดแวร์และเครือข่าย ประสบการณ์การใช้งานหน้าเว็บในเครื่องของคุณอาจแตกต่างจากประสบการณ์ที่ผู้ใช้ส่วนใหญ่ได้รับ นั่นคือเหตุผลที่ส่วนขยาย Web Vitals เวอร์ชัน 1.0 มีฟีเจอร์ใหม่ที่จะผสานรวมข้อมูลผู้ใช้จริงจากรายงาน UX ของ Chrome (CrUX) เข้ากับการวัด Core Web Vitals ในเครื่อง ฟีเจอร์นี้จะแสดงการวัดผลในเครื่องในบริบทที่ผู้ใช้คนอื่นๆ ได้พบหน้าเดียวกัน โดยมาพร้อมกับ UI ใหม่ที่สดใส และผมตื่นเต้นมากที่จะได้แสดงให้คุณเห็นว่ามันทำงานอย่างไร

ข้อมูลภาคสนามจาก CrUX

CrUX คือชุดข้อมูลสาธารณะที่แสดงประสบการณ์ของผู้ใช้จริงใน Chrome โดยเป็นตัวขับเคลื่อนเครื่องมือสำคัญบางส่วนในเวิร์กโฟลว์ Core Web Vitals เช่น Search Console และ PageSpeed Insights นอกจากนี้ ข้อมูลดิบสำหรับเว็บไซต์นับล้านยังค้นหาแบบสาธารณะได้ในชุดข้อมูล CrUX ใน BigQuery และ CrUX API การอัปเดตส่วนขยาย Web Vitals นี้จะผสานรวมหน้าเว็บและข้อมูลเดสก์ท็อประดับต้นทางจาก CrUX API

ข้อมูลประสบการณ์ของผู้ใช้แบ่งออกเป็น 3 ระดับคุณภาพ ได้แก่ ดี ต้องปรับปรุง และแย่ เกณฑ์ที่ใช้สำหรับการให้คะแนนแต่ละรายการแสดงอยู่ในคู่มือสำหรับเมตริก Core Web Vitals แต่ละรายการ ได้แก่ LCP, FID และ CLS ตัวอย่างเช่น CrUX API สามารถบอกได้ว่า 16% ของประสบการณ์ผู้ใช้จริงในหน้าเว็บหนึ่งๆ ได้รับการประเมินว่ามี LCP ที่ดีภายใน 2.5 วินาที

UI ส่วนขยายใหม่

ภาพหน้าจอของส่วนขยาย Web Vitals ที่แสดงคำอธิบายว่าประสบการณ์ LCP ในเครื่องเกี่ยวข้องกับข้อมูลเดสก์ท็อปของผู้ใช้จริงอย่างไร
ภาพหน้าจอของส่วนขยาย Web Vitals ที่แสดงคําอธิบายว่าประสบการณ์การใช้งาน LCP ในพื้นที่เกี่ยวข้องกับข้อมูลเดสก์ท็อปของผู้ใช้จริงอย่างไร

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

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

กลับไปใช้ข้อมูลระดับต้นทาง

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

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

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

กรณีสุดโต่ง

ภาพหน้าจอของส่วนขยาย Web Vitals ที่แสดงเฉพาะข้อมูลในเครื่อง ข้อมูลในช่องไม่พร้อมใช้งาน
ภาพหน้าจอของส่วนขยาย Web Vitals ที่แสดงเฉพาะข้อมูลในเครื่อง ข้อมูลในช่องไม่พร้อมใช้งาน

กรณีที่เป็นปัญหาที่สุดซึ่งพบไม่บ่อยนักที่คุณอาจพบขณะใช้งานส่วนขยาย

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

วิธีที่คุณโต้ตอบกับหน้าเว็บอาจส่งผลต่อความเกี่ยวข้องของข้อมูลเช่นกัน ตัวอย่างเช่น การโหลดหน้าเว็บในแท็บเบื้องหลังจะนับตามเมตริก LCP ตลอดเวลาจนกว่าคุณจะอยู่เบื้องหน้า หากใช้เวลา 90 วินาทีในการสลับไปยังแท็บ LCP อาจแสดงเป็น 91.5 วินาที ในกรณีนี้ ไอคอนคำเตือนเล็กๆ จะปรากฏขึ้นข้างค่า LCP เพื่อเตือนคุณเกี่ยวกับเงินเฟ้อปลอม โปรดทราบว่าชุดข้อมูล CrUX จะไม่สนใจค่า LCP ที่ไม่เกี่ยวข้องประเภทนี้

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

การเปรียบเทียบข้อมูลภาคสนามจากโทรศัพท์

ภาพหน้าจอของส่วนขยาย Web Vitals ที่แสดงเมตริกในเครื่องเทียบกับข้อมูลในช่องโทรศัพท์
ภาพหน้าจอของส่วนขยาย Web Vitals ที่แสดงเมตริกในพื้นที่เทียบกับข้อมูลฟิลด์โทรศัพท์

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

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

หากต้องการเปิดใช้ข้อมูลโทรศัพท์ในส่วนขยาย ให้ทำตามขั้นตอนต่อไปนี้

  1. คลิกขวาที่ไอคอนส่วนขยายในแถบเครื่องมือและเลือกตัวเลือก
  2. เลือกตัวเลือกเปรียบเทียบประสบการณ์ในเครื่องกับข้อมูลภาคสนามทางโทรศัพท์

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

ดาวน์โหลดส่วนขยาย Web Vitals

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

เครดิตรูปภาพ: Mark Garlick/Science Photo Library/Getty Images