รับข้อมูลอัปเดตล่าสุดของ Lighthouse และข้อมูลเชิงลึกจาก Chrome Developer Summit 2019
ใน Speed Tooling Evolutions เสวนาในงาน Chrome Developer Summit (CDS) คุณ Paul Ireland และฉันนำเสนอผลิตภัณฑ์และ ฟีเจอร์ใหม่ๆ จาก Google ที่จะช่วยให้คุณสร้างและรักษาประสบการณ์ใช้งานที่รวดเร็วเป็นพิเศษให้แก่ผู้ใช้ทุกคน ใจกลางของเรื่องราวคือส่วนเพิ่มเติมจากเครื่องมือตรวจสอบประสิทธิภาพในตระกูล Lighthouse
รุ่นอัลฟ่า CI ของ Lighthouse
ทีม Lighthouse ได้เปิดตัว Lighthouse CI เวอร์ชันอัลฟ่า ซึ่งเป็นผลิตภัณฑ์การผสานรวมต่อเนื่องใหม่ที่ช่วยให้คุณเรียกใช้ Lighthouse ในทุกคอมมิตก่อนที่จะเข้าสู่เวอร์ชันที่ใช้งานจริง Lighthouse CI เรียกใช้ Lighthouse หลายครั้ง ยืนยันเกณฑ์การตรวจสอบหรือเกณฑ์เมตริกแบบคงที่ จากนั้นจึงอัปโหลดรายงาน Lighthouse ไปยังเซิร์ฟเวอร์สำหรับการกระจายภาพและประวัติคะแนนหมวดหมู่พื้นฐาน การกำหนดค่าbudgets.json ที่มีอยู่จะทำงานได้อย่างราบรื่นควบคู่ไปกับไวยากรณ์ใหม่ที่ชัดเจนสำหรับยืนยันผลลัพธ์การตรวจสอบหรือหมวดหมู่ของ Lighthouse ทั้งหมด
![รายงาน CI ของ Lighthouse](https://web.dev/static/blog/lighthouse-evolution-cds-2019/image/lighthouse-ci-report-25b1458e58de9.png?authuser=6&hl=th)
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](https://web.dev/static/blog/lighthouse-evolution-cds-2019/image/comparison-lighthouse-pe-488df5972139f.png?authuser=6&hl=th)
ดูข้อมูลอย่างละเอียดได้ที่การให้คะแนนประสิทธิภาพของ 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](https://web.dev/static/blog/lighthouse-evolution-cds-2019/image/lighthouse-report-recomme-aa3fa998f1d3d.png?authuser=6&hl=th)
ขณะนี้มี Stack Pack สำหรับ Angular, WordPress, Magento, React และ AMP หากต้องการสร้าง Stack Pack ของคุณเอง ให้ไปที่ที่เก็บ GitHub หรือติดต่อทีม Lighthouse
พร้อมใช้งานเร็วๆ นี้: ปลั๊กอิน Lighthouse เป็นส่วนขยายของ Chrome
![ไอคอนปลั๊กอิน Lighthouse](https://web.dev/static/blog/lighthouse-evolution-cds-2019/image/lighthouse-plugin-icon-9256520652376.png?authuser=6&hl=th)
Lighthouse Plugins เป็นอีกวิธีหนึ่งในการใช้ประโยชน์จากความสามารถในการขยายของ Lighthouse มีการตรวจสอบคุณภาพจำนวนมากที่การตรวจสอบหลักของ Lighthouse ยังไม่ครอบคลุมในขณะนี้ เนื่องจากการตรวจสอบดังกล่าวใช้ได้กับนักพัฒนาซอฟต์แวร์เพียงบางส่วนเท่านั้น หรือเนื่องจากทีมยังไม่มีแบนด์วิดท์สำหรับดำเนินการตรวจสอบ
ปลั๊กอิน Lighthouse ช่วยให้ผู้เชี่ยวชาญในชุมชนใช้การตรวจสอบชุดใหม่ที่ Lighthouse เรียกใช้และเพิ่มหมวดหมู่ใหม่ในรายงานได้ ขณะนี้ปลั๊กอินจะใช้งานได้ใน Lighthouse CLI เท่านั้น แต่เป้าหมายคือ การเปิดใช้การเรียกใช้ในแผงการตรวจสอบของเครื่องมือ DevTools ด้วย
![แผงการตรวจสอบเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่มีตัวเลือกสำหรับเรียกใช้ปลั๊กอิน Lighthouse สำหรับโฆษณาของผู้เผยแพร่โฆษณาของ Google และประสบการณ์ของผู้ใช้](https://web.dev/static/blog/lighthouse-evolution-cds-2019/image/chrome-devtools-audits-pa-22f29f36658cd.png?authuser=6&hl=th)
เมื่อผู้ใช้ติดตั้งส่วนขยายปลั๊กอิน Lighthouse จาก Chrome เว็บสโตร์ เครื่องมือสำหรับนักพัฒนาเว็บจะระบุปลั๊กอินที่ติดตั้งไว้และเสนอเป็นตัวเลือกในแผงการตรวจสอบ ทีม Lighthouse จะสร้างการสนับสนุนสำหรับแนวทางการใช้ปลั๊กอินในอีกไม่กี่เดือนข้างหน้า โปรดอดใจรอ ในระหว่างนี้ คุณสร้างปลั๊กอินเป็นโมดูลโหนด และทำให้ผู้ใช้ Lighthouse ทุกคนเข้าถึงได้ผ่าน CLI
ดูข้อมูลเพิ่มเติม
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับ Lighthouse และการอัปเดตเครื่องมือประสิทธิภาพอื่นๆ จาก CDS 2019 โปรดดูการบรรยายเกี่ยวกับวิวัฒนาการของเครื่องมือความเร็ว
ความคิดเห็นของคุณมีคุณค่าอย่างมากในการปรับปรุง Lighthouse ให้ดีขึ้น ดังนั้นลองใช้ Lighthouse CI เขียนสแต็กแพ็ก หรือสร้างปลั๊กอิน Lighthouse แล้วบอกให้เราทราบว่าคุณคิดอย่างไร