มีอะไรใหม่ใน Lighthouse 9.0

Brendan Kenny
Brendan Kenny
X GitHub

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

Lighthouse 9.0 พร้อมใช้งานทันทีในบรรทัดคำสั่งใน Chrome Canary และใน PageSpeed Insights ซึ่งจะอยู่ใน Chrome เวอร์ชันเสถียรใน Chrome 98

การเปลี่ยนแปลง API

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

ดูรายการการเปลี่ยนแปลงทั้งหมดได้ใน บันทึกการเปลี่ยนแปลง 9.0

Lighthouse สำหรับการไหลเวียนของผู้ใช้

Lighthouse มี API การไหลเวียนของผู้ใช้ใหม่ที่ช่วยให้ทำการทดสอบในห้องทดลองได้ทุกเมื่อภายในช่วงอายุการใช้งานของหน้าเว็บ

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

รายงานโฟลว์ผู้ใช้ของ Lighthouse ที่มีขั้นตอนการโหลดและการโต้ตอบกับเว็บไซต์หลายขั้นตอน และผลการตรวจสอบของ Lighthouse สำหรับแต่ละขั้นตอน

ดูข้อมูลเพิ่มเติมได้ที่บทแนะนำและตัวอย่างโค้ดสำหรับโฟลว์ของผู้ใช้ของ Lighthouse

รายงานการรีเฟรช

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

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

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

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

ส่วนการตั้งค่าที่อัปเดตของรายงาน Lighthouse ซึ่งตอนนี้จะมีสรุปสำหรับรายการต่างๆ เช่น เวลาที่บันทึกหน้าเว็บ ประเภทการจำลองหน้าเว็บที่ใช้ และเวอร์ชันของ Chrome ที่ใช้การทดสอบ

หากต้องการดูรายงานใหม่ในการใช้งานจริง ให้ลองใช้ Lighthouse 9.0 หรือไปที่รายงานตัวอย่างนี้

ปัญหาการช่วยเหลือพิเศษที่พบบ่อยคือกรณีที่ข้อมูลในหน้าเว็บควรจะไม่ซ้ำกัน เช่น ในกรณีที่รหัสที่อ้างอิงในแอตทริบิวต์ aria-labelledby มีการใช้กับองค์ประกอบหลายรายการ

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

ใน Lighthouse 9.0 องค์ประกอบทั้งหมดที่แชร์รหัสดังกล่าวจะแสดงอยู่ในรายการดังนี้

การตรวจสอบ Lighthouse สำหรับ "องค์ประกอบที่โฟกัสได้ทั้งหมดต้องมี "id" ที่ไม่ซ้ำกัน ซึ่งจะแสดง 2 องค์ประกอบ โดยมี "id" เหมือนกันทั้งคู่

ฟังก์ชัน "โหนดที่เกี่ยวข้อง" นี้ให้บริการโดย axe-core จึงอาจปรากฏในการตรวจสอบการช่วยเหลือพิเศษอื่นๆ ด้วย

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

ไฟสำหรับวิ่ง

Lighthouse พร้อมใช้งานใน Chrome DevTools, npm (เป็นโมดูลโหนดและ CLI) และเป็นส่วนขยายของเบราว์เซอร์ (ใน Chrome และ Firefox) และขับเคลื่อนบริการมากมายของ Google ซึ่งรวมถึง web.dev/measure และ PageSpeed Insights

หากต้องการลองใช้ Lighthouse Node CLI ให้ใช้คำสั่งต่อไปนี้

npm install -g lighthouse
lighthouse https://www.example.com --view

ติดต่อทีม Lighthouse

หากต้องการพูดคุยเกี่ยวกับฟีเจอร์ใหม่ การเปลี่ยนแปลงในรุ่น 9.0 หรืออื่นๆ ที่เกี่ยวข้องกับ Lighthouse ให้ทำดังนี้