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