Lighthouse เป็นเครื่องมือตรวจสอบเว็บไซต์ที่ช่วยนักพัฒนาซอฟต์แวร์ในด้านโอกาสและการวินิจฉัยเพื่อปรับปรุงประสบการณ์ของผู้ใช้เว็บไซต์
Lighthouse 10 พร้อมใช้งานทันทีในบรรทัดคำสั่งผ่าน npm และใน Chrome Canary ซึ่งจะอยู่ใน Chrome เวอร์ชันเสถียรใน Chrome 112 และใน PageSpeed Insights ในอีกไม่กี่สัปดาห์ข้างหน้า
การเปลี่ยนแปลงคะแนน
เมตริก Time To Interactive (TTI) ชื่อดังจะถูกนำออกใน Lighthouse 10 และสรุปกระบวนการเลิกใช้งานที่เริ่มต้นใน Lighthouse 8 น้ำหนักคะแนน 10% ของ TTI จะเปลี่ยนเป็น Cumulative Layout Shift (CLS) ซึ่งตอนนี้คิดเป็น 25% ของคะแนนประสิทธิภาพโดยรวม
TTI จะระบุช่วงเวลา แต่วิธีกำหนดนั้นทำให้เวลาตอบสนองกับคำขอของเครือข่ายและงานที่ใช้เวลานานมากเกินไป Largest Contentful Paint (LCP) และดัชนีความเร็วเป็นวิธีการเรียนรู้ที่ดีกว่าสำหรับลักษณะการโหลดเนื้อหาของหน้าเมื่อเทียบกับจำนวนคำขอของเครือข่ายที่ใช้งานอยู่ ในขณะเดียวกัน เวลาการบล็อกทั้งหมด (TBT) จะจัดการงานที่ใช้เวลานานและความพร้อมใช้งานของเทรดหลักได้อย่างมีประสิทธิภาพยิ่งขึ้น แม้จะไม่ใช่พร็อกซีโดยตรง มีแนวโน้มที่จะสัมพันธ์กับ Core Web Vitals มากกว่าตามที่มีการวัดในช่อง
น้ำหนักที่เพิ่มขึ้นของ CLS เป็นสิ่งที่เกิดขึ้นโดยไม่ตั้งใจต่อการนำ TTI ออก แต่สิ่งนี้สะท้อนถึงความสำคัญของสิ่งนี้ในฐานะ Core Web Vitals ได้ดีกว่าและจะเพิ่มการมุ่งเน้นให้กับเว็บไซต์ที่ยังคงเปลี่ยนแปลงเลย์เอาต์โดยไม่จำเป็นได้
เราคาดหวังว่าสิ่งนี้จะช่วยปรับปรุงคะแนนประสิทธิภาพของหน้าเว็บส่วนใหญ่ เนื่องจากหน้าเว็บส่วนใหญ่มีแนวโน้มที่จะได้คะแนนใน CLS ดีกว่า TTI จากการวิเคราะห์การโหลดหน้าเว็บ 13 ล้านหน้าในการเรียกใช้ HTTP Archive ครั้งล่าสุด พบว่า 90% ของหน้าเว็บเหล่านั้นจะเห็นคะแนนประสิทธิภาพของ Lighthouse ที่ดีขึ้น โดย 50% ของหน้าพบว่าประสิทธิภาพที่ดีขึ้นมากกว่า 5 คะแนน
หากคุณยังคงต้องใช้ค่า Lighthouse TTI (เช่น ในการยืนยัน CI) ด้วยเหตุผลใดก็ตาม ค่าดังกล่าวจะยังคงใช้งานได้ไม่เปลี่ยนแปลงในเอาต์พุต JSON ของ Lighthouse เพียงแต่มีคะแนนเป็น 0 และซ่อนอยู่ในรายงาน HTML การเข้าถึงตามสคริปต์ของค่า JSON ควรจะยังคงใช้งานได้ต่อไปโดยไม่มีการเปลี่ยนแปลง
การตรวจสอบใหม่
Lighthouse 10 มาพร้อมการตรวจสอบประสิทธิภาพแบบใหม่และการเปลี่ยนแปลงครั้งใหญ่
Back-Forward Cache
Back-Forward Cache (bfcache) เป็นหนึ่งในเครื่องมือที่มีประสิทธิภาพมากที่สุดที่ใช้ในการปรับปรุงประสิทธิภาพของหน้าเว็บสำหรับผู้ใช้จริง นอกจากแคชของเบราว์เซอร์ตามปกติแล้ว หน้าที่โหลดจาก bfcache จะคืนค่าการออกแบบหน้าเว็บและสถานะการดำเนินการแทบจะในทันที ซึ่งส่วนใหญ่จะเป็นการข้ามกิจกรรมการโหลดหน้าเว็บทั้งหมด และแสดงหน้าเว็บของคุณให้ผู้ใช้ของคุณเห็นโดยทันทีขณะที่ไปยังหน้าต่างๆ ย้อนหลังหรือไปข้างหน้า
อย่างไรก็ตาม มีสองสามวิธีที่หน้าเว็บสามารถป้องกันไม่ให้เบราว์เซอร์คืนค่าหน้าเว็บจาก bfcache การตรวจสอบ Lighthouse ใหม่นี้จริงๆ แล้วจะออกจากหน้าทดสอบแล้วกลับมาอีกครั้งเพื่อทดสอบว่าสามารถ bfcache ได้จริงหรือไม่ พร้อมแสดงเหตุผลที่ไม่สำเร็จ
ดูข้อมูลเพิ่มเติมในเอกสารของการตรวจสอบ bfcache
อินพุตที่ป้องกันการวาง
เราได้ขยายการให้บริการการตรวจสอบแนวทางปฏิบัติแนะนำแบบเดิม "อนุญาตให้ผู้ใช้วางลงในช่องรหัสผ่าน" แล้วในตอนนี้ เพื่อให้การวางลงในช่องป้อนข้อมูล (ไม่ใช่แบบอ่านอย่างเดียว) ใช้งานได้ สำหรับเว็บไซต์ส่วนใหญ่ การป้องกันการวางจะทำให้ประสบการณ์ของผู้ใช้ติดลบและป้องกันเวิร์กโฟลว์ด้านความปลอดภัยและการช่วยเหลือพิเศษที่ถูกต้องตามกฎหมาย
การตรวจสอบใหม่คือ "อนุญาตให้ผู้ใช้วางลงในช่องป้อนข้อมูล" (paste-preventing-inputs)
ผู้ใช้โหนด
หากใช้ Lighthouse เป็นไลบรารีโหนด คุณอาจต้องพิจารณาการเปลี่ยนแปลงที่ส่งผลกับส่วนอื่นในระบบ 2-3 รายการในรุ่นนี้ โปรดดูรายละเอียดทั้งหมดใน บันทึกการเปลี่ยนแปลง 10.0
Lighthouse 10 มาพร้อมกับการประกาศประเภท TypeScript ที่สมบูรณ์ด้วย ตอนนี้ทุกสิ่งที่นําเข้าจาก lighthouse ควรพิมพ์แล้ว ซึ่งจะเป็นประโยชน์อย่างยิ่งหากคุณกําลังเขียนสคริปต์โฟลว์ของผู้ใช้ Lighthouse
โปรดลองใช้ประเภทและแจ้งให้เราทราบหากพบปัญหาในการใช้รายการดังกล่าว
ไฟสำหรับวิ่ง
Lighthouse พร้อมใช้งานในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome, npm (เป็นโมดูลโหนดและเครื่องมือ CLI) รวมถึงเป็นส่วนขยายเบราว์เซอร์ (ใน Chrome และ Firefox) และยังเป็นตัวขับเคลื่อนบริการต่างๆ ของ Google ซึ่งรวมถึง PageSpeed Insights ด้วย
หากต้องการลองใช้ Lighthouse Node CLI ให้ใช้คำสั่งต่อไปนี้
npm install -g lighthouse
lighthouse https://www.example.com --view
ติดต่อทีม Lighthouse
หากต้องการพูดคุยเกี่ยวกับฟีเจอร์ใหม่ การเปลี่ยนแปลงใน Lighthouse 10 หรือเวอร์ชันอื่นๆ ที่เกี่ยวข้องกับ Lighthouse ให้ทำดังนี้
- รายงานปัญหาหรือส่งความคิดเห็นในเครื่องมือติดตามปัญหาของ Lighthouse GitHub
- ถามคำถามในฟอรัมสนทนาของ Lighthouse GitHub
- ติดต่อทีม Lighthouse ใน Twitter @____lighthouse