ตอนนี้ส่วนขยาย Web Vitals แสดงข้อมูลการแก้ไขข้อบกพร่องเพิ่มเติมเพื่อช่วยคุณระบุสาเหตุของปัญหา Core Web Vitals
เผยแพร่: 4 พฤษภาคม 2023
ส่วนขยาย Web Vitals ช่วยให้เข้าถึงข้อมูลการวินิจฉัยของ Core Web Vitals ได้ง่าย เพื่อช่วยนักพัฒนาซอฟต์แวร์วัดผลและแก้ไขปัญหาเกี่ยวกับ Core Web Vitals เครื่องมือนี้ช่วยเสริมเครื่องมืออื่นๆ ที่ทีม Chrome มีให้เพื่อช่วยให้นักพัฒนาแอปปรับปรุงประสบการณ์การใช้งานเว็บไซต์ได้
เราได้อัปเดตส่วนขยายเพื่อให้ข้อมูลการแก้ไขข้อบกพร่องเพิ่มเติมแก่นักพัฒนาแอป เพื่อให้เข้าใจและแก้ไขปัญหาด้านประสิทธิภาพได้ง่ายขึ้น
การแสดงข้อมูลการแก้ไขข้อบกพร่องในคอนโซล
ส่วนขยาย Web Vitals มีตัวเลือกการแก้ไขข้อบกพร่อง "การบันทึกคอนโซล" มานานแล้ว ซึ่งเปิดใช้ได้ในหน้าจอตัวเลือก ดังนี้
ก่อนการอัปเกรดครั้งล่าสุด การดำเนินการนี้จะบันทึกเอาต์พุตจาก web-vitals library
(ซึ่งเป็นรากฐานของส่วนขยาย) ไว้ในออบเจ็กต์ JSON
จากนั้น คุณจะขยายออบเจ็กต์นี้เพื่อดูรายละเอียดทั้งหมด รวมถึงสามารถวางเมาส์เหนือองค์ประกอบต่างๆ เช่น รูปภาพ LCP เพื่อไฮไลต์องค์ประกอบในแผงหลักได้
เครื่องมือนี้มีประโยชน์ แต่รูปแบบเอาต์พุตนั้นไม่ค่อยเป็นมิตรกับผู้ใช้ และเราคิดว่าเราสามารถมอบประสบการณ์การใช้งานที่ดีขึ้นให้แก่นักพัฒนาแอป เราจึงปรับปรุงส่วนขยายเพื่อให้มองเห็นข้อมูลที่สำคัญที่สุดได้มากขึ้น ขณะเดียวกันก็ยังคงใส่ออบเจ็กต์แบบเต็มสำหรับผู้ที่ต้องการรายละเอียดเพิ่มเติม
ข้อมูลการแก้ไขข้อบกพร่องใหม่สําหรับเมตริกแต่ละรายการ
ในรุ่นใหม่นี้ เราได้เพิ่มข้อมูลการแก้ไขข้อบกพร่องใหม่ในรูปแบบที่อ่านง่ายขึ้นเพื่อช่วยคุณค้นหาและแก้ไขปัญหา เมตริกแต่ละรายการจะมีข้อมูลที่แตกต่างกัน เนื่องจากเมตริกแต่ละรายการมีความแตกต่างกัน
ข้อมูลการแก้ไขข้อบกพร่อง LCP
สําหรับ Largest Contentful Paint (LCP) เราจะแสดงทั้งองค์ประกอบและรายละเอียดของ 4 ระยะที่ระบุไว้ในคู่มือเพิ่มประสิทธิภาพ LCP ดังนี้
เวลา LCP (2,876 มิลลิวินาที หรือประมาณ 2.9 วินาที) ได้รับการไฮไลต์เป็นสีเหลืองอำพันเนื่องจากอยู่ในหมวดหมู่ "ต้องปรับปรุง"
ในตัวอย่างนี้ เราพบว่า Resource load time
เป็นค่าที่ใช้เวลานานที่สุด ดังนั้นหากต้องการปรับปรุงเวลา LCP คุณควรเพิ่มประสิทธิภาพ Resource load time
ซึ่งอาจทำได้โดยการหลีกเลี่ยงการโฮสต์ในโดเมนแยกต่างหาก หรือใช้รูปภาพขนาดเล็กลงหรือรูปแบบที่มีประสิทธิภาพมากขึ้น ในกรณีนี้ ความเร็วที่ช้าลงเป็นเพราะมีการจงใจทำให้ช้าลงเพื่อแสดงผลลัพธ์เท่านั้น web.dev เป็นเว็บไซต์ที่รวดเร็ว 😀
นอกจากนี้ คุณยังวางเมาส์เหนือองค์ประกอบเพื่อไฮไลต์รูปภาพได้ด้วย
การคลิกขวาที่องค์ประกอบยังช่วยให้คุณแสดงองค์ประกอบนั้นในแผงองค์ประกอบได้ด้วย
ที่นี่องค์ประกอบ LCP คือรูปภาพ และการวางเมาส์เหนือองค์ประกอบนั้นในคอนโซลทางด้านขวาจะไฮไลต์องค์ประกอบนั้นในเว็บไซต์ทางด้านซ้ายด้วย
ข้อมูลการแก้ไขข้อบกพร่อง CLS
ตอนนี้ Shift ที่ส่งผลให้เกิด Cumulative Layout Shift (CLS) จะปรากฏขึ้น และวางเมาส์เหนือองค์ประกอบที่เกี่ยวข้อง ดังนี้
ภาพหน้าจอด้านบนแสดงการเปลี่ยนแปลง 2 ครั้ง ครั้งแรกประกอบด้วยองค์ประกอบ 2 รายการ (เมื่อโหลดรูปภาพแบนเนอร์และเนื้อหาใต้รูปภาพเลื่อนลง) และครั้งที่ 2 ประกอบด้วยองค์ประกอบ 4 รายการ (เมื่อโหลดโฆษณาแบบไดนามิกและหน้าเว็บส่วนใหญ่เลื่อนลง)
การวางเมาส์เหนือองค์ประกอบ h2
ในภาพหน้าจอนี้ในคอนโซลทางด้านขวาจะไฮไลต์องค์ประกอบในเว็บไซต์ทางด้านซ้าย
ข้อมูลการแก้ไขข้อบกพร่องของ FID
สำหรับ First Input Delay (FID) เราจะแสดงองค์ประกอบที่ได้รับผลกระทบ (ซึ่งสามารถวางเมาส์เหนือองค์ประกอบนั้นในหน้าเว็บได้) และประเภทการโต้ตอบ รวมถึงออบเจ็กต์ JSON แบบเต็มตามปกติดังนี้
ข้อมูลการแก้ไขข้อบกพร่อง INP
สําหรับ Interaction to Next Paint (INP) เราได้เพิ่มบันทึกใหม่ 2 รายการ ได้แก่
- INP - การโต้ตอบที่นานที่สุด
- การโต้ตอบ - การโต้ตอบทั้งหมด
เมตริก INP
อย่างแรก เราจะไฮไลต์เมตริก INP เมื่อมีการเปลี่ยนแปลง:
ส่วนขยายจะแบ่งเวลา INP ออกเป็น 3 ระยะเช่นเดียวกับ LCP ดังนี้
- ความล่าช้าของอินพุต
- ระยะเวลาในการประมวลผล
- ความล่าช้าของงานนำเสนอ
ซึ่งจะช่วยให้คุณทราบว่าเหตุการณ์ช้าเนื่องจากถูกขัดจังหวะโดยเหตุการณ์อื่นๆ (ความล่าช้าในการป้อนข้อมูล) เนื่องจากตัวแฮนเดิลเหตุการณ์เองช้าเนื่องจากโค้ดของคุณ (ระยะเวลาการประมวลผล) เกิดจากความล่าช้าในการเรนเดอร์หลังการประมวลผล (ความล่าช้าในการนำเสนอ) หรือเกิดจากสาเหตุทั้ง 2 ข้อขึ้นไป
การโต้ตอบ
INP อาจทำงานช้าเนื่องจากการโต้ตอบก่อนหน้านี้บล็อกเทรดหลัก ดังนั้นจึงทำให้เกิดความล่าช้าในการป้อนข้อมูลสูง ด้วยเหตุนี้ เราจึงแสดงการโต้ตอบทั้งหมดในรูปแบบที่คล้ายกับการบันทึก INP ดังนี้
ซึ่งจะช่วยให้คุณ "ติดตามแบบเรียลไทม์" เว็บไซต์ได้โดยโต้ตอบกับเว็บไซต์นั้นและดูในคอนโซลว่าการโต้ตอบใดและชุดค่าผสมใดมีแนวโน้มที่จะทำให้เกิดปัญหา 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