Có gì mới trong Lighthouse 11

Adam Raine
Adam Raine
GitHub
Jasmine Yan
Jasmine Yan
GitHub

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

Lighthouse 11 có sẵn ngay trên dòng lệnh thông qua npm, trong Chrome Canary và trong PageSpeed Insights. Nội dung đó sẽ chuyển sang phiên bản chính thức của Chrome trên Chrome 118.

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

Nội dung cập nhật về danh mục Hỗ trợ tiếp cận

Cập nhật danh mục bao gồm kiểm tra tự động mới, trọng số được cải thiện và kiểm tra thủ công được ưu tiên để giúp nhà phát triển làm cho trang web của họ dễ truy cập hơn.

Kiểm tra và tính trọng số mới

Kể từ Lighthouse 10.0, chúng tôi đã thêm 13 quy trình kiểm tra khả năng hỗ trợ tiếp cận mới:

  • aria-allowed-role
  • aria-dialog-name
  • aria-text
  • html-xml-lang-mismatch
  • image-redundant-alt
  • input-button-name
  • label-content-name-mismatch
  • link-in-text-block
  • select-name
  • skip-link
  • table–duplicate-name
  • table-fake-caption
  • td-has-header

Ngoài các cuộc kiểm tra mới, chúng tôi đã cập nhật trọng số của tất cả các cuộc kiểm tra để phù hợp hơn với các mức tác động tương ứng của quy tắc aXe. Hãy xem tài liệu về điểm hỗ trợ tiếp cận của Lighthouse để biết thông tin chi tiết chính xác về các lần kiểm tra và trọng số mới.

Hiển thị kiểm tra thủ công

Lighthouse luôn bao gồm một số quy trình kiểm tra thủ công không thể kiểm tra tự động, nhưng vẫn được đưa vào dưới dạng danh sách kiểm tra để xác minh chức năng quan trọng. Giờ đây, phần kiểm tra thủ công được tự động mở rộng khi tất cả các cuộc kiểm tra tự động đã qua.

Một báo cáo Lighthouse cho thấy các bước kiểm tra thủ công trong danh mục hỗ trợ tiếp cận được mở rộng

Điều này nhấn mạnh rằng việc vượt qua tất cả các cuộc kiểm tra tự động và chấm điểm 100 về khả năng truy cập không đảm bảo rằng trang được kiểm tra có thể truy cập được; kiểm tra thủ công vẫn quan trọng. Chúng tôi cũng đã sắp xếp lại các cuộc kiểm tra thủ công để bắt đầu bằng những bước kiểm tra dễ tiếp cận nhất.

Các thay đổi đối với các cuộc kiểm tra hiện tại

Lượt tương tác đến nội dung hiển thị tiếp theo (INP)

INP không còn thử nghiệm, vì vậy, chỉ số này đã được chuyển từ experimental-interaction-to-next-paint sang interaction-to-next-paint.

Trình chạy dịch vụ

Một trình chạy dịch vụ không còn cần thiết để có thể cài đặt một trang dưới dạng PWA trong Chrome, vì vậy, bước kiểm tra service-worker đã bị xoá khỏi danh mục PWA Lighthouse.

Tóm tắt tài nguyên

Kiểm tra resource-summary đã bị xoá khỏi báo cáo Lighthouse. Số liệu thống kê về yêu cầu mạng vẫn có thể được tổng hợp bằng cách sử dụng quy trình kiểm tra network-requests ẩn:

const {lhr} = await lighthouse('https://example.com');
const networkRequests = lhr.audits['network-requests'].details.items;
const resourceSummary = {};

for (const request of networkRequests) {
  let total = resourceSummary[request.resourceType] || 0;
  total += request.resourceSize;
  resourceSummary[request.resourceType] = total;
}

console.log(resourceSummary);

Điều hướng cũ

Cờ --legacy-navigation cho CLI, hàm legacyNavigation() trong Node API và hộp đánh dấu "Điều hướng cũ" trong bảng điều khiển Công cụ cho nhà phát triển đều đã bị xoá. Điều này kết thúc quá trình chuyển đổi kéo dài một năm trong cơ sở hạ tầng của Lighthouse để hỗ trợ luồng người dùng.

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

Lighthouse có sẵn trong Công cụ của Chrome cho nhà phát triển, npm (dưới dạng mô-đun nút và công cụ CLI) và dưới dạng tiện ích của trình duyệt (trong Chrome và Firefox). Công cụ này cũng hỗ trợ một số dịch vụ của Google, bao gồm cả PageSpeed 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 Lighthouse 11 hoặc bất cứ điều gì khác liên quan đến Lighthouse: