การอัปเดต Lighthouse 2.6

Brendan Kenny

Kayce Basques

Lighthouse 2.6 พร้อมให้ใช้งานแล้ว ไฮไลต์มีดังนี้

• การตรวจสอบประสิทธิภาพแบบใหม่
• การปรับปรุงคะแนนของส่วนการช่วยเหลือพิเศษ
• การปรับปรุง UX ของรายงาน
• การแก้ไขข้อบกพร่องในการตรวจสอบสัดส่วนภาพ

ดูรายการฟีเจอร์ใหม่ การเปลี่ยนแปลง และการแก้ไขข้อบกพร่องทั้งหมดได้ในบันทึกประจำรุ่น 2.6

วิธีอัปเดตเป็น 2.6

• NPM เรียกใช้ npm update lighthouse เรียกใช้ Flag npm update lighthouse -g หากคุณติดตั้ง Lighthouse ทั่วโลก
• ส่วนขยาย Chrome ส่วนขยายควรอัปเดตโดยอัตโนมัติ แต่คุณอัปเดตด้วยตนเองได้ผ่าน chrome://extensions
• เครื่องมือสำหรับนักพัฒนาเว็บ แผงการตรวจสอบจะมาพร้อมกับ 2.6 ใน Chrome 65 คุณตรวจสอบเวอร์ชัน Chrome ที่ใช้อยู่ได้ผ่าน chrome://version Chrome จะอัปเดตเป็นเวอร์ชันใหม่ทุกๆ 6 สัปดาห์โดยประมาณ คุณเรียกใช้โค้ด Chrome เวอร์ชันล่าสุดได้โดยดาวน์โหลด Chrome Canary

การตรวจสอบประสิทธิภาพแบบใหม่

เวลาเริ่มต้น JavaScript สูง

ดูรายละเอียดเวลาที่หน้าเว็บใช้ในการแยกวิเคราะห์ คอมไพล์ และเรียกใช้สคริปต์แต่ละรายการ เวลาที่ใช้ในการเริ่มต้น JavaScript เป็นปัจจัยที่ไม่ค่อยเห็นแต่สำคัญต่อเวลาในการโหลดหน้าเว็บ

รูปที่ 1 การตรวจสอบเวลาในการเริ่มต้น JavaScript สูง

ใช้นโยบายแคชที่ไม่มีประสิทธิภาพกับเนื้อหาแบบคงที่

ตรวจสอบว่าเบราว์เซอร์แคชทรัพยากรแต่ละรายการอย่างถูกต้อง

รูปที่ 2 การตรวจสอบใช้นโยบายแคชที่ไม่มีประสิทธิภาพในเนื้อหาแบบคงที่

หลีกเลี่ยงการเปลี่ยนเส้นทางหน้าเว็บ

การเปลี่ยนเส้นทางหน้าเว็บจะเพิ่มการไปกลับของเครือข่ายอีก 1 หรือ 2 ครั้ง หากต้องมีการค้นหา DNS เพิ่มเติม ลดการเปลี่ยนเส้นทางให้เหลือน้อยที่สุดเพื่อเพิ่มความเร็วในการโหลดหน้าเว็บ

รูปที่ 3 การตรวจสอบหลีกเลี่ยงการเปลี่ยนเส้นทางหน้าเว็บ

การปรับคะแนนของส่วนการช่วยเหลือพิเศษ

ใน Lighthouse 2.6 ระบบจะคํานวณคะแนนการช่วยเหลือพิเศษแบบรวมกันต่างจากเดิม คะแนนจะพิจารณาจากการตรวจสอบการช่วยเหลือพิเศษแต่ละรายการตามความรุนแรงของผลกระทบต่อประสบการณ์ของผู้ใช้ รวมถึงความถี่ของปัญหา โดยอิงตามชุดข้อมูล HTTP Archive ดูการสนทนาเชิงลึกได้ที่ googlechrome/lighthouse/issues/3444

รายงานการปรับปรุง UX

หมายเหตุ: การอัปเดตเหล่านี้มีอยู่ใน Lighthouse เวอร์ชันส่วนขยาย Chrome เท่านั้น รายการดังกล่าวยังไม่อยู่ในแผงการตรวจสอบของเครื่องมือสำหรับนักพัฒนาเว็บ

ข้อผิดพลาดระดับบนสุด

ที่ด้านบนของรายงาน Lighthouse จะแจ้งเตือนคุณเกี่ยวกับข้อผิดพลาดที่อาจส่งผลต่อคะแนนของหน้า

รูปที่ 4 ข้อผิดพลาดระดับบนสุดที่ด้านบนของรายงาน

พิมพ์มุมมองสรุปและมุมมองแบบขยาย

คลิกส่งออกรายงาน แล้วเลือกพิมพ์สรุปหรือพิมพ์แบบขยายเพื่อพิมพ์รายงานเวอร์ชันสรุปหรือแบบละเอียด

รูปที่ 5 พิมพ์สรุปและมุมมองแบบขยาย

การแก้ไขข้อบกพร่องเกี่ยวกับสัดส่วนภาพ

2.6 ยังแก้ไขข้อบกพร่องที่ทำให้การตรวจสอบแสดงรูปภาพที่มีสัดส่วนถูกต้องไม่ผ่านแม้ว่าจะไม่มีรูปภาพในหน้าเว็บหรือรูปภาพทั้งหมดมีการปรับขนาดอย่างเหมาะสมแล้วก็ตาม