Nội dung cập nhật về Lighthouse tháng 1 năm 2017

Brendan Kenny
Brendan Kenny

Lighthouse là một công cụ nguồn mở, tự động giúp cải thiện chất lượng ứng dụng web của bạn. Bạn có thể cài đặt tiện ích này dưới dạng một Tiện ích của Chrome hoặc chạy dưới dạng công cụ dòng lệnh của Nút. Khi bạn cung cấp cho Lighthouse một URL, Lighthouse sẽ chạy một loạt các thử nghiệm trên trang rồi tạo một báo cáo giải thích hiệu quả hoạt động của trang và cho biết các điểm cần cải thiện.

Biểu trưng Lighthouse
Biểu trưng Lighthouse

Hôm nay, chúng tôi vui mừng thông báo bản phát hành 1.5 của Lighthouse, một bản phát hành lớn với hơn 128 PR. Lighthouse 1.5 bao gồm một loạt các tính năng quan trọng mới, quy trình kiểm tra và các 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.

Phiên kiểm tra mới

Công cụ Kiểm tra mức sử dụng CSS báo cáo số lượng quy tắc kiểu không được sử dụng trong trang của bạn và mức chi phí/thời gian tiết kiệm được khi xoá các quy tắc đó:

Kiểm tra việc sử dụng CSS

Tính năng Kiểm tra hình ảnh được tối ưu hoá báo cáo những hình ảnh chưa được tối ưu hoá và mức tiết kiệm chi phí/thời gian để tối ưu hoá những hình ảnh đó:

Hình ảnh được tối ưu hoá AudiT

Công cụ kiểm tra hình ảnh thích ứng báo cáo những hình ảnh quá lớn và khả năng tiết kiệm chi phí/thời gian có thể tiết kiệm được việc định kích thước chính xác cho thiết bị nhất định:

Hình ảnh được tối ưu hoá AudiT

Phần Kiểm tra việc ngừng sử dụng và can thiệp liệt kê các cảnh báo trên bảng điều khiển của 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:

Kiểm tra việc ngừng sử dụng và 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 bớt lộn xộn bằng cách thêm dữ liệu dạng bảng, ẩn văn bản trợ giúp không liên quan và thêm các tính năng mới để giúp việc điều hướng dữ liệu dễ dàng hơn.

Cài đặt mô phỏng

Thật dễ quên những chế độ cài đặt điều tiết và mô phỏng nào đã được dùng cho một lần chạy Lighthouse cụ thể. Báo cáo Lighthouse hiện bao gồm các chế độ cài đặt mô phỏng thời gian chạy dùng để tạo báo cáo; một yêu cầu về tính năng trong thời gian dài:

Cài đặt mô phỏng

Dữ liệu theo dõi hữu ích hơn

Các chỉ số của Lighthouse như "Thời gian hiển thị có ý nghĩa đầu tiên", "Thời gian tương tác", v.v. được lồng ghép dưới dạng chỉ số Thời gian người dùng đo lường và được đưa trở 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, thì giờ đây, bạn có thể thả dấu vết vào Công cụ cho nhà phát triển hoặc mở dấu vết đó trong Trình xem tiến trình của 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 lượt tải trang.

Dữ liệu theo dõi

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 Người 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.

Nút Mở trong Trình xem
Mở trong trang Kết quả xem

Ở hậu trường, Người xem sẽ được bạn cho phép thông qua OAuth để tạo một thông tin bí mật trên GitHub và lưu báo cáo tại đó. Vì báo cáo được thực hiện 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 của Người xem để tạo ý chính trong chế độ cài đặt GitHub.

Thử nghiệm hiệu suất

Phiên bản đầu tiên của dự án Thử nghiệm hiệu suất đã có 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 tra tương tác tác động của việc chặn hoặc trì hoãn thành phần trong đường dẫn quan trọng trong quá trình phát triển.

Khi Lighthouse chạy cùng 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 đó.

Bật/tắt chế độ cài đặt thời gian chạy

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 này tại developers.google.com/web/tools/lighthouse/ và thêm tài liệu kiểm tra mới.

Tài liệu mới

Vậy là xong!

Để biết toàn bộ thông tin về tính năng mới nhất trong 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 tìm ý tưởng về những gì bạn muốn xem tiếp theo.