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

Brendan Kenny
Brendan Kenny

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 รายการ โดยที่ทั้ง 2 องค์ประกอบมี "id" เดียวกัน

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

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

ประภาคารสำหรับวิ่ง

Lighthouse พร้อมใช้งานในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome, 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 ให้ทำดังนี้