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 các nhà phát triển tìm ra 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 11 hoạt động ngay trên dòng lệnh thông qua npm, trong Chrome Canary và PageSpeed Insights. Thao tác này sẽ được chuyển sang phiên bản ổn định của Chrome trong 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

Nội dung cập nhật về 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.

Kết quả kiểm tra và trọng số mới

Kể từ Lighthouse 10.0, chúng tôi đã thêm 13 hoạt động 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 bài kiểm tra mới, trọng số của tất cả các lượt kiểm tra đã được cập nhật để phù hợp hơn với mức độ tác động của quy tắc aXe tương ứng. Hãy xem tài liệu về điểm số hỗ trợ tiếp cận bằng Lighthouse để biết thông tin chi tiết chính xác về các quy trình kiểm tra và trọng số mới.

Xem kết quả kiểm tra theo cách thủ công

Lighthouse luôn bao gồm một số hoạt động 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ả kiểm tra tự động đã vượt qua.

Một báo cáo của Lighthouse trình bày các bài 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 bài kiểm tra tự động và đạt đ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; thì việc kiểm thử thủ công vẫn rất quan trọng. Các quy trình kiểm tra thủ công cũng đã được sắp xếp lại để bắt đầu với những bước kiểm tra dễ tiếp cận nhất.

Thay đổi đối với các lượt 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 ở giai đoạn thử nghiệm, do đó, 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ụ

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

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

Kết quả kiểm tra resource-summary đã bị xoá khỏi báo cáo của Lighthouse. Bạn vẫn có thể biên dịch số liệu thống kê về yêu cầu mạng 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);

Cách di chuyển cũ

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

Lighthouse đ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à 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 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, nội dung thay đổi trong bản phát hành Lighthouse 11 hoặc bất kỳ nội dung nào khác liên quan đến Lighthouse: