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 จะทำเครื่องหมายช่วงเวลา แต่วิธีกำหนดทำให้มีการตอบสนองต่อคำขอเครือข่ายที่มีค่าผิดปกติและงานที่ใช้เวลานานเกินไป การแสดงผลเนื้อหาขนาดใหญ่ที่สุด (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
แคชย้อนหลัง (bfcache) เป็นหนึ่งในเครื่องมือที่มีประสิทธิภาพมากที่สุดสำหรับการปรับปรุงประสิทธิภาพของหน้าเว็บสำหรับผู้ใช้จริง นอกเหนือจากแคชของเบราว์เซอร์ตามปกติแล้ว หน้าเว็บที่โหลดจาก bfcache จะคืนค่าการจัดวางหน้าเว็บและสถานะการดำเนินการแทบจะในทันที ซึ่งโดยมากจะข้ามกิจกรรมการโหลดหน้าเว็บทั้งหมดและแสดงหน้าเว็บให้ผู้ใช้เห็นโดยทันทีขณะที่ผู้ใช้ไปยังหน้าต่างๆ ถอยหลังและไปข้างหน้าเพื่อดูประวัติ
อย่างไรก็ตาม มี 2-3 วิธีที่หน้าเว็บจะป้องกันไม่ให้เบราว์เซอร์คืนค่าหน้าเว็บจาก bfcache การตรวจสอบใหม่ของ Lighthouse นี้จะออกจากหน้าทดสอบแล้วกลับมาอีกครั้งเพื่อทดสอบว่าสามารถ bfcache ได้หรือไม่ รวมถึงระบุเหตุผลที่ดำเนินการไม่สำเร็จ
ดูข้อมูลเพิ่มเติมได้ในเอกสารของการตรวจสอบ bfcache
การป้องกันการวางอินพุต
การตรวจสอบแนวทางปฏิบัติที่ดีที่สุดแบบเก่า "อนุญาตให้ผู้ใช้วางในช่องรหัสผ่าน" ขยายมาให้ตรวจสอบแล้วว่าการวางลงในช่องป้อนข้อมูล (ไม่ใช่อ่านอย่างเดียว) จะทำงานหรือไม่ สำหรับเว็บไซต์ส่วนใหญ่ การป้องกันการวางเป็นประสบการณ์ของผู้ใช้ที่ไม่ดีนักและป้องกันเวิร์กโฟลว์การช่วยเหลือพิเศษและความปลอดภัยที่ถูกต้องตามกฎหมาย
การตรวจสอบใหม่เปลี่ยนเป็น "อนุญาตให้ผู้ใช้วางในช่องป้อนข้อมูล" (paste-preventing-inputs)
ผู้ใช้โหนด
หากใช้ Lighthouse เป็นไลบรารีโหนด มีการเปลี่ยนแปลงที่ส่งผลกับส่วนอื่นในระบบแบบเป็นโปรแกรม 2-3 รายการในรุ่นนี้ซึ่งคุณอาจต้องตรวจสอบด้วย ดูรายละเอียดทั้งหมดได้ที่บันทึกการเปลี่ยนแปลง 10.0
Lighthouse 10 จัดส่งพร้อมการประกาศประเภท TypeScript เต็มรูปแบบด้วย ตอนนี้คุณควรพิมพ์ทุกอย่างที่นำเข้าจาก lighthouse ซึ่งจะเป็นประโยชน์อย่างยิ่งหากคุณเขียนสคริปต์การไหลเวียนของผู้ใช้ Lighthouse
โปรดลองใช้ประเภทประเภทต่างๆ และแจ้งให้เราทราบหากพบปัญหาการใช้งาน
ประภาคารสำหรับวิ่ง
Lighthouse พร้อมใช้งานใน Chrome DevTools, 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