Xây dựng web tốt hơn bằng Lighthouse

Kể từ Google I/O, chúng tôi đã nỗ lực biến Lighthouse trở thành một người bạn đồng hành tuyệt vời để xây dựng các Ứng dụng web tiến bộ tuyệt vời:

Hôm nay, chúng tôi rất vui được thông báo về bản phát hành 1.3 của Lighthouse. Lighthouse 1.3 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 qua npm (npm i -g lighthouse) hoặc tải tiện ích xuống từ Cửa hàng Chrome trực tuyến.

Vậy có gì mới?

Giao diện mới

Nếu đã sử dụng phiên bản cũ của Lighthouse, bạn có thể nhận thấy rằng biểu trưng còn mới! Báo cáo HTML và Tiện ích của Chrome cũng đã được làm mới hoàn toàn, với cách trình bày điểm số rõ ràng hơn và tính nhất quán giữa các kết quả kiểm tra. Chúng tôi cũng bổ sung thông tin gỡ lỗi hữu ích khi bạn không kiểm thử được, đồng thời bổ sung con trỏ đến cách giải quyết được đề xuất.

Báo cáo Lighthouse

Các phương pháp hay nhất mới

Đến nay, Lighthouse đã tập trung vào các chỉ số hiệu suất và chất lượng của PWA. Tuy nhiên, mục tiêu bao quát của dự án này là cung cấp sách hướng dẫn về mọi hoạt động phát triển web. Tài liệu này bao gồm hướng dẫn về các phương pháp chung hay nhất, mẹo về hiệu suất và hỗ trợ tiếp cận cũng như thông tin trợ giúp toàn diện về cách tạo ứng dụng chất lượng.

"Do Better Web" là một nỗ lực trong dự án Lighthouse nhằm giúp các nhà phát triển hoạt động hiệu quả hơn trên web. Nói cách khác, giúp họ hiện đại hoá và tối ưu hoá các ứng dụng web. Thông thường, các nhà phát triển web sử dụng các phương pháp lỗi thời, chống mẫu hoặc gặp phải các sự cố hiệu suất đã biết mà không nhận ra. Ví dụ: mọi người đều biết rằng bạn nên thực hiện ảnh động dựa trên JS bằng requestAnimationFrame() thay vì setInterval(). Tuy nhiên, nếu nhà phát triển không biết về API mới hơn, ứng dụng web của họ sẽ bị ảnh hưởng một cách không cần thiết.

Lighthouse 1.3 cung cấp hơn 20 đề xuất phương pháp mới hay nhất, từ các mẹo hiện đại hoá các tính năng CSS và JavaScript cho đến các đề xuất về hiệu suất như: "Giảm số lượng thành phần chặn hiển thị", "Sử dụng trình nghe sự kiện thụ động để cải thiện hiệu suất cuộn".

Thực hiện các phương pháp hay nhất dành cho web.

Chúng tôi sẽ tiếp tục bổ sung thêm các đề xuất theo thời gian. Nếu bạn có đề xuất về các phương pháp hay nhất hoặc muốn giúp chúng tôi viết bài kiểm tra, hãy báo cáo vấn đề trên GitHub.

Trình xem báo cáo

Cuối cùng nhưng không kém phần quan trọng, chúng tôi rất vui được thông báo về một trình xem web mới cho kết quả Lighthouse. Truy cập vào googlechrome.github.io/lighthouse/viewer, kéo và thả kết quả của lần chạy Lighthouse (hoặc nhấp để tải tệp của bạn lên) rồi voila. Báo cáo HTML "Insta" của Lighthouse.

Người xem báo cáo.
Trình xem báo cáo

Trình xem Lighthouse cũng cho phép bạn chia sẻ báo cáo với người khác. Khi nhấp vào biểu tượng chia sẻ, bạn sẽ được đăng nhập vào GitHub. Chúng tôi lưu trữ các báo cáo dưới dạng thông tin chính bí mật trong tài khoản của bạn để bạn có thể dễ dàng xoá báo cáo đã chia sẻ hoặc cập nhật báo cáo đó sau này. Việc sử dụng GitHub để lưu trữ dữ liệu cũng có nghĩa là bạn có thể quản lý phiên bản miễn phí!

Cấu trúc trình xem.
Cấu trúc của người xem

Trình xem Lighthouse có thể tải lại các báo cáo hiện có bằng cách thêm ?gist=GIST_ID vào URL:

Cấu trúc trình xem 2.
Cấu trúc người xem 2

Để biết tất cả thông tin về nội dung 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.