ใช้ Lighthouse เพื่อเพิ่มประสิทธิภาพงบประมาณ

Katie Hempenius
Katie Hempenius

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 มิลลิวินาทีสำหรับ First Meaningful Paint
  • งบประมาณ 125 KB สำหรับ JavaScript ทั้งหมดในหน้าเว็บ
  • งบประมาณ 300 KB สำหรับขนาดโดยรวมของหน้าเว็บ
  • งบประมาณ 10 คำขอสำหรับจำนวนคำขอที่ส่งไปยังต้นทางของบุคคลที่สาม

ดูรายการเมตริกประสิทธิภาพและประเภททรัพยากรที่รองรับทั้งหมดได้ที่ส่วนงบประมาณด้านประสิทธิภาพของเอกสาร Lighthouse

เรียกใช้ Lighthouse

เรียกใช้ Lighthouse โดยใช้แฟล็ก --budget-path ธงนี้จะบอกให้ Lighthouse ทราบถึงตำแหน่งของไฟล์งบประมาณ

lighthouse https://example.com --budget-path=./budget.json

ดูผลลัพธ์

หากกำหนดค่า LightWallet อย่างถูกต้อง รายงาน Lighthouse จะมีส่วนงบประมาณในหมวดหมู่ประสิทธิภาพ

'งบประมาณ' ส่วนของรายงาน Lighthouse

รายงาน Lighthouse เวอร์ชัน JSON จะดูผลลัพธ์ของ Lightwallet ได้ในผลการสืบค้นสำหรับการตรวจสอบ performance-budget