มีอะไรใหม่ใน 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 แสดงองค์ประกอบเพียงรายการเดียว ผู้ทดสอบจึงคิดว่าเป็นข้อบกพร่องที่ระบบแจ้งว่าองค์ประกอบรายการเดียวนั้นซ้ำกัน

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

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

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

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

ใช้งาน Lighthouse

Lighthouse มีให้บริการในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome, npm (เป็นโมดูล Node และ 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