หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

ส่วนขยายของ Web Vitals Chrome

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

ส่วนขยายนี้วัดตัวชี้วัด Web Vitals สามตัวในลักษณะที่ตรงกับวิธีการวัดโดย Chrome และรายงานไปยังเครื่องมืออื่น ๆ ของ Google (เช่นรายงานประสบการณ์ผู้ใช้ Chrome, ข้อมูลเชิงลึกความเร็วของหน้า, Search Console)

รองรับ Web Vitals หลักทั้งหมดและใช้ประโยชน์จากห้องสมุด Vitals Vitals ภายใต้ฮูดเพื่อจับภาพ:

  • สีที่มีรสชาติที่ใหญ่ที่สุด
  • การเปลี่ยนรูปแบบสะสม
  • ปฏิสัมพันธ์กับสีถัดไป

นอกจากนี้ยังรองรับตัวชี้วัดการวินิจฉัย:

  • เวลาที่จะไบต์ก่อน
  • สีที่มีความสุขครั้งแรก

คำแนะนำการติดตั้ง

Web Vitals Chrome Extension สามารถติดตั้งได้จาก Chrome Web Store

หากคุณกำลังมองหาบิลด์ที่มีเลือดออกมากขึ้นคุณสามารถติดตั้งเวอร์ชันของส่วนขยายจาก Master

ติดตั้งจาก Master

