Có gì mới trong Lighthouse 9.0

Brendan Kenny
Brendan Kenny

Lighthouse là công cụ kiểm tra trang web giúp nhà phát triển có các cơ hội và chẩn đoán để 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 Canary và trong PageSpeed Insights. Bản cập nhật đó sẽ chuyển sang phiên bản Chrome ổn định trên 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 gây gián đoạn quy trình làm việc trong 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 trong báo cáo JSON của Lighthouse, có thể có một số thay đổi có thể gây lỗi trong phiên bản 9.0 mà bạn cần lưu ý.

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

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

Lighthouse có API luồng người dùng mới cho phép thử nghiệm phòng thí nghiệm tại bất kỳ thời điểm nào trong thời gian tồn tại 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, và Lighthouse có thể được gọi theo nhiều cách để nắm bắt 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 quá trình tương tác với trang.

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

Để biết thêm thông tin, hãy xem hướng dẫn về luồng người dùng và mã mẫu của Lighthouse.

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 và làm cho nguồn của báo cáo được thể hiện 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 để giúp bạn nhanh chóng hiểu được trang đang được kiểm tra 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 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 để truyền đạt tốt 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 cho các mục như thời điểm chụp trang, loại mô phỏng trang được sử dụng và phiên bản Chrome chạy thử nghiệm.

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

Một vấn đề thường gặp về khả năng hỗ trợ tiếp cận là khi những nội dung được coi là duy nhất trong một trang thì 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 được sử dụng trên nhiều phần tử.

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

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ê:

Một bài kiểm tra 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, cho thấy hai phần tử và cả hai phần tử đều có cùng một "id"

Chức năng "nút liên quan" này do axe-core cung cấp, vì vậy, cũng có thể xuất hiện trong các cuộc 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 đề về việc thu thập báo cáo của người dùngcách triển khai yêu cầu lấy dữ liệu.

Ngọn hải đăng đang chạy

Lighthouse có 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 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 nút Lighthouse, hãy sử dụng các lệnh sau:

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

Hãy liên hệ với nhóm Lighthouse

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