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

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

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

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

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

ติดต่อทีม Lighthouse

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