Google Chrome

  1. ดาวน์โหลด repo นี้เป็นไฟล์ zip จาก GitHub
  2. คลายซิปไฟล์และคุณควรมีโฟลเดอร์ชื่อ web-vitals-extension-master
  3. ใน Chrome ไปที่หน้าส่วนขยาย ( chrome://extensions )
  4. เปิดใช้งานโหมดนักพัฒนา
  5. ลากโฟลเดอร์ web-vitals-extension-master ทุกที่บนหน้าเพื่อนำเข้า (อย่าลบโฟลเดอร์หลังจากนั้น)

การใช้งาน

ตราสัญลักษณ์

ตราสัญลักษณ์โดยรอบช่วยตรวจสอบว่าหน้าผ่านเกณฑ์หลักของเว็บ Vitals หรือไม่

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

ป้ายมีหลายรัฐ:

  • ปิดใช้งาน - สี่เหลี่ยมสีเทา
  • ดี - วงกลมสีเขียว
  • ตัวชี้วัดอย่างน้อยหนึ่งรายการต้องการการปรับปรุง - Amber Square
  • ตัวชี้วัดหนึ่งตัวขึ้นไป - สามเหลี่ยมสีแดง

หากตัวชี้วัดหนึ่งตัวขึ้นไปล้มเหลวป้ายจะทำให้ค่าของตัวชี้วัดเหล่านี้เคลื่อนไหวได้ (แอนิเมชั่นนี้สามารถปิดในหน้าจอตัวเลือก)

สว่านลงอย่างละเอียด

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

ตัวอย่างเช่นการมีปฏิสัมพันธ์กับสีถัดไปต้องมีการโต้ตอบจริง (เช่นคลิก/แตะ) กับหน้าและจะอยู่ใน Waiting for input... ระบุว่าเป็นกรณีนี้ เราขอแนะนำให้ปรึกษาเอกสาร Web.Dev สำหรับ LCP, CLS และ INP เพื่อทำความเข้าใจว่าค่าตัวชี้วัดจะชำระเมื่อใด

ป๊อปอัพผสมผสานประสบการณ์การใช้งานเว็บหลักในพื้นที่ของคุณเข้ากับข้อมูลผู้ใช้จริงจากสนามผ่านรายงาน Chrome UX รายงาน (CRUX) API การรวมนี้ให้ข้อมูลเชิงลึกตามบริบทเพื่อช่วยให้คุณเข้าใจว่าประสบการณ์ของคุณมีความคล้ายคลึงกันอย่างไรกับผู้ใช้เดสก์ท็อปรายอื่นในหน้าเดียวกัน นอกจากนี้เรายังได้เพิ่มตัวเลือกใหม่เพื่อ "เปรียบเทียบประสบการณ์ท้องถิ่นกับข้อมูลฟิลด์โทรศัพท์" แทนหากจำเป็น โปรดทราบว่าข้อมูล crux อาจไม่พร้อมใช้งานสำหรับบางหน้าซึ่งในกรณีนี้เราพยายามโหลดข้อมูลฟิลด์สำหรับจุดกำเนิดโดยรวม

การซ้อนทับ

การซ้อนทับแสดงการแสดงผลหัวขึ้น (HUD) ซึ่งซ้อนทับหน้าของคุณ มันมีประโยชน์หากคุณต้องการมุมมองที่ถาวรของตัวชี้วัดเว็บหลักของคุณในระหว่างการพัฒนา เพื่อเปิดใช้งานการซ้อนทับ:

  • คลิกขวาที่ตราสัญลักษณ์โดยรอบและไปที่ตัวเลือก
  • ตรวจสอบ Display HUD overlay และคลิก 'บันทึก'
  • โหลดแท็บใหม่สำหรับ URL ที่คุณต้องการทดสอบ ตอนนี้ควรมีการซ้อนทับ

บันทึกคอนโซล

คุณสมบัติการบันทึกคอนโซลของส่วนขยาย Web Vitals ให้มุมมองการวินิจฉัยของตัวชี้วัดที่รองรับทั้งหมด เพื่อเปิดใช้งานบันทึกคอนโซล:

  • คลิกขวาที่ตราสัญลักษณ์โดยรอบและไปที่ตัวเลือก
  • ตรวจสอบ Console logging และคลิก 'บันทึก'
  • เปิดแผงคอนโซลใน Devtools และตัวกรองสำหรับ Web Vitals

หากต้องการกรองตัวชี้วัดที่ไม่จำเป็นให้เตรียมป้ายลบด้วยชื่อเมตริก ตัวอย่างเช่นตั้งค่าตัวกรองไปยัง Web Vitals Extension -CLS -LCP เพื่อกรองข้อมูลการวินิจฉัย CLS และ LCP

ข้อมูลการวินิจฉัยสำหรับแต่ละเมตริกจะถูกบันทึกเป็นกลุ่มคอนโซลที่เตรียมไว้โดยชื่อส่วนขยาย [Web Vitals Extension] ซึ่งหมายความว่าคุณจะต้องคลิกบรรทัดนี้เพื่อสลับกลุ่มเปิดและปิด

ชนิดของข้อมูลการวินิจฉัยแตกต่างกันไปตามตัวชี้วัด ตัวอย่างเช่นข้อมูล LCP รวมถึง:

  • การอ้างอิงถึงองค์ประกอบ LCP
  • ตารางตัวชี้วัดส่วนย่อย LCP
  • คำเตือนเสริมหากแท็บถูกโหลดในพื้นหลัง
  • วัตถุที่มีการระบุแหล่งที่มาเต็มรูปแบบจาก Web-Vitals

การกำหนดเวลาของผู้ใช้

สำหรับตัวชี้วัดบางตัว (LCP และ INP) การแยกย่อยสามารถบันทึกลงในเครื่องหมายเวลาของผู้ใช้โดยใช้ performance.measure ซึ่งสามารถดูได้ในการติดตามประสิทธิภาพของ Devtools

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

การบริจาค

การมีส่วนร่วมในโครงการนี้ยินดีต้อนรับในรูปแบบของการร้องขอการดึงหรือปัญหา โปรดดูรายละเอียดเพิ่มเติม MD สำหรับรายละเอียดเพิ่มเติม

หากข้อเสนอแนะของคุณเกี่ยวข้องกับวิธีที่เราวัดตัวชี้วัดโปรดยื่นปัญหากับเว็บ-vitals โดยตรง

รหัสส่วนขยายมีโครงสร้างอย่างไร?

  • src/browser_action/vitals.js : สคริปต์ที่ใช้ประโยชน์จาก webVitals.js เพื่อรวบรวมตัวชี้วัดและการเปลี่ยนแปลงตัวชี้วัดออกอากาศสำหรับป้ายและ HUD ให้คะแนนโดยรวมของตัวชี้วัดที่สามารถใช้สำหรับการติดป้าย
  • src/bg/background.js : ดำเนินการอัปเดตไอคอนตราโดยใช้ข้อมูลที่จัดทำโดย Vitals.js ส่งผ่านข้อมูลไปยัง popup.js เพื่อแสดงสรุปการวัดรายละเอียดเพิ่มเติม
  • src/browser_action/popup.js : สคริปต์เนื้อหาที่จัดการการแสดงผลรายงานการวัดรายละเอียดในหน้าต่างป๊อปอัพที่แสดงเมื่อคลิกไอคอนตรา
  • src/options/options.js : ตัวเลือก UI (การกำหนดค่าที่บันทึกไว้) สำหรับคุณสมบัติขั้นสูงเช่น HUD Overlay

คำถามที่พบบ่อย

ใครคือผู้ชมหลักสำหรับส่วนขยายนี้?

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

ฉันควรตีความตัวเลขตัวชี้วัดที่รายงานโดยเครื่องมือนี้อย่างไร

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

ฉันสามารถทำอะไรได้บ้างเพื่อปรับปรุง Web Vitals หลักของฉัน?

เรากำลังจัดทำชุดคำแนะนำสำหรับการเพิ่มประสิทธิภาพการวัด Web Vitals หลักแต่ละตัวหากคุณพบว่าหน้าของคุณไม่ผ่านเกณฑ์เฉพาะ:

  • เพิ่มประสิทธิภาพ CLS
  • เพิ่มประสิทธิภาพ LCP
  • เพิ่มประสิทธิภาพ INP
  • เพิ่มประสิทธิภาพ TTFB

Lighthouse ยังรวมถึงการตรวจสอบความสามารถในการดำเนินการเพิ่มเติมสำหรับตัวชี้วัดเหล่านี้

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

ใบอนุญาต

Apache 2.0

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด