วิวัฒนาการของ Lighthouse: การผสานรวมอย่างต่อเนื่อง สูตรคะแนนประสิทธิภาพใหม่ และอื่นๆ

รับข้อมูลอัปเดตล่าสุดของ Lighthouse และข้อมูลเชิงลึกจาก Chrome Developer Summit 2019

Elizabeth Sweeny
Elizabeth Sweeny

ใน Speed Tooling Evolutions เสวนาในงาน Chrome Developer Summit (CDS) คุณ Paul Ireland และฉันนำเสนอผลิตภัณฑ์และ ฟีเจอร์ใหม่ๆ จาก Google ที่จะช่วยให้คุณสร้างและรักษาประสบการณ์ใช้งานที่รวดเร็วเป็นพิเศษให้แก่ผู้ใช้ทุกคน ใจกลางของเรื่องราวคือส่วนเพิ่มเติมจากเครื่องมือตรวจสอบประสิทธิภาพในตระกูล Lighthouse

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

รายงาน CI ของ Lighthouse

Lighthouse CI รองรับ Travis CI, Circle CI และ GitHub Actions ในตัว รวมถึงบริการ Ubuntu หรือ CI ที่อิงตามคอนเทนเนอร์ซึ่งมีการกำหนดค่าบางอย่าง คุณสามารถติดตั้งเซิร์ฟเวอร์ CI ของ Lighthouse ภายในองค์กรหรือใช้อิมเมจ Dockker เพื่อตั้งค่าทันทีได้ พื้นที่เก็บข้อมูลรายงานของ Lighthouse ชั่วคราวที่เป็นสาธารณะฟรีพร้อมให้ใช้งานเป็นทางเลือกเมื่อเริ่มต้นใช้งานทันที

พร้อมใช้งานเร็วๆ นี้: ข้อมูลอัปเดตเกี่ยวกับคะแนนประสิทธิภาพ

คะแนนประสิทธิภาพของ Lighthouse เวอร์ชัน 6 กำลังจะมีการเปลี่ยนแปลง ในเวอร์ชัน 5 (ข้อมูล ณ เดือนพฤศจิกายน 2019) Lighthouse มีเมตริก 5 รายการที่ถ่วงน้ำหนักและผสมผสานเพื่อให้ได้คะแนนประสิทธิภาพ 0-100 ได้แก่ First Contentful Paint, Speed Index, First Meaningful Paint, Time to Interactive และFirst CPU Idle

การเปรียบเทียบสูตรคะแนนประสิทธิภาพของ Lighthouse ในเวอร์ชัน 5 และ 6

ดูข้อมูลอย่างละเอียดได้ที่การให้คะแนนประสิทธิภาพของ Lighthouse

ใน Lighthouse เวอร์ชัน 6 เมตริกใหม่ Largest Contentful Paint (LCP) และ Total Blocked Time (TBT) จะมาแทนที่ First CPU Idle (FCI) และ First Meaningful Paint (FMP) น้ำหนักของเมตริกแต่ละรายการจาก 5 เมตริกจะได้รับการปรับเพื่อให้สมดุลยิ่งขึ้นระหว่างระยะต่างๆ ของการโหลดและการวัดการโต้ตอบ

ทีม Lighthouse ยังคงพยายามตรวจสอบว่าเส้นโค้งคะแนนทั้งหมดมีการปรับแต่งอย่างละเอียด รวมถึงมีเมตริกที่สมบูรณ์และผ่านการทดสอบอย่างละเอียดแล้ว โดยตั้งเป้าที่จะจัดส่งคะแนนประสิทธิภาพ ของ Lighthouse v6 ในเดือนมกราคม 2020

ชุดสแต็ก Lighthouse

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

คําแนะนําของรายงาน Lighthouse สําหรับการเลื่อนรูปภาพนอกหน้าจอในแอปพลิเคชัน React

ขณะนี้มี Stack Pack สำหรับ Angular, WordPress, Magento, React และ AMP หากต้องการสร้าง Stack Pack ของคุณเอง ให้ไปที่ที่เก็บ GitHub หรือติดต่อทีม Lighthouse

พร้อมใช้งานเร็วๆ นี้: ปลั๊กอิน Lighthouse เป็นส่วนขยายของ Chrome

ไอคอนปลั๊กอิน Lighthouse

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

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

แผงการตรวจสอบเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่มีตัวเลือกสำหรับเรียกใช้ปลั๊กอิน Lighthouse สำหรับโฆษณาของผู้เผยแพร่โฆษณาของ Google และประสบการณ์ของผู้ใช้
ปลั๊กอินชุมชนในแผงการตรวจสอบเครื่องมือสำหรับนักพัฒนาเว็บ (เบต้า)

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

ดูข้อมูลเพิ่มเติม

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับ Lighthouse และการอัปเดตเครื่องมือประสิทธิภาพอื่นๆ จาก CDS 2019 โปรดดูการบรรยายเกี่ยวกับวิวัฒนาการของเครื่องมือความเร็ว

ความคิดเห็นของคุณมีคุณค่าอย่างมากในการปรับปรุง Lighthouse ให้ดีขึ้น ดังนั้นลองใช้ Lighthouse CI เขียนสแต็กแพ็ก หรือสร้างปลั๊กอิน Lighthouse แล้วบอกให้เราทราบว่าคุณคิดอย่างไร