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