การใช้ส่วนขยาย Web Vitals เพื่อแก้ปัญหาเกี่ยวกับ Core Web Vitals

ตอนนี้ส่วนขยาย Web Vitals แสดงข้อมูลการแก้ไขข้อบกพร่องเพิ่มเติมเพื่อช่วยคุณระบุสาเหตุของปัญหา Core Web Vitals

เผยแพร่: 4 พฤษภาคม 2023

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

เราได้อัปเดตส่วนขยายเพื่อให้ข้อมูลการแก้ไขข้อบกพร่องเพิ่มเติมแก่นักพัฒนาแอป เพื่อให้เข้าใจและแก้ไขปัญหาด้านประสิทธิภาพได้ง่ายขึ้น

การแสดงข้อมูลการแก้ไขข้อบกพร่องในคอนโซล

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

หน้าจอตัวเลือกส่วนขยาย Web Vitals

ก่อนการอัปเกรดครั้งล่าสุด การดำเนินการนี้จะบันทึกเอาต์พุตจาก web-vitals library (ซึ่งเป็นรากฐานของส่วนขยาย) ไว้ในออบเจ็กต์ JSON

การบันทึกคอนโซลเก่าของส่วนขยาย Web Vitals

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

การบันทึกคอนโซลเก่าของส่วนขยาย Web Vitals พร้อมการไฮไลต์องค์ประกอบ

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

ข้อมูลการแก้ไขข้อบกพร่องใหม่สําหรับเมตริกแต่ละรายการ

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

ข้อมูลการแก้ไขข้อบกพร่อง LCP

สําหรับ Largest Contentful Paint (LCP) เราจะแสดงทั้งองค์ประกอบและรายละเอียดของ 4 ระยะที่ระบุไว้ในคู่มือเพิ่มประสิทธิภาพ LCP ดังนี้

การบันทึกคอนโซลใหม่ของส่วนขยาย Web Vitals ที่แสดงองค์ประกอบ LCP และส่วนย่อย

เวลา LCP (2,876 มิลลิวินาที หรือประมาณ 2.9 วินาที) ได้รับการไฮไลต์เป็นสีเหลืองอำพันเนื่องจากอยู่ในหมวดหมู่ "ต้องปรับปรุง"

ในตัวอย่างนี้ เราพบว่า Resource load time เป็นค่าที่ใช้เวลานานที่สุด ดังนั้นหากต้องการปรับปรุงเวลา LCP คุณควรเพิ่มประสิทธิภาพ Resource load time ซึ่งอาจทำได้โดยการหลีกเลี่ยงการโฮสต์ในโดเมนแยกต่างหาก หรือใช้รูปภาพขนาดเล็กลงหรือรูปแบบที่มีประสิทธิภาพมากขึ้น ในกรณีนี้ ความเร็วที่ช้าลงเป็นเพราะมีการจงใจทำให้ช้าลงเพื่อแสดงผลลัพธ์เท่านั้น web.dev เป็นเว็บไซต์ที่รวดเร็ว 😀

นอกจากนี้ คุณยังวางเมาส์เหนือองค์ประกอบเพื่อไฮไลต์รูปภาพได้ด้วย

การบันทึกคอนโซลใหม่ของส่วนขยาย Web Vitals จะยังคงไฮไลต์องค์ประกอบไว้เมื่อวางเมาส์เหนือ

การคลิกขวาที่องค์ประกอบยังช่วยให้คุณแสดงองค์ประกอบนั้นในแผงองค์ประกอบได้ด้วย

ที่นี่องค์ประกอบ LCP คือรูปภาพ และการวางเมาส์เหนือองค์ประกอบนั้นในคอนโซลทางด้านขวาจะไฮไลต์องค์ประกอบนั้นในเว็บไซต์ทางด้านซ้ายด้วย

ข้อมูลการแก้ไขข้อบกพร่อง CLS

ตอนนี้ Shift ที่ส่งผลให้เกิด Cumulative Layout Shift (CLS) จะปรากฏขึ้น และวางเมาส์เหนือองค์ประกอบที่เกี่ยวข้อง ดังนี้

การบันทึกคอนโซลใหม่ของส่วนขยาย Web Vitals ที่แสดงการเปลี่ยนแปลงองค์ประกอบ CLS แต่ละครั้ง

ภาพหน้าจอด้านบนแสดงการเปลี่ยนแปลง 2 ครั้ง ครั้งแรกประกอบด้วยองค์ประกอบ 2 รายการ (เมื่อโหลดรูปภาพแบนเนอร์และเนื้อหาใต้รูปภาพเลื่อนลง) และครั้งที่ 2 ประกอบด้วยองค์ประกอบ 4 รายการ (เมื่อโหลดโฆษณาแบบไดนามิกและหน้าเว็บส่วนใหญ่เลื่อนลง)

การวางเมาส์เหนือองค์ประกอบ h2 ในภาพหน้าจอนี้ในคอนโซลทางด้านขวาจะไฮไลต์องค์ประกอบในเว็บไซต์ทางด้านซ้าย

ข้อมูลการแก้ไขข้อบกพร่องของ FID

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

การบันทึกคอนโซลใหม่ของส่วนขยาย Web Vitals ที่แสดงเป้าหมายและประเภท FID

ข้อมูลการแก้ไขข้อบกพร่อง INP

สําหรับ Interaction to Next Paint (INP) เราได้เพิ่มบันทึกใหม่ 2 รายการ ได้แก่

  • INP - การโต้ตอบที่นานที่สุด
  • การโต้ตอบ - การโต้ตอบทั้งหมด

เมตริก INP

อย่างแรก เราจะไฮไลต์เมตริก INP เมื่อมีการเปลี่ยนแปลง:

การบันทึกคอนโซลใหม่ของส่วนขยาย Web Vitals ที่แสดงเป้าหมาย INP, ประเภทเหตุการณ์ และรายละเอียด

ส่วนขยายจะแบ่งเวลา INP ออกเป็น 3 ระยะเช่นเดียวกับ LCP ดังนี้

  1. ความล่าช้าของอินพุต
  2. ระยะเวลาในการประมวลผล
  3. ความล่าช้าของงานนำเสนอ

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

การโต้ตอบ

INP อาจทำงานช้าเนื่องจากการโต้ตอบก่อนหน้านี้บล็อกเทรดหลัก ดังนั้นจึงทำให้เกิดความล่าช้าในการป้อนข้อมูลสูง ด้วยเหตุนี้ เราจึงแสดงการโต้ตอบทั้งหมดในรูปแบบที่คล้ายกับการบันทึก INP ดังนี้

การบันทึกคอนโซลใหม่ของส่วนขยาย Web Vitals ที่แสดงการโต้ตอบทั้งหมด

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

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

การกรองบันทึกของคอนโซล

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

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

การใช้ตัวเลือกการกรองคอนโซล

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

เราพยายามลดจำนวนตัวเลือกสำหรับส่วนขยายนี้ แต่โปรดแจ้งให้เราทราบโดยการแจ้งปัญหาใน GitHub หากการกรองของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ไม่เพียงพอและคุณต้องการใช้ตัวเลือกที่นี่

บทสรุป

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

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

เรายินดีรับฟังความคิดเห็นเกี่ยวกับการปรับปรุงเหล่านี้หรือข้อเสนอแนะอื่นๆ ในเครื่องมือติดตามปัญหาของ GitHub

ขอขอบคุณ

รูปภาพหลักโดย Farzad ใน Unsplash