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 nắm bắt 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 hiện đã có trên dòng lệnh thông qua npm, trong Chrome Canary và trong PageSpeed Insights. Tính năng này sẽ ra mắt trong phiên bản Chrome ổn định 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 nội dung cập nhật về danh mục bao gồm quy trình kiểm tra tự động mới, hệ số trọng số được cải thiện và 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 của trang web.

Quy trình kiểm tra và trọng số mới

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

  • 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 các 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ị 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 thử tự động, nhưng vẫn được đưa vào danh sách kiểm tra để xác minh chức năng quan trọng. Phần kiểm tra thủ công hiện sẽ tự động mở rộng khi tất cả các quy trình kiểm tra tự động đều đã vượt qua.

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 được 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ể hỗ trợ tiếp cận; việc kiểm thử thủ công vẫn rất quan trọng. Chúng tôi cũng đã sắp xếp lại các quy trình kiểm tra thủ công để 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 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ụ

Bạn không cần phải có worker dịch vụ nữa để có thể cài đặ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

Đã xoá quy trình kiểm tra resource-summary khỏi báo cáo 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);

Điều hướng cũ

Chúng tôi đã xoá cờ --legacy-navigation cho CLI, hàm legacyNavigation() trong API Node và hộp đánh dấu "Điều hướng cũ" trong bảng điều khiển DevTools. Việc 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 Công cụ của Chrome cho nhà phát triển, npm (dưới dạng mô-đun Node và công cụ CLI) cũng như dưới dạng tiện ích 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: