Lighthouse là một công cụ tự động, mã nguồn mở giúp cải thiện chất lượng của ứng dụng web. Bạn có thể cài đặt công cụ này dưới dạng Tiện ích Chrome hoặc chạy công cụ này dưới dạng công cụ dòng lệnh Node. Khi bạn cung cấp URL cho Lighthouse, công cụ này sẽ chạy một loạt các bài kiểm thử trên trang, sau đó tạo một báo cáo giải thích hiệu suất của trang và cho biết những khía cạnh cần cải thiện.
Hôm nay, chúng tôi rất vui mừng được thông báo về bản phát hành 1.5 của Lighthouse. Đây là một bản phát hành lớn, với hơn 128 yêu cầu phát hành. Lighthouse 1.5 bao gồm một loạt các tính năng mới, quy trình kiểm tra và bản sửa lỗi thông thường. Bạn có thể cài đặt
tiện ích này từ npm (npm i -g lighthouse) hoặc
tải tiện ích xuống
từ Cửa hàng Chrome trực tuyến.
Kiểm tra mới
Tính năng Kiểm tra mức sử dụng CSS báo cáo số lượng quy tắc kiểu không dùng đến trong trang của bạn và mức tiết kiệm chi phí/thời gian khi xoá các quy tắc đó:
Tính năng Kiểm tra hình ảnh được tối ưu hoá sẽ báo cáo những hình ảnh chưa được tối ưu hoá và chi phí/thời gian tiết kiệm được khi tối ưu hoá những hình ảnh đó:
Tính năng Kiểm tra hình ảnh thích ứng sẽ báo cáo những hình ảnh quá lớn và mức tiết kiệm chi phí/thời gian tiềm năng khi định cỡ hình ảnh chính xác cho một thiết bị nhất định:
Kiểm tra các tính năng không dùng nữa và can thiệp liệt kê các cảnh báo của bảng điều khiển từ Chrome nếu trang của bạn đang sử dụng các API hoặc tính năng không dùng nữa có can thiệp:
Báo cáo thay đổi
Như bạn đã thấy, chúng tôi đã tập trung vào việc làm cho báo cáo trở nên ít lộn xộn hơn bằng cách thêm dữ liệu dạng bảng, ẩn văn bản trợ giúp không cần thiết và thêm các tính năng mới để giúp bạn dễ dàng di chuyển trong dữ liệu.
Chế độ cài đặt mô phỏng
Bạn có thể dễ dàng quên mất chế độ cài đặt điều tiết và mô phỏng đã được sử dụng cho một lần chạy Lighthouse cụ thể. Báo cáo Lighthouse hiện bao gồm cả chế độ cài đặt mô phỏng thời gian chạy dùng để tạo báo cáo; đây là một yêu cầu tính năng đã được chờ đợi từ lâu:
Dữ liệu theo dõi hữu ích hơn
Các chỉ số Lighthouse như "Lần vẽ có ý nghĩa đầu tiên", "Thời gian phản hồi tương tác", v.v. được mô phỏng dưới dạng các biện pháp Thời gian của người dùng và được chèn lại vào dữ liệu theo dõi được lưu bằng cờ --save-assets.
Nếu sử dụng cờ --save-assets, giờ đây, bạn có thể thả dấu vết vào DevTools hoặc mở dấu vết đó trong Trình xem tiến trình DevTools.
Bạn sẽ có thể xem các chỉ số chính trong ngữ cảnh với dấu vết đầy đủ của quá trình tải trang.
Trình xem Lighthouse
Trong báo cáo HTML, bạn sẽ thấy một nút mới có các tuỳ chọn để xuất báo cáo ở nhiều định dạng. Một trong những lựa chọn đó là "Mở trong Trình xem". Khi nhấp vào nút này, báo cáo sẽ được gửi đến Trình xem trực tuyến. Tại đây, bạn có thể chia sẻ thêm báo cáo với người dùng GitHub.
Ở hậu trường, Trình xem sẽ được bạn cấp quyền thông qua OAuth để tạo một gist bí mật trên GitHub và lưu báo cáo vào đó. Vì báo cáo được tạo dưới dạng Gist, nên bạn có toàn quyền kiểm soát việc chia sẻ báo cáo và có thể xoá báo cáo bất cứ lúc nào. Bạn có thể thu hồi quyền tạo bản tóm tắt của Người xem trong phần cài đặt GitHub.
Thử nghiệm về hiệu suất
Phiên bản đầu tiên của dự án Thử nghiệm hiệu suất đã ra mắt trong phiên bản 1.5.0. Điều này cho phép bạn thử nghiệm hiệu suất tải trang, kiểm thử tương tác các hiệu ứng của việc chặn hoặc trì hoãn các thành phần trong đường dẫn quan trọng trong quá trình phát triển.
Khi Lighthouse chạy với cờ --interactive, một báo cáo đặc biệt sẽ được tạo cho phép lựa chọn tương tác các tài nguyên trang tốn kém. Sau đó, máy chủ thử nghiệm sẽ chạy lại Lighthouse trên trang đó với các tài nguyên đó bị chặn.
Tìm hiểu thêm về Thử nghiệm hiệu suất trong Lighthouse.
Tài liệu mới
Cuối cùng nhưng không kém phần quan trọng, chúng tôi đã hiện đại hoá tài liệu tại developers.google.com/web/tools/lighthouse/ và thêm các tài liệu tham khảo mới về quy trình kiểm tra.
Tạm thời đến đây là hết!
Để biết tất cả thông tin chi tiết về phiên bản mới nhất của Lighthouse, hãy xem ghi chú phát hành đầy đủ trên GitHub. Như thường lệ, hãy liên hệ với chúng tôi để báo cáo lỗi, gửi yêu cầu về tính năng hoặc trao đổi ý tưởng về những tính năng mà bạn muốn thấy tiếp theo.