Sử dụng Lighthouse cho ngân sách hiệu suất

Katie Hempenius

Lighthouse hiện hỗ trợ ngân sách hiệu suất. Tính năng này (gọi là LightWallet) có thể được thiết lập trong chưa đầy 5 phút và cung cấp ý kiến phản hồi về các chỉ số hiệu suất cũng như kích thước và số lượng tài nguyên trang.

Điểm mấu chốt: Mặc dù Lighthouse là một công cụ tuyệt vời để xác định các cơ hội cải thiện hiệu suất, nhưng không thể nhấn mạnh rằng Lighthouse là một công cụ dựa trên dữ liệu phòng thí nghiệm. Mặc dù dữ liệu trong phòng thí nghiệm là một phần không thể thiếu trong mọi nỗ lực cải thiện hiệu suất, nhưng việc so sánh và đối chiếu dữ liệu đó với dữ liệu thực địa thu thập được từ người dùng thực tế của trang web là yếu tố then chốt. Việc này sẽ giúp bạn hiểu được những thay đổi mà bạn thực hiện đối với trang web ảnh hưởng như thế nào đến người dùng thực tế.

Cài đặt Lighthouse

LightWallet có trong phiên bản dòng lệnh của Lighthouse phiên bản 5 trở lên.

Để bắt đầu, hãy cài đặt Lighthouse:

npm install -g lighthouse

Tạo ngân sách

Tạo một tệp có tên budget.json. Trong tệp này, hãy thêm JSON sau:

[
  {
    "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
      }
    ]
  }
]

Tệp budget.json mẫu này đặt 5 ngân sách riêng biệt:

• Ngân sách 3.000 mili giây cho Thời gian tương tác.
• Ngân sách 125 KB cho tổng lượng JavaScript trên trang.
• Ngân sách 300 KB cho tổng kích thước của trang.
• Hạn mức 10 yêu cầu cho số lượng yêu cầu được gửi đến các nguồn gốc bên thứ ba.

Để xem danh sách đầy đủ các chỉ số hiệu suất và loại tài nguyên được hỗ trợ, hãy tham khảo phần Ngân sách hiệu suất trong tài liệu về Lighthouse.

Chạy Lighthouse

Chạy Lighthouse bằng cờ --budget-path. Cờ này cho Lighthouse biết vị trí của tệp ngân sách.

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

Lưu ý: Lưu ý: Bạn không cần đặt tên cho tệp ngân sách là budget.json.

Xem kết quả

Nếu LightWallet được định cấu hình chính xác, thì báo cáo Lighthouse sẽ chứa mục Ngân sách trong danh mục Hiệu suất.

Trong phiên bản JSON của báo cáo Lighthouse, bạn có thể tìm thấy kết quả của Lightwallet trong kết quả kiểm tra cho quy trình kiểm tra performance-budget.