Có gì mới trong Lighthouse 9.0

Brendan Kenny
Brendan Kenny

Lighthouse là một công cụ kiểm tra trang web giúp nhà phát triển cung cấp các cơ hội và thông tin chẩn đoán nhằm cải thiện trải nghiệm người dùng trên trang web của họ.

Lighthouse 9.0 có sẵn ngay trên dòng lệnh, trong Chrome CanaryPageSpeed Insights. Phiên bản này sẽ được chuyển sang bản ổn định của Chrome trong Chrome 98.

Nội dung thay đổi đối với API

Hầu hết người dùng sẽ không gặp phải bất kỳ thay đổi nào có thể gây lỗi quy trình công việc với bản phát hành này. Nếu bạn chạy các quy trình kiểm tra Lighthouse tuỳ chỉnh hoặc sử dụng các công cụ phụ thuộc vào thông tin chi tiết nằm sâu trong JSON báo cáo Lighthouse, thì có thể có một số thay đổi có thể gây lỗi trong 9.0 mà bạn cần lưu ý.

Xem danh sách đầy đủ các thay đổi trong nhật ký thay đổi 9.0.

Lighthouse cho luồng người dùng

Lighthouse có một API luồng người dùng mới cho phép kiểm thử trong phòng thí nghiệm bất cứ lúc nào trong thời gian hoạt động của một trang.

Puppeteer được dùng để tập lệnh tải trang và kích hoạt các hoạt động tương tác tổng hợp của người dùng. Lighthouse có thể được gọi theo nhiều cách để thu thập thông tin chi tiết chính trong các hoạt động tương tác đó. Điều này có nghĩa là hiệu suất có thể được đo lường trong quá trình tải trang trong các lượt tương tác với trang.

Báo cáo luồng người dùng Lighthouse bao gồm nhiều bước tải và tương tác với một trang web cùng kết quả kiểm tra Lighthouse cho từng bước

Để biết thêm thông tin, hãy xem hướng dẫn về quy trình người dùng Lighthouse và mã mẫu.

Làm mới báo cáo

Báo cáo Lighthouse được làm mới để cải thiện khả năng đọc, đồng thời làm cho nguồn của báo cáo cũng như cách chạy báo cáo rõ ràng hơn.

Ảnh chụp màn hình cuối cùng được nhúng vào đầu báo cáo để cho thấy ngay rằng trang đang được thử nghiệm có tải đúng cách và có định dạng như dự kiến hay không.

Báo cáo Lighthouse 9.0 liệt kê các chỉ số hiệu suất chính một cách nổi bật hơn và nhúng ảnh chụp màn hình về giao diện cuối cùng của trang trong báo cáo hiệu suất

Thông tin tóm tắt ở cuối báo cáo cũng được thiết kế lại để thể hiện rõ hơn cách chạy Lighthouse và báo cáo được thu thập.

Phần cài đặt cập nhật của báo cáo Lighthouse hiện có thông tin tóm tắt về các mục như thời điểm ghi lại trang, kiểu mô phỏng trang được sử dụng và phiên bản Chrome chạy kiểm thử.

Để xem báo cáo mới trong thực tế, hãy dùng thử Lighthouse 9.0 hoặc truy cập báo cáo mẫu này.

Một vấn đề phổ biến về khả năng hỗ trợ tiếp cận là khi những nội dung được cho là duy nhất trên một trang lại không được như vậy, chẳng hạn như khi mã nhận dạng được tham chiếu trong thuộc tính aria-labelledby lại được sử dụng trên nhiều phần tử.

Lighthouse luôn cảnh báo về tình huống này, nhưng sẽ chỉ liệt kê trường hợp đầu tiên của một phần tử có mã nhận dạng lặp lại. Điều này thường gây nhầm lẫn vì một số người dùng sẽ cho rằng trường hợp này đang hiển thị tất cả các phần tử gây ra sự cố. Vì Lighthouse chỉ hiển thị một phần tử duy nhất, nên họ cho rằng phần tử đơn lẻ đó bị gắn cờ là trùng lặp do có lỗi.

Trong Lighthouse 9.0, tất cả các phần tử dùng chung mã nhận dạng đó hiện được liệt kê:

Bài kiểm tra trên Lighthouse cho "Tất cả các phần tử có thể làm tâm điểm phải có một "id" duy nhất, hiển thị hai phần tử có cùng một "id"

"Nút có liên quan" này chức năng do axe-core cung cấp, vì vậy, chức năng này cũng có thể xuất hiện trong các bài kiểm tra khả năng hỗ trợ tiếp cận khác.

Để biết thêm thông tin, hãy xem vấn đề khi thu thập báo cáo của người dùngyêu cầu lấy dữ liệu về việc triển khai.

Lighthouse đang chạy

Bạn có thể sử dụng Lighthouse trong Công cụ của Chrome cho nhà phát triển, npm (dưới dạng mô-đun Nút và CLI) và dưới dạng tiện ích của trình duyệt (trong ChromeFirefox). Công cụ này hỗ trợ nhiều dịch vụ của Google, trong đó có web.dev/measurePageSpeed Insights.

Để dùng thử CLI của Nút Lighthouse, hãy dùng các lệnh sau:

npm install -g lighthouse
lighthouse https://www.example.com --view

Liên hệ với nhóm Lighthouse

Để thảo luận về các tính năng mới, thay đổi trong bản phát hành 9.0 hoặc bất cứ điều gì khác liên quan đến Lighthouse: