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

Brendan Kenny
Brendan Kenny
X GitHub
Lighthouse เป็นเครื่องมือตรวจสอบเว็บไซต์อัตโนมัติที่ช่วยให้นักพัฒนาซอฟต์แวร์มีโอกาสและได้รับการวินิจฉัยเพื่อปรับปรุงประสบการณ์การใช้งานเว็บไซต์ของผู้ใช้ โดยพร้อมใช้งานใน Chrome DevTools, npm (เป็นโมดูลโหนดและ CLI) หรือเป็นส่วนขยายของเบราว์เซอร์ (ใน Chrome และ Firefox) และขับเคลื่อนบริการมากมายของ Google ซึ่งรวมถึง web.dev/measure และ PageSpeed Insights

Lighthouse 8.4 พร้อมใช้งานทันทีในบรรทัดคำสั่งและใน Chrome Canary ฟีเจอร์นี้จะอยู่ใน Chrome เวอร์ชันเสถียรใน Chrome 95 และจะพร้อมใช้งานใน PageSpeed Insights ภายใน 1 สัปดาห์

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

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

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

การตรวจสอบใหม่

อย่าโหลดรูปภาพ Largest Contentful Paint แบบ Lazy Loading

รูปภาพที่โหลดแบบ Lazy Loading เป็นวิธีที่มีประสิทธิภาพในการเลื่อนรูปภาพนอกหน้าจอ เพื่อไม่ให้รบกวนการโหลดเนื้อหาที่ครึ่งหน้าบน

อย่างไรก็ตาม หากองค์ประกอบ LCP ของหน้าเว็บเป็นรูปภาพ การโหลดแบบ Lazy Loading อาจส่งผลเสียต่อ LCP อย่างมาก เบราว์เซอร์อาจจัดรูปภาพไว้ในคิวและดึงทรัพยากรอื่นๆ ก่อน แทนที่จะจัดลำดับความสำคัญของรูปภาพเพื่อดาวน์โหลดทันที การศึกษาล่าสุดเกี่ยวกับการโหลดแบบ Lazy Loading ใน WordPress พบว่า LCP มีประสิทธิภาพดีขึ้นถึง 15% สำหรับบางเว็บไซต์ หากรูปภาพในวิวพอร์ตเริ่มต้นไม่ได้โหลดแบบ Lazy Loading

การตรวจสอบ LCP ที่โหลดแบบ Lazy Loading ในรายงาน Lighthouse

ตอนนี้ Lighthouse จะตรวจพบว่าองค์ประกอบ LCP เป็นรูปภาพที่โหลดแบบ Lazy Loading หรือไม่ และแนะนำให้นำแอตทริบิวต์ loading ออกจากองค์ประกอบดังกล่าว

ดูข้อมูลเพิ่มเติมได้ที่ข้อเสนอเริ่มต้นและคำขอพุลการใช้งาน

ตั้งค่าวิวพอร์ตสำหรับอุปกรณ์เคลื่อนที่เพื่อให้ First Input Delay ดีขึ้น

การตรวจสอบ viewport เป็นส่วนหนึ่งของหมวดหมู่แนวทางปฏิบัติแนะนำมาหลายปีแล้ว แต่ 8.4 ยินดีรับคำแนะนำนี้ไว้ในหมวดหมู่ประสิทธิภาพด้วย

เบราว์เซอร์ในอุปกรณ์เคลื่อนที่จำนวนมากรองรับ "แตะสองครั้งเพื่อซูม" เพื่อให้ผู้ใช้ขยายเนื้อหาที่ไม่ได้ออกแบบมาสำหรับหน้าจออุปกรณ์เคลื่อนที่ได้โดยง่าย กล่าวคือ เนื้อหาไม่มี <meta name="viewport"> ในอุปกรณ์เคลื่อนที่อย่างชัดแจ้ง ในทางปฏิบัติ เบราว์เซอร์จะต้องรอถึง 300 มิลลิวินาทีหลังจากผู้ใช้แตะ เพื่อดูว่าผู้ใช้แตะอีก 1 ครั้งหรือไม่ และในช่วงเวลาดังกล่าว หน้าเว็บจะไม่สามารถตอบสนองต่อการแตะครั้งแรกได้ ซึ่งคิดเป็น FID ล้มเหลวหลายร้อยมิลลิวินาที

การตรวจสอบวิวพอร์ตอุปกรณ์เคลื่อนที่ในรายงาน Lighthouse

ในการศึกษาข้อมูลจาก HTTP Archive เมื่อเร็วๆ นี้ เว็บไซต์มากกว่าครึ่งที่ได้รับคะแนน 90 คะแนนขึ้นไปใน Lighthouse แต่ล้มเหลวอย่างน้อย 1 Core Web Vitals โดยไม่ได้ตั้งค่าวิวพอร์ตสำหรับอุปกรณ์เคลื่อนที่และไม่ได้ทำงาน FID ดังนั้น ตอนนี้ส่วนประสิทธิภาพของ Lighthouse จึงจะแนะนำให้เพิ่มวิวพอร์ตดังตัวอย่างต่อไปนี้ หากไม่พบ

<meta name="viewport" content="width=device-width">

โปรดดูรายละเอียดเพิ่มเติมที่ปัญหาข้อเสนอและคำขอพุลการใช้งาน

ติดต่อทีม Lighthouse

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