Lighthouse เป็นเครื่องมืออัตโนมัติแบบโอเพนซอร์สสำหรับการปรับปรุงคุณภาพของเว็บแอป คุณสามารถติดตั้งเป็นส่วนขยาย Chrome หรือเรียกใช้เป็นเครื่องมือบรรทัดคำสั่ง Node เมื่อคุณระบุ URL ให้กับ Lighthouse เครื่องมือจะทำการทดสอบหน้าเว็บหลายรายการ จากนั้นจะสร้างรายงานที่อธิบายประสิทธิภาพของหน้าเว็บและระบุจุดที่ควรปรับปรุง
วันนี้เรายินดีที่จะประกาศรุ่น 1.5 ของ Lighthouse ซึ่งเป็นรุ่นที่เปลี่ยนแปลงไปอย่างมาก โดยมี PR กว่า 128 รายการ Lighthouse 1.5 มีฟีเจอร์ใหม่ที่สำคัญๆ มากมาย การตรวจสอบ และการแก้ไขข้อบกพร่องตามปกติ คุณสามารถติดตั้งจาก npm (npm i -g lighthouse) หรือดาวน์โหลดส่วนขยายจาก Chrome เว็บสโตร์
การตรวจสอบใหม่
การตรวจสอบการใช้งาน CSS จะรายงานจํานวนกฎสไตล์ที่ไม่ได้ใช้ในหน้าเว็บและค่าใช้จ่าย/เวลาที่ประหยัดไปได้จากการนํากฎเหล่านั้นออก
การตรวจสอบรูปภาพที่เพิ่มประสิทธิภาพแล้วจะรายงานรูปภาพที่ไม่ได้เพิ่มประสิทธิภาพและค่า/เวลาที่ประหยัดได้จากการเพิ่มประสิทธิภาพรูปภาพ
การตรวจสอบรูปภาพที่ปรับเปลี่ยนขนาดได้จะรายงานรูปภาพที่มีขนาดใหญ่เกินไปและค่าประมาณการประหยัดต้นทุน/เวลาในการปรับขนาดรูปภาพให้เหมาะกับอุปกรณ์หนึ่งๆ
การตรวจสอบการเลิกใช้งานและการแทรกแซงจะแสดงคำเตือนคอนโซลจาก Chrome หากหน้าเว็บของคุณใช้ API หรือฟีเจอร์ที่เลิกใช้งานแล้วซึ่งมีการแทรกแซง
รายงานการเปลี่ยนแปลง
ดังที่คุณเห็น เราได้มุ่งเน้นที่การทำให้รายงานดูไม่รกโดยการเพิ่มข้อมูลตาราง ซ่อนข้อความความช่วยเหลือที่ไม่จำเป็น และเพิ่มฟีเจอร์ใหม่ๆ เพื่อไปยังส่วนต่างๆ ของข้อมูลได้ง่ายขึ้น
การตั้งค่าการจําลอง
คุณอาจลืมการตั้งค่าการจำกัดและการจําลองที่ใช้สําหรับการเรียกใช้ Lighthouse ครั้งหนึ่งๆ ตอนนี้รายงาน Lighthouse มีการตั้งค่าการจําลองรันไทม์ที่ใช้สร้างรายงานแล้ว ซึ่งเป็นคําขอฟีเจอร์มาอย่างยาวนาน
ข้อมูลการติดตามที่เป็นประโยชน์มากขึ้น
ระบบจะจำลองเมตริก Lighthouse เช่น "First meaningful paint" "Time to Interactive" ฯลฯ เป็นการวัดเวลาของผู้ใช้ และแทรกกลับเข้าไปในข้อมูลการติดตามที่บันทึกไว้ด้วย Flag --save-assets
หากใช้ Flag --save-assets ตอนนี้คุณสามารถวางการติดตามลงในเครื่องมือสําหรับนักพัฒนาเว็บหรือเปิดในเครื่องมือดูไทม์ไลน์ของเครื่องมือสําหรับนักพัฒนาเว็บ
คุณจะดูเมตริกหลักในบริบทที่มีการติดตามการโหลดหน้าเว็บอย่างเต็มรูปแบบได้
Lighthouse Viewer
ในรายงาน HTML คุณจะเห็นปุ่มใหม่ที่มีตัวเลือกสําหรับส่งออกรายงานในรูปแบบต่างๆ ตัวเลือกหนึ่งคือ "เปิดในโปรแกรมดู" การคลิกปุ่มนี้จะส่งรายงานไปยังโปรแกรมดูออนไลน์ ซึ่งคุณสามารถแชร์รายงานกับผู้ใช้ GitHub เพิ่มเติมได้
เบื้องหลัง ผู้ดูจะได้รับสิทธิ์จากคุณผ่าน OAuth เพื่อสร้าง GitHubGist ลับและบันทึกรายงานไว้ในที่เก็บดังกล่าว เนื่องจากเป็นสรุปของคุณ คุณจึงควบคุมการแชร์รายงานได้อย่างเต็มที่และลบรายงานได้ทุกเมื่อ คุณสามารถเพิกถอนสิทธิ์ของผู้ดูในการสร้าง gist ได้ในการตั้งค่า GitHub
การทดสอบประสิทธิภาพ
โปรเจ็กต์การทดสอบประสิทธิภาพเวอร์ชันแรกพร้อมให้ใช้งานใน 1.5.0 แล้ว ซึ่งช่วยให้คุณทดสอบประสิทธิภาพการโหลดหน้าเว็บได้ โดยทดสอบผลของการบล็อกหรือการเลื่อนเวลาของชิ้นงานในเส้นทางที่สำคัญแบบอินเทอร์แอกทีฟระหว่างการพัฒนา
เมื่อเรียกใช้ Lighthouse ด้วย Flag --interactive ระบบจะสร้างรายงานพิเศษที่ช่วยให้สามารถเลือกทรัพยากรหน้าเว็บที่มีต้นทุนสูงแบบอินเทอร์แอกทีฟได้ จากนั้นเซิร์ฟเวอร์ทดสอบจะเรียกใช้ Lighthouse อีกครั้งในหน้านั้นโดยบล็อกทรัพยากรเหล่านั้น
ดูข้อมูลเพิ่มเติมเกี่ยวกับเวอร์ชันทดลองประสิทธิภาพใน Lighthouse
เอกสารประกอบใหม่
สุดท้ายนี้ เราได้ปรับปรุงเอกสารประกอบที่ developers.google.com/web/tools/lighthouse/ ให้ทันสมัยขึ้นและเพิ่มข้อมูลอ้างอิงใหม่สำหรับการตรวจสอบ
เท่านี้ก่อน
ดูรายละเอียดทั้งหมดเกี่ยวกับ Lighthouse เวอร์ชันล่าสุดได้ที่บันทึกประจำรุ่นฉบับเต็มใน GitHub และเช่นเคย คุณสามารถติดต่อเราเพื่อรายงานข้อบกพร่อง ยื่นคำขอฟีเจอร์ หรือพูดคุยเรื่องไอเดียเกี่ยวกับสิ่งที่คุณต้องการเห็นในลำดับถัดไป