ตอนนี้ Lighthouse รองรับงบประมาณด้านประสิทธิภาพแล้ว ฟีเจอร์นี้หรือที่เรียกว่า LightWallet สามารถตั้งค่าได้ภายใน 5 นาที และให้ความคิดเห็นเกี่ยวกับเมตริกประสิทธิภาพ รวมถึงขนาดและจำนวนทรัพยากรของหน้า
ติดตั้ง Lighthouse
LightWallet พร้อมใช้งานในเวอร์ชันบรรทัดคำสั่งของ Lighthouse v5+
ในการเริ่มต้นใช้งาน ให้ติดตั้ง Lighthouse โดยทำดังนี้
npm install -g lighthouse
สร้างงบประมาณ
สร้างไฟล์ชื่อ budget.json เพิ่ม JSON ต่อไปนี้ในไฟล์นี้
[
{
"path": "/*",
"timings": [
{
"metric": "interactive",
"budget": 3000
},
{
"metric": "first-meaningful-paint",
"budget": 1000
}
],
"resourceSizes": [
{
"resourceType": "script",
"budget": 125
},
{
"resourceType": "total",
"budget": 300
}
],
"resourceCounts": [
{
"resourceType": "third-party",
"budget": 10
}
]
}
]
ตัวอย่างไฟล์ budget.json นี้จะตั้งงบประมาณ 5 รายการแยกกัน ดังนี้
- งบประมาณ 3,000 มิลลิวินาทีสำหรับเวลาในการตอบสนอง
- งบประมาณ 1,000 มิลลิวินาทีสำหรับการแสดงผลที่มีความหมายครั้งแรก
- งบประมาณ 125 KB สำหรับจำนวน JavaScript ทั้งหมดในหน้าเว็บ
- งบประมาณ 300 KB สําหรับขนาดโดยรวมของหน้าเว็บ
- งบประมาณคำขอ 10 รายการสำหรับจำนวนคำขอที่ส่งไปยังต้นทางของบุคคลที่สาม
ดูรายการเมตริกประสิทธิภาพและประเภททรัพยากรทั้งหมดที่รองรับได้ที่ส่วนงบประมาณด้านประสิทธิภาพในเอกสารของ Lighthouse
เรียกใช้ Lighthouse
เรียกใช้ Lighthouse โดยใช้แฟล็ก --budget-path แฟล็กนี้จะบอก Lighthouse เกี่ยวกับตำแหน่งของไฟล์งบประมาณ
lighthouse https://example.com --budget-path=./budget.json
ดูผลลัพธ์
หากกำหนดค่า LightWallet ถูกต้องแล้ว รายงาน Lighthouse จะมีส่วนงบประมาณภายในหมวดหมู่ประสิทธิภาพ
ในรายงาน Lighthouse เวอร์ชัน JSON ผลลัพธ์ของ Lightwallet จะอยู่ในผลการสืบค้นของการตรวจสอบสำหรับการตรวจสอบ performance-budget