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

Brendan Kenny

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 คะแนน

มาตรวัดคะแนน Lighthouse ซึ่งแจกแจงตามเมตริก (FCP, SI, LCP, TBT และ CLS) ที่ประกอบกันเป็นคะแนนรวม

หากยังคงต้องใช้ค่า TTI ของ Lighthouse ด้วยเหตุผลบางประการ (เช่น ในการยืนยัน CI) ค่าดังกล่าวจะยังคงอยู่ในเอาต์พุต JSON ของ Lighthouse โดยไม่มีการเปลี่ยนแปลง เพียงแต่จะมีน้ำหนักคะแนนเป็น 0 และซ่อนอยู่ในรายงาน HTML การเข้าถึงค่า JSON ที่ใช้สคริปต์จะยังคงทำงานต่อไปโดยไม่มีการเปลี่ยนแปลง

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

Lighthouse 10 มาพร้อมการตรวจสอบประสิทธิภาพแบบใหม่และการเปลี่ยนแปลงที่สําคัญในอีกรายการหนึ่ง

แคชย้อนหลัง

Back-Forward Cache (bfcache) เป็นหนึ่งในเครื่องมือที่มีประสิทธิภาพมากที่สุดในการปรับปรุงประสิทธิภาพของหน้าเว็บสําหรับผู้ใช้จริง นอกจากแคชเบราว์เซอร์ปกติแล้ว หน้าเว็บที่โหลดจาก bfcache จะกู้คืนเลย์เอาต์หน้าเว็บและสถานะการดําเนินการเกือบจะทันที ซึ่งจะข้ามกิจกรรมการโหลดหน้าเว็บทั้งหมดส่วนใหญ่และแสดงหน้าเว็บต่อผู้ใช้ทันทีเมื่อผู้ใช้ไปยังหน้าก่อนหน้าหรือหน้าถัดไปผ่านประวัติการท่องเว็บ

อย่างไรก็ตาม หน้าเว็บสามารถป้องกันไม่ให้เบราว์เซอร์กู้คืนหน้าเว็บจาก bfcache ได้หลายวิธี การตรวจสอบ Lighthouse ใหม่นี้จะออกจากหน้าทดสอบแล้วกลับมาอีกครั้งเพื่อทดสอบว่าหน้าเว็บใช้ bfcache ได้หรือไม่ และจะแสดงเหตุผลหากไม่ผ่าน

ตัวอย่างผลการตรวจสอบ bfcache ซึ่งแสดงรายการข้อผิดพลาดเนื่องจากการเชื่อมต่อ IndexDB ที่เปิดอยู่และตัวแฮนเดิลการยกเลิกการโหลดในหน้า

ดูข้อมูลเพิ่มเติมได้ในเอกสารของการตรวจสอบ bfcache

อินพุตที่ป้องกันการวาง

การตรวจสอบแนวทางปฏิบัติแนะนำเดิม "อนุญาตให้ผู้ใช้วางรหัสผ่านในช่องได้" ได้รับการขยายการให้บริการเพื่อตรวจสอบว่าการวางข้อมูลในช่องป้อนข้อมูล (ที่ไม่ใช่แบบอ่านอย่างเดียว) ใดๆ จะใช้งานได้ สำหรับเว็บไซต์ส่วนใหญ่ การป้องกันการวางจะทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานเชิงลบโดยรวมและขัดขวางเวิร์กโฟลว์ด้านความปลอดภัยและการช่วยเหลือพิเศษที่ถูกต้อง

การตรวจสอบใหม่คือ"อนุญาตให้ผู้ใช้วางข้อมูลในช่องได้" (paste-preventing-inputs)

ผู้ใช้โหนด

หากคุณใช้ Lighthouse เป็นไลบรารี Node คุณอาจต้องคำนึงถึงการเปลี่ยนแปลงที่ทำให้เกิดข้อขัดข้องแบบเป็นโปรแกรม 2-3 รายการในรุ่นนี้ ดูรายละเอียดทั้งหมดได้ในบันทึกการเปลี่ยนแปลงของ 10.0

นอกจากนี้ Lighthouse 10 ยังมาพร้อมกับการประกาศประเภท TypeScript แบบเต็มอีกด้วย ตอนนี้คุณควรพิมพ์ข้อมูลทั้งหมดที่นำเข้าจาก lighthouse ซึ่งจะมีประโยชน์อย่างยิ่งหากคุณเขียนสคริปต์เส้นทางของผู้ใช้ Lighthouse

สคริปต์ Node ที่นําเข้า Lighthouse เป็นฟังก์ชัน ซึ่งแสดงให้เห็นว่าตอนนี้ TypeScript ตรวจสอบประเภทออบเจ็กต์ options ที่ส่งไปยังฟังก์ชันแล้ว

ลองใช้ประเภทต่างๆ แล้วแจ้งให้เราทราบหากพบปัญหา

ใช้งาน 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