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 tìm ra 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 11 hiện có sẵn trên dòng lệnh thông qua npm, trong Chrome Canary và trong PageSpeed Insights. Tính năng này sẽ có trong Bản ổn định của Chrome từ Chrome 118.

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

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

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

Các quy trình kiểm tra và trọng số mới

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

  • 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 quy trình kiểm tra mới, trọng số của tất cả các quy trình 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ề cách tính đ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 quy trình kiểm tra và trọng số mới.

Chế độ hiển thị của quy trình 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. Mục kiểm tra thủ công hiện được tự động mở rộng khi tất cả các quy trình kiểm tra tự động đều đạt.

Báo cáo Lighthouse cho thấy các quy trình kiểm tra thủ công trong danh mục hỗ trợ tiếp cận đã mở rộng

Điều này nhấn mạnh rằng việc vượt qua tất cả các quy trình kiểm tra tự động và đạt điểm 100 về khả năng hỗ trợ tiếp cận 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. Các quy trình kiểm tra thủ công cũng được sắp xếp lại để bắt đầu bằng những quy trình kiểm tra dễ tiếp cận nhất.

Thay đổi đối với các quy trình kiểm tra hiện có

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

INP không còn là chỉ số thử nghiệm nữa, 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ụ

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

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

Quá trình kiểm tra resource-summary đã bị xoá khỏi báo cáo Lighthouse. Bạn vẫn có thể biên soạn 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);

Trình đ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 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.

Chạy Lighthouse

Lighthouse có trong Chrome DevTools, npm (dưới dạng mô-đun Node 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ử Lighthouse Node CLI, hãy sử 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 Lighthouse 11 hoặc bất kỳ nội dung nào khác liên quan đến Lighthouse: