Sau khi xác định ngân sách hiệu suất, đã đến lúc thiết lập quy trình xây dựng để theo dõi ngân sách. Có một số công cụ cho phép bạn xác định ngưỡng cho các chỉ số hiệu suất đã chọn và cảnh báo nếu bạn vượt quá ngân sách. Tìm hiểu cách chọn một chế độ phù hợp nhất với nhu cầu và chế độ thiết lập hiện tại của bạn. 🕵️ ♀️
Ngân sách hiệu suất cho Lighthouse
Lighthouse là một công cụ kiểm tra để kiểm tra các trang web ở một số khía cạnh chính – hiệu suất, khả năng tiếp cận, các phương pháp hay nhất và mức độ hiệu quả của trang web dưới dạng một ứng dụng web tiến bộ.
Phiên bản dòng lệnh của Lighthouse (v5 trở lên) hỗ trợ việc đặt ngân sách hiệu suất dựa trên:
- kích thước tài nguyên
- số lượng tài nguyên
Bạn có thể đặt ngân sách cho bất kỳ loại tài nguyên nào sau đây:
documentfontimagemediaotherscriptstylesheetthird-partytotal
Ngân sách được đặt trong tệp JSON và sau khi xác định ngân sách, cột "Vượt quá ngân sách" mới sẽ cho bạn biết liệu bạn có đang vượt quá bất kỳ hạn mức nào hay không.
Gợi ý về hiệu suất của gói web
Webpack là một công cụ xây dựng mạnh mẽ giúp tối ưu hóa cách phân phối mã của bạn cho người dùng. Hộp cát về quyền riêng tư cũng hỗ trợ đặt ngân sách hiệu suất dựa trên quy mô thành phần.
Bật gợi ý về hiệu suất trong webpack.config.js để nhận cảnh báo dòng lệnh hoặc lỗi khi kích thước gói của bạn vượt quá giới hạn. Đây là một cách hiệu quả để lưu ý đến kích thước thành phần trong suốt quá trình phát triển.
Sau bước xây dựng, gói web sẽ xuất ra danh sách các thành phần được mã hoá bằng màu và kích thước của các thành phần đó. Những phần vượt quá ngân sách sẽ được đánh dấu bằng màu vàng.
Giới hạn mặc định cho cả thành phần và điểm truy cập là 250 KB. Bạn có thể thiết lập các mục tiêu của riêng mình trong tệp cấu hình.
Ngân sách được so sánh với kích thước thành phần không nén. Kích thước JavaScript không nén có liên quan đến thời gian thực thi và các tệp lớn có thể mất nhiều thời gian để thực thi, đặc biệt là trên thiết bị di động.
Kích thước theo gói
Bundlesize là gói npm đơn giản giúp kiểm tra kích thước thành phần theo ngưỡng mà bạn đã đặt. Công cụ này có thể chạy trên máy và tích hợp với CI.
CLI theo Bundlesize
Chạy bundlesize CLI bằng cách chỉ định ngưỡng và tệp mà bạn muốn thử nghiệm.
bundlesize -f "dist/bundle.js" -s 170kB
Bundlesize sẽ xuất ra kết quả kiểm thử được mã hoá màu trong một dòng.
Bundlesize cho CI
Bạn sẽ khai thác tối đa giá trị của gói kích thước nếu tích hợp gói đó với CI để tự động thực thi giới hạn kích thước đối với các yêu cầu lấy dữ liệu. Nếu quá trình kiểm thử kích thước gói không thành công, thì yêu cầu lấy dữ liệu đó sẽ không được hợp nhất. Công cụ này hoạt động với các yêu cầu kéo (pull request) trên GitHub bằng Travis CI, CircleCI, Wercker và Drone.
Hôm nay, bạn có thể đang có một ứng dụng nhanh, nhưng việc thêm mã mới thường có thể thay đổi điều này. Việc kiểm tra yêu cầu lấy dữ liệu có kích thước theo gói sẽ giúp bạn tránh được tình trạng hồi quy hiệu suất. Tự thân khởi nghiệp, Tinder, Trivago và nhiều người khác sử dụng nền tảng này để kiểm soát ngân sách của họ.
Với kích thước gói, bạn có thể đặt ngưỡng riêng cho từng tệp. Điều này đặc biệt hữu ích nếu bạn chia tách một gói trong ứng dụng của mình.
Theo mặc định, công cụ này sẽ kiểm tra kích thước thành phần đã nén. Bạn có thể sử dụng lựa chọn nén để chuyển sang chế độ nén ảnh brotli hoặc tắt hoàn toàn.
Bot Lighthouse
Lighthouse Bot tích hợp với Travis CI và thực thi ngân sách dựa trên bất kỳ danh mục kiểm tra nào trong số 5 danh mục kiểm tra Lighthouse. Ví dụ: ngân sách là 100 cho điểm hiệu suất của Lighthouse. Đôi khi, việc theo dõi một số liệu đơn giản hơn so với ngân sách từng thành phần riêng lẻ và điểm Lighthouse xem xét nhiều yếu tố.
Lighthouse Bot sẽ chạy quy trình kiểm tra sau khi bạn triển khai trang web cho máy chủ thử nghiệm. Trong .travis.yml, hãy đặt ngân sách cho các danh mục Lighthouse cụ thể bằng các tuỳ chọn --perf, --a11y, --bp, --seo hoặc --pwa. Cố gắng duy trì vùng màu xanh lục với điểm số ít nhất là 90.
after_success: - ./deploy.sh # Deploy the PR changes to staging server - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test
Nếu điểm của một yêu cầu kéo trên GitHub giảm xuống dưới ngưỡng bạn đã thiết lập, thì Lighthouse Bot có thể ngăn việc hợp nhất yêu cầu kéo. ⛔
Lighthouse Bot sau đó sẽ nhận xét về yêu cầu lấy dữ liệu của bạn với điểm số mới cập nhật. Đây là một tính năng hiệu quả giúp khuyến khích mọi người thảo luận về hiệu suất khi hệ thống thay đổi mã.
Nếu bạn thấy yêu cầu lấy dữ liệu của mình bị chặn do điểm Lighthouse thấp, hãy chạy quy trình kiểm tra bằng Lighthouse CLI hoặc trong Công cụ cho nhà phát triển. Tính năng này tạo một báo cáo chứa thông tin chi tiết về điểm tắc nghẽn và các gợi ý để tối ưu hoá một cách đơn giản.
Tóm tắt
| Công cụ | CLI | CI | Tóm tắt |
|---|---|---|---|
| Ngọn hải đăng | ✔️ | ❌ |
|
| gói web | ✔️ | ❌ |
|
| kích thước gói | ✔️ | ✔️ |
|
| Bot Lighthouse | ❌ | ✔️ |
|