Lighthouse hiện hỗ trợ ngân sách hiệu suất. Bạn có thể thiết lập tính năng này (được gọi là LightWallet) trong vòng chưa đầy 5 phút và đưa ra ý kiến phản hồi về các chỉ số hiệu suất cũng như quy mô và số lượng tài nguyên trang.
Cài đặt Lighthouse
LightWallet có trong phiên bản dòng lệnh của Lighthouse v5+.
Để 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 ví dụ này đặt 5 ngân sách riêng biệt:
- Ngân sách là 3000 mili giây cho Thời gian tương tác.
- Ngân sách là 1000 mili giây cho Nội dung hiển thị có ý nghĩa đầu tiên
- Ngân sách là 125 KB cho tổng số lượng JavaScript trên trang.
- Ngân sách là 300 KB cho kích thước tổng thể của trang.
- Ngân sách là 10 yêu cầu cho số lượng yêu cầu được gửi đến các nguồn gốc của bên thứ ba.
Để biết danh sách đầy đủ các chỉ số hiệu suất và các 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 các 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í tệp ngân sách của bạn.
lighthouse https://example.com --budget-path=./budget.json
Xem kết quả
Nếu LightWallet được định cấu hình chính xác, báo cáo Lighthouse sẽ chứa phần 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 quá trình kiểm tra performance-budget.